jsPDF：使用新的.html()方法时，html2canvas未加载完成

Question

jsPDF：使用新的.html()方法时，html2canvas未加载完成

16

我想使用jsPDF.html将HTML页面转换为PDF，我正在使用以下代码：

savePdf () {
  var pdf = new jsPDF({unit: 'mm', format: 'a4', orientation: 'portrait' })
  pdf.html(document.getElementById('printable-cv'), {
    callback: function (pdf) {
      pdf.save('cv-a4.pdf');
    }
  })
}

但我遇到了错误 html2canvas未加载：这是我忘记的什么吗？我确实有html2canvas。

"html2canvas": "^1.0.0-alpha.12"

我正在使用vuejs和webpack。

在同一页中，我正在交替使用html2pdf，以下是代码：

savePdf0 () {
  let opt = {
    filename: 'cv.pdf',
    enableLinks: true,
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: {
      scale: 8,
      useCORS: true,
      width: 310,
      letterRendering: true,
    },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
  }
  html2pdf().set(opt).from(document.getElementById('printable-cv')).save()
}

正确地找到html2canvas。

html2canvas未加载到底意味着什么？我该如何加载它？

- Alessandro Dentella

我添加了一个 CodeSandbox 来展示问题：https://codesandbox.io/s/6vmqpwy0xr - Alessandro Dentella

5个回答

5

在 ptidus 的先前回答之后，以下代码应该可以工作：

saveAsPdf() {
  window.html2canvas = html2canvas;
  var doc = new jsPDF(
    'p', 'pt', 'a4'
  );
  doc.html(document.querySelector("body"), {
    callback: function(pdf) {
      pdf.save("cv-a4.pdf");
    }
  });
}

可能是边距有些问题，但我没有深入探究。

您还会注意到生成的 PDF 实际上是文本而不是图像。

代码示例

- Amit Merin

2

如果使用TypeScript，window.html2canvas可能会出现问题，所以只需使用丑陋的window["html2canvas"] = html2canvas即可。 - leoncc

2

如果你正在使用 webpack，我所做的是将 html2canvas 添加到 ProvidePlugin 中。你可以在这里阅读相关信息

// webpack configuration
plugins: [
    new webpack.ProvidePlugin({
        html2canvas: 'html2canvas'
    });
]

- Martiuh

1

当我使用Webpack时，返回已标记为正确的答案，表示它正在工作。 - André Kelling

0

以下两个步骤已经解决了问题：

// webpack 配置 plugins: [ new webpack.ProvidePlugin({ html2canvas: 'html2canvas' }); ]
window["html2canvas"] = html2canvas;

即使没有第一步，它也可以正常工作。

- Phani Kanth

0

我很幸运地单独加载了html2canvas：

下面的示例会保存一个包含从画布渲染的“Hello World”的.pdf文件（请检查下载）。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

    <script type="text/javascript">
    window.onload = function () {
        //1). draw 
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.fillStyle = "white"
        ctx.fillRect(0, 0, c.width, c.height);
        ctx.font = "30px Arial";
        ctx.strokeText("Hello World", 10, 50);

        
        //2).save as pdf
               const doc = new jspdf.jsPDF({ unit: 'pt' }); 

            doc.html(document.body, {
                callback: (pdf) => {
                    pdf.save('MyPdfFile.pdf')
                }
            });
    };
    </script>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100" style="border:3px solid red;">
    </canvas>
</body>
</html>

- mike

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ax_pernot · Accepted Answer

jsPDF需要在全局范围内声明html2canvas才能正常工作，因此您需要编写以下内容：

window.html2canvas = html2canvas;

在调用html()之前的某个位置。

话虽如此，我也没能让它正常工作，所以我使用了一个包装器来解决这个问题，它通过手动调用html2canvas()然后将得到的画布传递给jsPDF来解决这个问题。