JSPDF无法加载在线图片求助：Web应用转PDF时在线图片显示空白

我之前也碰到过一模一样的问题！jspdf直接转HTML时在线图片空白，核心原因其实是浏览器的同源策略限制，以及jspdf在渲染时可能还没等在线图片加载完成就生成了PDF。下面给你几个实用的解决方案，亲测有效：

这是最靠谱的方法，因为Base64格式的图片是内嵌在HTML里的，jspdf能直接识别，不需要额外请求。你可以写一个工具函数，把所有在线图片转成Base64，替换原img标签的src，再调用jspdf生成PDF：

// 把在线图片转成Base64的函数
async function convertImageToBase64(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 处理跨域，前提是图片服务器支持CORS
    img.crossOrigin = 'anonymous';
    img.onload = function() {
      const canvas = document.createElement('canvas');
      canvas.width = this.naturalWidth;
      canvas.height = this.naturalHeight;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(this, 0, 0);
      // 转成Base64格式
      resolve(canvas.toDataURL('image/png'));
    };
    img.onerror = reject;
    img.src = url;
  });
}

// 处理所有在线图片，再生成PDF
async function generatePDF() {
  // 获取所有带在线链接的img标签
  const onlineImgs = document.querySelectorAll('img[src^="http"]');
  
  // 逐个转换为Base64
  for (const img of onlineImgs) {
    try {
      const base64Url = await convertImageToBase64(img.src);
      img.src = base64Url;
    } catch (err) {
      console.error('图片转换失败:', err);
    }
  }

  // 现在调用jspdf生成PDF
  const doc = new jsPDF();
  await doc.html(document.body, {
    callback: function(pdf) {
      pdf.save('document.pdf');
    },
    // 可选：设置缩放等参数适配页面
    x: 10,
    y: 10,
    width: 190 // 适配A4纸宽度
  });
}

⚠️ 注意：如果图片所在服务器不支持CORS，这个方法会失败。这时你可以让后端帮忙中转——后端请求目标图片，再把图片转成Base64返回给前端，绕开浏览器的同源限制。

如果不想转Base64，也可以等所有在线图片都加载完成后再调用jspdf的html()方法。用Promise.all来监听所有图片的加载状态：

function waitForImagesLoad() {
  const imgElements = document.querySelectorAll('img[src^="http"]');
  const loadPromises = Array.from(imgElements).map(img => {
    if (img.complete) return Promise.resolve();
    return new Promise((resolve, reject) => {
      img.onload = resolve;
      img.onerror = reject;
    });
  });
  return Promise.all(loadPromises);
}

async function generatePDF() {
  try {
    await waitForImagesLoad(); // 等所有在线图片加载完成
    const doc = new jsPDF();
    doc.html(document.body, {
      callback: pdf => pdf.save('document.pdf')
    });
  } catch (err) {
    console.error('图片加载失败:', err);
  }
}

不过这个方法有隐患：如果图片加载超时/失败，PDF里还是会空白；而且跨域图片即使加载完成，也可能因为浏览器的画布污染问题，导致jspdf无法读取图片数据，所以还是转Base64更稳妥。

前端层面可以把在线图片转成Blob对象，再用URL.createObjectURL()生成本地临时URL，替换img的src，效果和Base64类似，但Blob体积更小：

async function convertImageToBlobUrl(url) {
  const response = await fetch(url, { mode: 'cors' });
  const blob = await response.blob();
  return URL.createObjectURL(blob);
}

这个临时URL在页面关闭后会失效，同样受CORS限制。如果是后端层面的临时存储，就是让后端把图片下载到服务器本地再返回给前端，但会增加服务器负担，非必要不推荐。

内容的提问来源于stack exchange，提问作者panagulis72