使用html2canvas与jsPDF导出PDF时SVG图片丢失问题排查

你遇到的SVG导出丢失问题，本质是html2canvas对SVG的渲染支持有限，尤其是动态加载或带有复杂样式的SVG标记。下面给你几个可行的解决方案：

方案一：补充html2canvas关键配置 #

修改你的导出配置，添加两个针对SVG渲染的参数，同时删掉代码里不必要的getContext重写（这段代码可能干扰正常渲染）：

document.getElementById("download").addEventListener("click", () => {
  const mapDownload = document.getElementById("mapDownload");
  var opt = {
    margin: 1,
    filename: 'myfile.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { 
      scale: 2, 
      useCORS: true, 
      allowTaint: true, // 允许渲染跨域/受污染的资源
      foreignObjectRendering: true // 启用ForeignObject模式渲染SVG，提升兼容性
    },
    jsPDF: { unit: 'in', format: 'letter', orientation: 'landscape' }
  };
  html2pdf().from(mapDownload).set(opt).save();
})

方案二：手动将SVG转为Canvas再导出 #

如果方案一无效，说明你的SVG结构较复杂，html2canvas无法直接解析。可以提前把SVG转换成Canvas元素，再进行导出：

先定义SVG转Canvas的工具函数：

function svgToCanvas(svgElement) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const svgData = new XMLSerializer().serializeToString(svgElement);
  const img = new Image();
  
  // 处理跨域资源
  img.crossOrigin = 'anonymous';
  
  img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    // 用Canvas替换原SVG元素
    svgElement.parentNode.replaceChild(canvas, svgElement);
  };
  
  img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgData);
}

然后在导出前调用函数处理所有SVG：

document.getElementById("download").addEventListener("click", () => {
  // 批量转换目标容器内的所有SVG
  document.querySelectorAll('#mapDownload svg').forEach(svgToCanvas);
  
  const mapDownload = document.getElementById("mapDownload");
  var opt = {
    margin: 1,
    filename: 'myfile.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { scale: 2, useCORS: true },
    jsPDF: { unit: 'in', format: 'letter', orientation: 'landscape' }
  };
  html2pdf().from(mapDownload).set(opt).save();
})

额外注意事项 #

• 确保SVG元素没有被设置display: none或被其他元素遮挡
• 检查SVG的viewBox属性是否正确，避免渲染时尺寸异常
• 如果SVG引用了外部字体或图片，要确保这些资源能被正常访问（比如配置CORS）

内容的提问来源于stack exchange，提问作者Kabir Ul Althamash