使用html2pdf.js导出PDF时添加img标签后下载无法触发问题求解

html2pdf执行导出时会依赖页面所有资源加载完成，原有代码在DOM解析完成后就立即触发导出，此时img标签对应的图片资源还在异步加载中，会导致html2pdf内部执行中断，无法触发下载流程。

• 调整导出触发时机，等待页面所有资源加载完成后再执行导出，将导出逻辑包裹在window.onload回调中即可。
• 配置html2pdf导出参数，适配图片加载场景：可设置imageTimeout延长图片加载超时时间，若存在跨域图片可开启useCORS: true配置，同时添加异常捕获逻辑便于定位问题。
• 若图片存在路径解析异常或跨域限制，可直接将图片转为base64编码写入img的src属性，规避路径和跨域问题，兼容性最高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="cstm">
    <h2>Hello world</h2>
    <img src="img/user.jpeg" alt="">
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script type="text/javascript">
window.onload = function() {
  const element = document.getElementById("cstm");
  const exportOptions = {
    margin: 10,
    filename: 'export.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { 
      scale: 2,
      useCORS: true,
      logging: false,
      imageTimeout: 15000
    },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
  };
  html2pdf().set(exportOptions).from(element).save().catch(err => {
    console.error('导出异常:', err);
  });
}
</script>
</body>
</html>

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