无法使用 vue-html2pdf 将 HTML 代码转换为 PDF

Question

我在 vuejs 中有一个项目，我必须使用 vue-html2pdf。

当我在标签中写入文本时： <section>something</section> ，生成了我的 PDF。但是当我在标签中写入： <section><p>something</p></section> 时，我的浏览器崩溃了。

这是我在 vuejs 中的代码：

 <vue-html2pdf
    :show-layout="false"
    :preview-modal="true"
    :paginate-elements-by-height="10"
    :filename="test"
    :pdf-quality="2"
    :pdf-format="size"
    :ref="ref"
>
    <section slot="pdf-content">
        <section class="pdf-item">
            <img :src=url>
        </section>
    </section>
</vue-html2pdf>

还有我下载 PDF 的功能：

 function generateReport() {
  this.$refs.html2Pdf.generatePdf();
}

原文由 aszymkiw 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

vue-html2pdf npm 模块无法正常工作。而不是你可以尝试 html2pdf 将 html 转换为 pdf 的模块 vuejs 。

包链接： https ://www.npmjs.com/package/html2pdf.js/v/0.9.1

代码沙盒示例： https ://codesandbox.io/s/xlnzq7y28q

希望，您的问题将得到解决。谢谢。

原文由 Sukanta Bala 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我刚刚看到这个，我是 vue-html2pdf 的开发人员，我在 1.3.6 版本上测试了你的代码，它在 Chrome 版本 81.0.4044.138、Microsoft Edge 44.18362.449.0 和 Firefox 76.0.1 上完美运行。

你也有打字错误 <img :src=url> 它应该是 <img :src="url">

如果可以的话，能否提供分配给 props 的变量 test、size 和 ref 的值。

还有prop :paginate-elements-by-height="10" 我觉得应该高一点，试试1300。

原文由 frost kazuma 发布，翻译遵循 CC BY-SA 4.0 许可协议