HTML导出Word文档时图片无法正常显示的解决求助

将HTML内容导出为Word文档时，除图片外其余格式均正常，但图片无法显示。图片来源分为base64格式和外部URL链接两种，现有导出代码无法解决该问题。

问题根源 #

原代码中图片的加载与转base64操作是异步执行的，但生成Word的Blob和触发下载是同步执行的——这意味着还没等图片处理完成，HTML内容就已经被打包成Blob了，最终导出的Word里还是原图片路径，自然无法正常显示。

修复方案 #

将图片处理逻辑改为异步，等待所有图片完成转码后再生成并下载Word文档：

• 将exportToWord改为异步函数，用Promise包裹每个图片的处理流程
• 等待所有图片处理完成后，再拼接HTML、生成Blob并触发下载
• 优化base64图片的处理逻辑：无需重复转码，直接复用原base64内容即可

修改后的完整代码 #

async exportToWord(element, filename = '', removeElement) {
  const body = document.getElementById(element);
  const clone = body.cloneNode(true);
  const removeChildElements = clone.querySelectorAll(removeElement);
  removeChildElements.forEach((el) => el.remove());

  const css =
    'table{border-collapse:collapse} th{border:1px gray solid;width:7em;padding:2px;} td{border:1px gray solid;width:7em;padding:2px;}';
  const header = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="utf-8"><title>Export HTML to Word Document</title><style>
    ${css}
    </style></head><body>`;
  const footer = '</body></html>';
  const images = clone.querySelectorAll('img');

  // 处理所有图片的异步任务集合
  const imagePromises = Array.from(images).map(img => {
    return new Promise((resolve) => {
      const src = img.getAttribute('src');
      if (src.startsWith('data:image')) {
        // base64图片直接复用，无需转码
        resolve();
      } else if (src.startsWith('http') || src.startsWith('//')) {
        const image = new Image();
        image.crossOrigin = 'Anonymous';
        image.addEventListener('load', () => {
          const canvas = document.createElement('canvas');
          const context = canvas.getContext('2d');
          canvas.width = image.width;
          canvas.height = image.height;
          context.drawImage(image, 0, 0);
          const dataUrl = canvas.toDataURL('image/png');
          img.src = dataUrl;
          resolve();
        });
        // 加载失败时直接resolve，避免阻塞流程
        image.addEventListener('error', () => resolve());
        const originalSrc = new URL(src, document.location).href;
        image.src = originalSrc;
      } else {
        // 其他类型图片直接resolve
        resolve();
      }
    });
  });

  // 等待所有图片处理完成
  await Promise.all(imagePromises);

  const html = header + clone.innerHTML + footer;

  const blob = new Blob(['', html], {
    type: 'application/msword',
  });

  filename = filename ? `${filename}.doc` : 'document.doc';

  const tempAnchor = document.createElement('a');
  tempAnchor.href = URL.createObjectURL(blob);
  tempAnchor.download = filename;
  tempAnchor.click();
  URL.revokeObjectURL(tempAnchor.href);
},

额外说明 #

• 对于外部URL图片：若图片所在服务器不支持CORS（未配置Access-Control-Allow-Origin响应头），则无法通过canvas转base64，此时可以考虑后端代理图片或提前将图片转为base64再渲染到页面
• 导出的.doc本质是HTML包裹的文档，若需要更规范的Word格式（如.docx），可以考虑使用专门的库来处理

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