本文主要是介绍React网页转换为pdf并下载｜使用jspdf html2canvas，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
checkout 分支后突然报错，提示：
Can't resolve 'jspdf' in ...
Can't resolve 'html2canvas' in ...
解决方法很简单，重新 yarn install 就好了，至于为什么，我暂时也不知道，总之解决了。
思路来源：
先随便记一下写的js，将组件转换为pdf，添加水印，并且下载：
import html2canvas from "html2canvas";
import jsPDF from "jspdf";/*** 导出PDF* @param {导出后的文件名} filename* @param {要导出的dom节点} dom* @param {导出的文件水印：用户邮箱} email*/export const exportPDF = (filename, dom, email) => {const scale = 0.8;// 滚动到顶部，避免打印不全document.documentElement.scrollTop = 0;html2canvas(dom, {allowTaint: true, // Whether to allow cross-origin images to taint the canvasscale, // The scale to use for rendering. Defaults to the browsers device pixel ratio.}).then((canvas) => {const contentWidth = canvas.width / scale;const contentHeight = canvas.height / scale;console.log("height",contentHeight,canvas.height,contentWidth,canvas.width,dom.offsetWidth,dom.offsetHeight,);const pdf = new jsPDF("", "pt", [contentWidth, contentHeight]);const pageData = canvas.toDataURL("image/jpeg", 1.0);pdf.addImage(pageData,"JPEG",(contentWidth - contentWidth / 2.6) / 2, // x偏移20, // y偏移contentWidth / 2.6,contentHeight > 14400 ? 14380 : contentHeight,"","FAST");// 添加水印for (let i = 1; i < contentHeight / 240 - 1; i++) {pdf.setTextColor(150);pdf.setFontSize(35);pdf.setFont("courier");pdf.text(contentWidth / 2, 450 * i, email, 45);}pdf.save(`${filename}.pdf`);});
};
这篇关于React网页转换为pdf并下载｜使用jspdf html2canvas的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
