使用JavaScript（kendo库）将HTML导出为PDF时图片无法正常显示问题

云上老周

2026-10-7

导出PDF图片缺失的核心原因

跨域资源限制：Kendo PDF导出功能默认无法处理跨域图片，你代码中引用的外部域名图片如果未配置CORS允许当前域名访问，导出时会直接被拦截。
图片未完成加载就触发导出：点击导出按钮时如果图片还未加载完毕，drawDOM方法会直接跳过未完成加载的资源。
组件写法不匹配：代码中的<kendo-pdf-export>是Kendo UI for Angular的专属组件写法，如果你使用的是纯jQuery版Kendo，该标签不会被识别，内部的图片自然不会被纳入导出范围。
动态路径未生效：代码里{{url + '.jpg'}}是模板变量，导出前如果变量未被替换为真实有效的图片地址，也会导致图片加载失败。

解决方法

优先处理跨域问题：最稳妥的方案是把所有需要导出的图片转成base64编码，直接嵌入img的src属性，完全规避跨域限制。如果不方便转base64，就给图片所在的服务器配置CORS规则，允许当前页面域名访问图片资源。
调整导出逻辑，等待所有图片加载完成后再执行导出，修改getPDF函数代码如下：

function getPDF(selector) {
  const allImgs = $(selector).find('img');
  let loadedCount = 0;
  const totalImgs = allImgs.length;

  allImgs.each(function() {
    if (this.complete) {
      loadedCount++;
      checkAllLoaded();
    } else {
      $(this).on('load error', function() {
        loadedCount++;
        checkAllLoaded();
      });
    }
  });

  function checkAllLoaded() {
    if (loadedCount === totalImgs) {
      kendo.drawing.drawDOM($(selector)).then(function(group){
        kendo.drawing.pdf.saveAs(group, "Invoice.pdf");
      });
    }
  }
}