1.html2canvas 跨域的图片绘制出来是空白的
- 图片加属性 crossOrigin="anonymous"
- 图片链接后加 版本号
最终为: <img crossOrigin="anonymous" src="/static/images/xxx.png?v=20201022" />
2.html2canvas 报跨域错误
Access to image at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
最近项目中有个需求时前端将页面导出为pdf,
html2Canvas(document.querySelector("#pdfDom"), {
allowTaint: true,
}).then(function (canvas) {
let contentWidth = canvas.width;
let contentHeight = canvas.height;
let pageHeight = (contentWidth / 592.28) * 841.89;
let leftHeight = contentHeight;
let position = 0;
let imgWidth = 595.28;
let imgHeight = (592.28 / contentWidth) * contentHeight;
let pageData = canvas.toDataURL("image/jpeg", 1);
let PDF = new JsPDF("", "pt", "a4");
if (leftHeight < pageHeight) {
PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
if (leftHeight > 0) {
PDF.addPage();
}
}
}
PDF.save(title + ".pdf");
});
这种情况下,
- 先给图片加属性 crossOrigin="anonymous";
- 图片一定要加版本号,如果页面中多次使用同一张图片,切记版本号不能相同!版本号不能相同!版本号不能相同!
- 获取图片的base64格式,并重新赋值,代码如下:
// 由于 pdfBg 图片跨域,在导出为pdf的过程中报错,所以直接转为base64格式 let $imgs = document.getElementById("pdfDom").getElementsByTagName("img"); for (let index = 0; index < $imgs.length; index++) { let img = $imgs[index]; this.promiseList[index] = new Promise((resolve, reject)=>{ img.onload = ()=>{ let src = this.getBase64Image(img); img.onload = ()=>{}; img.src = src; resolve(); } }) } Promise.all(this.promiseList).then(()=>{ setTimeout(()=>{ this.exportPDF(); }, 2000); });