使用jspdf和html2canvas从图片生成PDF失败：生成空白PDF求助

我帮你分析下用html2canvas + jsPDF生成空白PDF的常见问题和解决办法，这些都是我处理这类问题时踩过的坑：

1. 最常见的问题：没有等待html2canvas异步完成 #

html2canvas是异步操作，它返回一个Promise。如果没等它完成就去生成PDF，此时canvas还没渲染出图片，自然得到空白文件。

正确的异步处理方式（推荐用async/await） #

async function generatePDF() {
  // 替换成你的图片容器ID
  const targetElement = document.getElementById('image-container');
  
  try {
    // 等待html2canvas完成截图，一定要加await！
    const canvas = await html2canvas(targetElement, {
      useCORS: true, // 处理跨域图片必备
      scale: 2 // 提高缩放比例，避免PDF模糊
    });

    // 把canvas转成图片数据
    const imgData = canvas.toDataURL('image/png');
    // 初始化PDF，这里用A4纵向
    const pdf = new jsPDF('p', 'mm', 'a4');

    // 计算图片在PDF中的适配尺寸，避免超出页面
    const pdfPageWidth = pdf.internal.pageSize.getWidth();
    const pdfPageHeight = (canvas.height * pdfPageWidth) / canvas.width;

    // 将图片添加到PDF
    pdf.addImage(imgData, 'PNG', 0, 0, pdfPageWidth, pdfPageHeight);
    // 保存PDF
    pdf.save('image-to-pdf.pdf');
  } catch (err) {
    console.error('生成PDF出错:', err);
  }
}

// 调用函数
generatePDF();

2. 图片跨域限制导致canvas渲染失败 #

如果你的图片来自其他域名，浏览器的同源策略会阻止html2canvas渲染它，最终canvas是空白的。

解决办法： #

• 在html2canvas配置里加useCORS: true（上面代码已经包含）
• 确保图片所在的服务器配置了CORS允许你的域名访问（比如响应头加Access-Control-Allow-Origin: 你的域名）

3. 目标元素不可见或尺寸异常 #

如果你的图片容器是display: none、visibility: hidden，或者宽高为0，html2canvas无法正确渲染内容。

排查点： #

• 确保目标元素在页面上是可见的（可以临时给容器加个边框，确认它存在且有尺寸）
• 如果需要隐藏容器再生成PDF，可以用opacity: 0或者把容器移出视口（比如position: absolute; left: -9999px），不要用display: none

4. 直接处理图片元素的替代方案 #

如果你的场景是单张图片转PDF，也可以直接操作img元素，跳过容器渲染：

async function generatePDFFromSingleImage() {
  const img = document.getElementById('target-image');
  
  // 先确保图片完全加载完成
  if (!img.complete) {
    await new Promise(resolve => img.onload = resolve);
  }

  // 创建canvas并绘制图片
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);

  // 后续生成PDF的步骤和上面一致
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF('p', 'mm', 'a4');
  const pdfWidth = pdf.internal.pageSize.getWidth();
  const pdfHeight = (img.height * pdfWidth) / img.width;
  
  pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
  pdf.save('single-image.pdf');
}

快速排查步骤 #

1. 先console.log(canvas)，看看canvas的width和height是否正常，有没有像素数据
2. 在页面上临时把canvas添加到DOM里（document.body.appendChild(canvas)），确认canvas里有图片
3. 检查控制台有没有跨域或渲染错误的提示

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