1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 前端利用 html2canvas 和 jsPDF生成 PDF 网络图片跨越 注意问题

前端利用 html2canvas 和 jsPDF生成 PDF 网络图片跨越 注意问题

时间:2024-06-11 23:46:08

相关推荐

前端利用 html2canvas 和 jsPDF生成 PDF 网络图片跨越 注意问题

看了有些文章说的 设置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 )

总结:暂时没找到不 配置 服务器解决域名等 只用前端处理 这个跨越的方法,欢迎大佬们提出一些更好优化方法

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。