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

Question

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

当我在标签中写入文本时：<section>something</section>生成我的 PDF。但是当我在 tag: 中写入时<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();
}

Answer 1

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

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

Codesandbox 示例：https ://codesandbox.io/s/xlnzq7y28q

希望，你的问题会得到解决。谢谢。

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">

如果可以，请提供分配给道具的变量 test、size 和 ref 的值。

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