将iframe打印到PDF - 如何使用VueJS从页面获取内容

Question

我正在尝试从我的应用程序打印仪表板。仪表板嵌入了iFrame图表，我希望将它们包含在PDF中。

我正在使用JSPDF。我能够生成文本元素的PDF，以便插件正常工作。

我的问题是如何从iFrame中获取内容。这是我到目前为止的地方：

在我的html文件中：

<iframe class="myiframe" v-bind:src="iframe_url"></iframe>

和我的vuejs脚本：

import jsPDF from 'jspdf'
export default {
    methods: {
        downloadPDF() {
           const doc = new jsPDF();
          // some code...          
          // iFrames
          vOffset + 10
          doc.text(25, vOffset, 'Data Flows')
          var iFrameBody = document.getElementById('myiframe')
          doc.fromHTML(iFrameBody, 15, vOffset)
          doc.save("sample.pdf")
    }

    }

}

PDF正确打印，但在iFrame出现的位置是空白。

我已经搜索了github repo的jsPDF以及stackoverflow的解决方案，但没有找到任何有用的东西。

任何提示都会很棒。

Answer 1

看起来我遇到了两个问题。

1. 首先，我没有正确地从iFrame获取内容。改变这一行

var iFrameBody = document.getElementById('myiframe')

对此

var iFrameBody = this.$refs.myiframe.contentWindow.document

..允许我访问iframe文档。

2. 然而，正如in this solution所解释的那样，我遇到了同源政策问题。这是@hammerbot在他的评论中提到的。