看了有些文章说的 设置a标签 crossOrigin='*' 或者 anonymous 就可以解决跨越 然后降网络图片转base64位 就可以实现跨越,但是问题 是 一但设置 a标签后,就会出错,导致后面操作无效化。
如:
光先设置 前端 a标签 image.setAttribute("crossOrigin", 'anonymous'); 就会有报错提示
然后也没找到单单通过前端处理 可以解决这类问题的,或者能正常生成pdf
解决方法:
1.服务器去配置 跨越问题 (如果是华为云 obs 等 云服务器的话,去配置相关云服务器的 )
然后利用html2canvas 和 jsPDF
html2canvas(html, {allowTaint: true, //允许污染useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用,下面解释)}).then((canvas) => {// pdf let contentWidth = canvas.widthlet contentHeight = canvas.heightlet pageHeight = contentWidth / 592.28 * 841.89let leftHeight = contentHeightlet position = 0let imgWidth = 595.28let imgHeight = 592.28 / contentWidth * contentHeightlet pageData = canvas.toDataURL('image/jpeg', 1.0)let PDF = new jsPDF('p', '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 -= pageHeightposition -= 841.89if (leftHeight > 0) {PDF.addPage()}}}PDF.save('刊播报告' + '.pdf')loading.close();}).catch((err) => {console.log(err, 'pdf');loading.close();});
方法2
后端 生成pdf (即不需要前端 canvas 生成 pdf )
总结:暂时没找到不 配置 服务器解决域名等 只用前端处理 这个跨越的方法,欢迎大佬们提出一些更好优化方法