html2canvas把div生成图片时div中的图片为什么没显示?-灵析社区

来自武功山的爱

下面是一个div块: ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240923/e48097d7b655f763eb3f5d9320085223.png) 我用html2canvas把这个div生成了图片,然后用jspdf把图片保存成pdf格式。 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240923/21de63149e634516dbd5677005ab5f4c.png) 现在的问题是html2canvas把div生成图片时**DIV里面的图片没有显示** ,这图片是需要单独处理吗?有遇到过这问题的没? 下面是代码: const printHandle = async () => { console.log('打印') console.log('生成pdf') isPrint.value = true setTimeout(async () => { const content = document.getElementById('printContent') if (content) { const canvas = await html2canvas(content, { scale: 2 }) const imgData = canvas.toDataURL('image/png') const pdf = new jsPDF('p', 'mm', 'a4') const imgProps = pdf.getImageProperties(imgData) const pdfWidth = pdf.internal.pageSize.getWidth() const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight) // 将PDF输出为Blob对象 const pdfBlob = pdf.output('blob') // 创建一个链接元素并设置其属性 const downloadLink = document.createElement('a') downloadLink.href = URL.createObjectURL(pdfBlob) downloadLink.download = 'document.pdf' // 设置下载的文件名 // 触发点击事件以开始下载 document.body.appendChild(downloadLink) downloadLink.click() document.body.removeChild(downloadLink) // 之后可以移除链接元素 isPrint.value = false } }, 500) }

阅读量:216

点赞量:0

问AI
控制台没有报错吗,大概率是图片跨域了,前台需要设置下跨域请求(前提是资源支持跨域) "https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img..." (https://link.segmentfault.com/?enc=zV33GUm%2FB5HivBW7TMCV1Q%3D%3D.Lbv33Zv4syHyyphlXflmmY6BB%2F2GWChgTq6AZzzux2WEiHS5wp%2B2qtpOTeyJbxItrkrtbmwCo%2FenJRQx%2FM%2FcTXQYC246kWl%2Bx38%2B7Pv7m1M%3D)