html2Canvas+JsPDF 导出pdf 无法显示网络图片

html2Canvas+JsPDF 导出pdf

问题:类似于下面着这种网络图片使用img导出的时候是空白的

https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics4.baidu.com%2Ffeed%2F7e3e6709c93d70cf827fb2fda054500cb8a12bc9.jpeg%40f_auto%3Ftoken%3Dd97d3f0fd06e680e592584f8c7a24ac8\&refer=http%3A%2F%2Fwww.baidu.com\&app=2021\&size=f360,240\&n=0\&g=0n\&q=75\&fmt=auto?sec=1690045200\&t=e1a88c44b1b9907677400a079766e0bf

解决:将网络图片转成base64

复制代码
<img :src="aaa" style="width:200px" alt="">

转base64
let res = await this.getBase64Image('https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics4.baidu.com%2Ffeed%2F7e3e6709c93d70cf827fb2fda054500cb8a12bc9.jpeg%40f_auto%3Ftoken%3Dd97d3f0fd06e680e592584f8c7a24ac8&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1690045200&t=e1a88c44b1b9907677400a079766e0bf')
this.aaa = res

getBase64Image(src) {
      return new Promise(resolve => {
        const img = new Image()
        img.crossOrigin = ''
        img.src = src
        img.onload = function() {
          const canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          const ctx = canvas.getContext('2d')
          ctx && ctx.drawImage(img, 0, 0, img.width, img.height)
          const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
          const dataURL = canvas.toDataURL('image/' + ext)
          resolve(dataURL)
        }
      })
    },

导出

相关推荐
开开心心就好3 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
念九_ysl7 小时前
Java 使用 OpenHTMLToPDF + Batik 将含 SVG 遮罩的 HTML 转为 PDF 的完整实践
java·开发语言·pdf
一头生产的驴16 小时前
java整合itext pdf实现自定义PDF文件格式导出
java·spring boot·pdf·itextpdf
开开心心就好2 天前
批量PDF转换工具,一键转换Word Excel
开发语言·前端·学习·pdf·电脑·word·excel
老家的回忆2 天前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
Vertira2 天前
pdf 合并 python实现(已解决)
前端·python·pdf
十一0829932 天前
【PDF-XSS攻击】springboot项目-上传文件-解决PDF文件XSS攻击
spring boot·pdf·xss
qq_393828222 天前
PDF的图片文字识别工具
windows·pdf·电脑·软件需求·图片处理
wsxqaz3 天前
浏览器原生控件上传PDF导致hash值不同
算法·pdf·哈希算法
工业3D_大熊12 天前
3D模式格式转换工具HOOPS Exchange如何将3D PDF转换为STEP格式?
3d·pdf·3d格式转换·3d模型格式转换·cad格式转换·cad数据格式转换·3d模型可视化