htmlToPDF.js的内容：
import html2Canvas from "html2canvas";
import jsPDF from "jspdf";
const htmlToPdf = {
getPdf(title, id) {
html2Canvas(document.querySelector(id), {
// allowTaint: false,
taintTest: true,
logging: true,
useCORS: true,
dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
scale: 4, //按比例增加分辨率
}).then((canvas) => {
var pdf = new jsPDF("p", "mm", "a4"); //A4纸，纵向
var ctx = canvas.getContext("2d"),
a4w = 190,
a4h = 272, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
renderedHeight = 0;
while (renderedHeight < canvas.height) {
var page = document.createElement("canvas");
page.width = canvas.width;
page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页
//用getImageData剪裁指定区域，并画到前面创建的canvas对象中
page
.getContext("2d")
.putImageData(
ctx.getImageData(
0,
renderedHeight,
canvas.width,
Math.min(imgHeight, canvas.height - renderedHeight)
),
0,
0
);
pdf.addImage(
page.toDataURL("image/jpeg", 1.0),
"JPEG",
10,
10,
a4w,
Math.min(a4h, (a4w * page.height) / page.width)
); //添加图像到页面，保留10mm边距
renderedHeight += imgHeight;
if (renderedHeight < canvas.height) {
pdf.addPage(); //如果后面还有内容，添加一个空页
}
// delete page;
}
pdf.save(title + ".pdf");
});
},
};
export default htmlToPdf;
在页面中使用时，import htmlToPdf from "@/utils/htmlToPDF";
在导出方法里写
const downExport = () => {
htmlToPdf.getPdf("重点项目达成风险进展报告", "#report");
};
这样就把id是report的所有dom元素导出到pdf,但是里面有张图片提示了跨域
解决的时候分了三个步骤：
1、htmlToPDF.js里设置useCORS: true,
2、<img alt="图片" :src="auditor" crossorigin="anonymous" style="width: 100%" />跨域的那张图片增加crossorigin="anonymous"属性
3、让后端在图片所在服务器设置允许跨域；后端也需要在接口请求所在的nginx中配置好允许跨域
注意：第三点要先设置好，第二点加的图片属性才能显示，如果第三点没有设置好加上第二点图片会裂开加载不出来
以上
