html2pdf 無法導出 html 中 img 圖片的解決方法

html2pdf 是基於 html2canvas 和 jsPDF 開發的將 html 頁面導出成 pdf 文件的插件，通過配置 opt 相關選項，可以自定義導出的選項，最近在使用 html2pdf 的時候，發現頁面中的 img 圖片導出的圖案是空白的，查閱了相應的 issue 發現可以通過相關配置解決這個問題，這里做下記錄。

【問題重現】

需要導出成pdf的的頁面部分如下：

頁面中的頭像對應的標簽如下：

<img src="http://wx.qlogo.cn/mmopen/ajNVdqHZLLAicEC4g8RH23v6aNPjUd5dbh0NYk2MM2Umf5nZSnYw7oK1AANaZruTG1GRlpv541AjLX4skqyvRjPtwUTFhJiasmszksdPtPGc0/64" />

 導出頁面成pdf，查看效果如下：

發現頁面中的頭像圖片沒有導出成功，同樣是標簽，為什么圖片沒法導出呢，查閱插件相關的issue (Does it support img <img src=''/> in html ? #52)，

發現原來是跨域問題，插件基於安全問題的考慮，默認禁止導出的html 中包含引用外鏈的img，並給出了對應的解決方案，如下：

html2canvas 的配置項 options 中提供了兩個字段，useCORS 和 proxy，因為 html2pdf 是基於 html2canvas 開發的，

所以在其配置項中包含了 html2canvas 字段，在這個字段中可以配置 html2canvas 的相關選項，如下：

const opt = {
   　　filename: 'myReport.pdf',
      image: { type: 'jpeg', quality: 0.95 },
      pagebreak: { mode: ['avoid-all', 'css', 'legacy'] },
      html2canvas: {
          scale: 2,
          useCORS: true,
      },
      jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
};

 修改完成后再次導出，查看效果，發現引用外鏈的圖片已經可以正常導出了，如下：