AngularJS中使用html2canvas与pdfmake导出PDF时图片不显示问题

我之前也碰到过一模一样的情况——导出的PDF里只有表格和文本，图片完全消失，哪怕canvas的base64看起来正常。结合我的排查经验，主要是这几个问题导致的，咱们逐个解决：

1. 处理图片跨域限制 #

html2canvas默认会拦截跨域加载的图片，这是最常见的原因。你需要在html2canvas的配置里开启跨域支持：

html2canvas(angular.element("#pdfFileToExport"), {
  useCORS: true, // 允许加载跨域图片
  logging: true, // 开启日志，方便查看是否有图片加载报错
  allowTaint: false // 保持默认false，避免画布被污染导致后续问题
}).then(function(canvas) {
  // 后续pdfmake逻辑
});

注意：如果你的图片是从第三方域名加载，服务器还需要配置Access-Control-Allow-Origin响应头，否则useCORS也会失效。

2. 确保图片完全加载后再渲染 #

如果html2canvas执行时，页面里的图片还没加载完成，就会出现“渲染时图片不存在”的情况。可以写个工具函数等待所有图片加载完毕：

function waitForAllImages(element) {
  const images = element.find("img");
  const loadPromises = [];

  images.each(function() {
    const img = this;
    // 如果图片还没加载完成，添加等待Promise
    if (!img.complete || img.naturalWidth === 0) {
      loadPromises.push(new Promise((resolve) => {
        img.onload = resolve;
        img.onerror = resolve; // 加载失败也继续执行，避免卡住
      }));
    }
  });

  return Promise.all(loadPromises);
}

然后在AngularJS的控制器里这样调用：

// 先获取要导出的元素
const exportElement = angular.element("#pdfFileToExport");

// 等待所有图片加载完成后再渲染canvas
waitForAllImages(exportElement).then(() => {
  html2canvas(exportElement, { useCORS: true }).then(canvas => {
    const dataUrl = canvas.toDataURL("image/png");
    const docDefinition = {
      content: [{
        image: dataUrl,
        width: 500
      }]
    };
    pdfMake.createPdf(docDefinition).open();
  });
});

3. 检查容器的渲染范围 #

有时候图片所在的容器设置了overflow: hidden、position: absolute或者固定高度，导致html2canvas只能渲染可见部分，图片被裁剪掉了。你可以临时给#pdfFileToExport添加样式：

#pdfFileToExport {
  overflow: visible !important;
  height: auto !important;
}

渲染完成后再恢复原来的样式即可。

4. 替换jQuery选择器为Angular原生方法 #

在AngularJS里直接用jQuery的$("#pdfFileToExport")可能会和Angular的DOM处理机制冲突，建议改用Angular的angular.element来获取元素，避免不必要的问题。

按照这几步调整后，你应该能看到图片正常出现在导出的PDF里了。

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