在 es6 中使用 jsPDF 和 html2canvas

IT技术 javascript node.js reactjs jspdf html2canvas
2021-05-14 15:19:38

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

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

任何线索是什么问题?

谢谢。

jspdf.debug.js:3754Uncaught 错误:您需要https://github.com/niklasvh/html2canvashttps://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...:555fn7:@bootstrap2 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>

3个回答

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

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

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

jsPDF 需要 html2canvas 在窗口上:

window.html2canvas = html2canvas

或者调用window.你也可以修改你的导入:import * as jsPDF from 'jspdf'