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

【问题标题】：Printing an iframe to a PDF - how to get content from the page using VueJS将 iframe 打印到 PDF - 如何使用 VueJS 从页面获取内容
【发布时间】：2019-03-26 16:10:57
【问题描述】：

我正在尝试从我的应用程序打印仪表板。仪表板已嵌入 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 中搜索了解决方案，但没有找到任何可行的方法。

任何提示都会很棒。

【问题讨论】：

我不确定我在说什么，但这对我来说似乎很正常。想象一下，如果您包含来自 facebook 的 iframe，并且您可以从您自己创建的父级访问它。那将是某种巨大的安全漏洞，不是吗？
这是真的@Hammerbot，但我不想更改或编辑内容。我只需要在我的页面上呈现为 HTML 的元素。

标签： vue.js iframe jspdf

【解决方案1】：

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

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

var iFrameBody = document.getElementById('myiframe')

到这里

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

..让我可以访问 iframe 文档。

但是，正如 in this solution 解释得很好，我遇到了 same-origin-policy 问题。这就是@hammerbot 在他的评论中提到的。

【讨论】：