目录

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)
        }
      })
    },

导出

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
DreamNotOver2 小时前
自动提取pdf公式 ➕ 输出 LaTeX
python·pdf·gui·提取公式
专注写bug2 小时前
Java——pdf增加水印
java·pdf
hello_simon4 小时前
超强大小白工具,应用广泛,PDF 删除,无需下载,在线使用,操作超简单,超实用
前端·pdf
chenchihwen4 小时前
Python合并多个pdf
开发语言·python·pdf
禾日木目心4 小时前
为什么PDF文件更适合LLM大模型信息提取?
pdf·llm·dify·文档提取器
兰琛5 小时前
Android免费实现excel文件(简单)转为PDF文件
android·pdf·excel
inxunoffice7 小时前
批量将 SVG 转换为 jpg/png/Word/PDF/ppt 等其它格式
pdf·word·powerpoint
hello_simon9 小时前
小白工具PDF合并,支持自定义排序,快速上传和高质量输出,操作简单,无需安装,你的得力助手
pdf·word·powerpoint·excel·pdf转html
MartinRY11 小时前
SpringBoot将HTML转化成PDF文件
spring boot·pdf·html
hello_simon14 小时前
超便捷超实用的文档处理工具,PDF排序,功能强大,应用广泛,无需下载,在线使用,简单易用快捷!
pdf·excel·pdf转html·excel转pdf格式