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

导出

相关推荐
SEO-狼术6 小时前
Find Text Fast in Any PDF Document
pdf
南风微微吹1 天前
【四级】全国大学英语四级历年真题及答案解析PDF电子版(2015-2025年6月)
pdf·英语四级
starxg1 天前
bkhtmltopdf - 高性能 HTML 转 PDF 工具(代替 wkhtmltopdf)
java·pdf·html·wkhtmltopdf·htmltopdf
SoberChina1 天前
Jasperreport 导出word 多个element重叠部分导致不显示(不支持)
pdf·word·jaspersoft·模版打印
reasonsummer1 天前
【办公类-115-05】20250920职称资料上传04——PDF和PDF合并PDF、图片和PDF合并PDF(十三五PDF+十四五图片)
java·python·pdf
龙仔CLL1 天前
使用vue-pdf做本地预览pdf文件,通过垂直滚动条展示全部pdf内容,不展示分页按钮
前端·vue.js·pdf
缺点内向1 天前
Java:将 Word 文档转换为密码保护的 PDF 文件
java·pdf·word
龙仔CLL1 天前
vue3下载图片,pdf,excle,word通用函数
pdf·vue·word
小周同学:2 天前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
archko2 天前
android pdf框架-15,mupdf工具与其它
android·pdf