无法使用 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();
}

Answer 1

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

包裹link：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 和火狐 76.0.1.

你在<img :src=url>上也有错别字，应该是<img :src="url">

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

和道具:paginate-elements-by-height="10"我觉得应该高一点，试试1300。

Answer 3

在失去了一天之后我发现了问题！这里有 2 个错误来源：

-如果在 "vue-html2pdf" 中使用 "component"，分页符将无法工作。要解决此问题，请使用 "vue-fragment" 库 <3

-如果你为 "paginate-elements-by-height" 属性使用的值太小，"vue-html2pdf 会出错，然后你可以终止进程。默认情况下它是 1300 或 1400，尝试使用 1600 或更多你的问题就解决了。

Answer 4

修复了这个问题：无法使用 vue-html2pdf

将 html 代码转换为 pdf

   the first of all i have set packages in the such following sequence
    1. npm i jspdf@1.5.2 
    2. npm i html2pdf.js@0.9.1
    3. npm i vue-html2pdf@1.8.0

    On time the passing some steps to create pdf file i got mistake
    `TypeError: str.charAt(...) is not a function`.
    or on another configuration for vue-html2pdf i am getting the console messages:
    - Dom Has Rendered 
    - 0ms html2canvas: html2canvas $npm_package_version
    - 926ms html2canvas: Document cloned, using computed rendering
    - 926ms html2canvas: Starting node parsing
    - 947ms html2canvas: Finished parsing node tree
    - 948ms html2canvas: Finished loading 0 images Array(0)
    - 949ms html2canvas: Starting renderer
    - 950ms html2canvas: Canvas renderer initialized (816x18 at 312,63) with scale 2
    - 959ms html2canvas: Render completed
    but pdf file no created
    I fixed this problem:
    when i looked at "node_modules\html2pdf.js\package.json"
    and i have seen
    "dependencies": {
        "es6-promise": "^4.2.5",
        "html2canvas": "^1.0.0-alpha.12",
        "jspdf": "^1.4.1"
     }
     then from "myproject\package.json" - 
    I have replaced
     "dependencies": {
     from "jspdf: ^1.5.2" to   "jspdf: ^1.4.1"
     so need to set
     1. npm i jspdf@1.4.1
     2. npm i html2pdf.js@0.9.1
     3. npm i vue-html2pdf@1.8.0
     so you should look at *jspdf version* into "node_modules\html2pdf.js\package.json"

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

Cannnot convert HTML code to PDF with vue-html2pdf

html2pdf

vue.js