使用html2pdf导出HTML报表至PDF时图片缺失问题求助

我在Web应用中使用html2pdf工具将HTML报表导出为PDF文件，导出后其他数据显示正常，但报表中的logo图片缺失，请问有什么解决办法？

视图代码 #

<div class="row" align="center" id="divToExport">
  <table style="width:100%" class="table-responsive">
    <tbody>
      <tr>
        <td colspan="2" align="center" class="auto-style1"></td>
      </tr>
      <tr align="right">
        <td colspan="2" align="RIGHT">
          <span id="DatetimeLBL" style="color:Black;font-size:12px;font-weight:normal;">@DateTime.Now</span>
        </td>
      </tr>
      <tr align="center">
        <td colspan="2" align="center">
          <img src="https://i.imgur.com/mPF8.png" width="150" align="center">
        </td>
      </tr>
      <tr align="center">
        <td colspan="2">
          <br>
        </td>
      </tr>
      <tr align="right">
        <td class="auto-style2"> Data di Nascita: &nbsp; </td>
        <td align="left" class="auto-style2">
          <span id="DOBLBL2" style="color:Black;">@Model.First().Date_Of_Birth_Fixed</span>
        </td>
      </tr>
      <tr align="right">
        <td> Nazionalità: &nbsp; </td>
        <td align="left">
          <span id="NationalityLBL2" style="color:Black;">@Model.First().Birth_Country</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript代码 #

function downloadItalyDoc() {
    var element = document.getElementById('divToExport');
    var opt = {
        margin: 0.1,
        filename: 'File.pdf',
        image: { type: 'jpeg', quality: 2 },
        html2canvas: { scale: 3, logging: true },
        jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
    };
    // 原代码缺少导出执行语句，需补充
    html2pdf().set(opt).from(element).save();
}

解决办法 #

• 检查图片链接有效性：先确认https://i.imgur.com/mPF8.png能正常打开，若链接失效，更换为可用的图片地址。
• 处理跨域问题：html2canvas默认无法处理跨域图片，需在配置中添加跨域支持：
  修改html2canvas配置项，添加useCORS: true和allowTaint: true：

  html2canvas: { scale: 3, logging: true, useCORS: true, allowTaint: true }
  

• 确保图片加载完成再导出：如果图片加载较慢，导出时可能还未渲染完成，可通过预加载图片解决：

  function downloadItalyDoc() {
      var img = document.querySelector('#divToExport img');
      // 等待图片加载完成
      img.onload = function() {
          var element = document.getElementById('divToExport');
          var opt = {
              margin: 0.1,
              filename: 'File.pdf',
              image: { type: 'jpeg', quality: 0.95 }, // quality有效值为0-1，原2值不符合要求
              html2canvas: { scale: 3, logging: true, useCORS: true, allowTaint: true },
              jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
          };
          html2pdf().set(opt).from(element).save();
      };
      // 若图片已加载完成，直接触发导出
      if (img.complete) img.onload();
  }
  

• 修正图片质量配置：原配置中image.quality: 2超出有效值范围（0-1），改为0.95这类合理值，避免图片处理失败。
• 改用本地图片：将logo图片放到自身服务器，使用相对路径（如/images/logo.png），彻底规避跨域问题。

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