React中如何展示API返回的Base64格式docx文件？

有两种可靠的实现方式，分别适用于不同场景：

方法一：解析为HTML渲染（兼容性更好） #

通过将Base64字符串转为Blob，再用文档解析库（如mammoth.js）将DOCX内容转换为HTML，直接插入页面容器展示。这种方式不依赖浏览器原生预览能力，兼容性更强。

实现步骤与代码： #

1. 把Base64字符串转换为Blob对象（注意去掉Base64前缀，比如data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,）
2. 使用mammoth.js解析Blob并生成HTML
3. 将HTML插入页面指定容器

// 处理Base64字符串
const base64Str = '替换为你的Base64内容';
const byteCharacters = atob(base64Str);
const byteArray = new Uint8Array([...byteCharacters].map(char => char.charCodeAt(0)));
const docxBlob = new Blob([byteArray], { 
  type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' 
});

// 解析并渲染
mammoth.convertToHtml({ blob: docxBlob })
  .then(result => {
    // 将生成的HTML插入页面容器
    document.getElementById('docx-preview').innerHTML = result.value;
    // 可选：处理解析过程中的警告
    result.messages.forEach(msg => console.warn(msg));
  })
  .catch(err => console.error('DOCX解析失败:', err));

注意：需要引入mammoth.js库，可以通过npm安装mammoth包，或者下载本地脚本引入项目。

方法二：利用浏览器原生预览（更简便） #

将Base64转为Blob后创建Object URL，通过iframe加载这个URL，借助Chrome、Edge等浏览器的原生DOCX预览能力展示。这种方式代码更简洁，但依赖浏览器支持。

实现步骤与代码： #

const base64Str = '替换为你的Base64内容';
const byteCharacters = atob(base64Str);
const byteArray = new Uint8Array([...byteCharacters].map(char => char.charCodeAt(0)));
const docxBlob = new Blob([byteArray], { 
  type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' 
});

// 创建Object URL
const previewUrl = URL.createObjectURL(docxBlob);

// 创建iframe并添加到页面
const iframe = document.createElement('iframe');
iframe.src = previewUrl;
iframe.style.width = '100%';
iframe.style.height = '800px';
document.body.appendChild(iframe);

// 页面卸载时释放URL，避免内存泄漏
window.addEventListener('beforeunload', () => {
  URL.revokeObjectURL(previewUrl);
});

说明：Firefox等部分浏览器可能需要额外插件才能支持DOCX预览，这种场景下优先选择方法一。

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