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

newTeethCanRepaired

于 2022-01-04 17:30:49 发布

阅读量732

点赞数 2

文章标签：前端 js

本文链接：https://blog.csdn.net/qq_40144303/article/details/122306230

版权

前端使用html2canvas和jsPDF生成PDF时遇到网络图片跨域问题，设置a标签crossOrigin属性无法解决问题。解决方法包括：1.服务器配置允许跨域；2.后端生成PDF。目前未找到仅靠前端处理跨域的方案。

摘要由CSDN通过智能技术生成

看了有些文章说的设置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.width
              let contentHeight = canvas.height
              let pageHeight = contentWidth / 592.28 * 841.89
              let