在Internet Explorer中使用html2pdf转换含SVG内容的页面问题求助

我明白你遇到的问题——用eKoopmans的html2pdf工具生成带SVG的PDF时，IE浏览器里SVG没法正常显示。这主要是因为IE对SVG的支持有限，而且html2pdf依赖的底层库在IE下处理SVG的兼容性不好。下面是经过验证的解决办法：

核心思路 #

把SVG转换成IE能处理的图片格式（比如PNG），再替换原SVG元素，之后再用html2pdf生成PDF。这样就能绕过IE对SVG的渲染限制。

具体步骤及代码示例 #

• 引入兼容IE的SVG转Canvas工具
  可以使用canvg库的兼容版本，它能把SVG内容渲染到Canvas上，IE11及以上都支持。

• 编写转换函数
  针对你提供的HTML结构，下面的代码会把目标元素里的SVG转换成Canvas，再替换成Base64图片：

  // 转换SVG为图片的函数
  function convertSvgToImage(elementId) {
    const container = document.getElementById(elementId);
    const svgs = container.querySelectorAll('svg');
    
    svgs.forEach(svg => {
      // 创建Canvas元素，匹配SVG的尺寸
      const canvas = document.createElement('canvas');
      canvas.width = svg.getAttribute('width');
      canvas.height = svg.getAttribute('height');
      
      // 使用canvg将SVG渲染到Canvas
      canvg(canvas, svg.outerHTML);
      
      // 把Canvas转换成Base64格式的PNG图片
      const img = document.createElement('img');
      img.src = canvas.toDataURL('image/png');
      img.style.width = svg.style.width || svg.getAttribute('width');
      img.style.height = svg.style.height || svg.getAttribute('height');
      
      // 用图片替换原SVG元素
      svg.parentNode.replaceChild(img, svg);
    });
  }
  

• 调整html2pdf的调用逻辑
  在调用html2pdf生成PDF之前，先执行转换函数，确保SVG已经被替换成IE能识别的图片：

  // 先完成SVG到图片的转换
  convertSvgToImage('element-to-print');
  
  // 再调用html2pdf生成PDF
  const element = document.getElementById('element-to-print');
  html2pdf(element, {
    // 这里可以添加你的html2pdf配置项，比如页面尺寸、边距等
  });
  

你的原始HTML结构如下：

<div id="element-to-print">
SVG won't work on internet explorer, only google chrome
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</div>

额外注意事项 #

• 如果你不想修改页面上的原始SVG，可以先克隆目标元素，在克隆的元素上执行转换操作，再用克隆元素生成PDF，这样原页面的SVG仍能正常显示。
• 确保使用的canvg版本是兼容IE的，避免使用只支持现代浏览器的新版本。

这样处理后，IE浏览器里生成的PDF就能正常显示原来的SVG内容了。

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