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仓库中搜索了jsPDF，还在stackoverflow上搜索了解决方案，但没有找到任何有效的方法。

任何技巧都很棒。

Answer 1

好像我遇到了两个问题。

首先，我没有从iFrame正确获取内容。更改此行

drawables

对此

var iFrameBody = document.getElementById('myiframe')

..允许我访问iframe文档。

但是，正如in this solution很好地解释的那样，我遇到了一个相同来源政策问题。这就是@hammerbot在他的评论中提到的内容。

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

1 个答案: