在 es6 中使用 jsPDF 和 html2canvas答案

【问题标题】：Using jsPDF and html2canvas with es6在 es6 中使用 jsPDF 和 html2canvas
【发布时间】：2023-09-01 07:32:01
【问题描述】：

我正在尝试将 jsPDF 和 html2canvas 与 es6 一起使用。

我正在导入 html2canvas 和 jsPDF，但在 addHTML 上出现错误当我注释掉 addHTML 时，会生成 pdf。

有什么线索吗？

谢谢。

jspdf.debug.js:3754未捕获错误：您需要 https://github.com/niklasvh/html2canvas 或 https://github.com/cburgmer/rasterizeHTML.js(...)jsPDFAPI.addHTML @ jspdf.debug.js:3754（匿名函数）@ index.js:12（匿名函数） @ bundle.js?V1.27.2:31546(匿名函数) @bundle.js?V1.27.2:31547__webpack_require__ @bootstrap f7845b2…:555fn @bootstrap f7845b2…:86(匿名函数) @bootstrap f7845b2…:578__webpack_require__ @bootstrap f7845b2… :555(匿名函数)@bootstrap f7845b2…:578(匿名函数)@bootstrap f7845b2…:578

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

doc.setFontSize(40);
doc.text(35, 25, "Paranyan loves jsPDF");

doc.addHTML(document.footer,function() {
     pdf.save('web.pdf');
});

<footer>
	<p id="to-pdf">HTML content...</p>
</footer>

【问题讨论】：

想知道你是否解决了这个问题。

标签： javascript node.js reactjs jspdf html2canvas

【解决方案1】：

在 index.html 中包含以下脚本，而不是在 typescript 文件中导入

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

【讨论】：

【解决方案2】：

来自https://github.com/MrRio/jsPDF/issues/1225：

jsPDF 要求 html2canvas 在窗口上：

window.html2canvas = html2canvas

【讨论】：

【解决方案3】：

除了调用window.，您还可以将导入修改为：import * as jsPDF from 'jspdf'

【讨论】：