如何用原生JavaScript预览Word与Excel的Blob文件（无外部库及查看器）

可以实现，但只能依赖浏览器原生的Office文档预览能力，且存在兼容性限制。先纠正你之前的错误：不能把Blob的type设为application/pdf，必须使用对应文档的正确MIME类型，否则浏览器无法识别文件格式。

具体实现步骤 #

1. Word文档（.docx）预览 #

现代Chromium内核浏览器（Chrome、Edge）原生支持直接预览docx格式，只需为Blob设置正确的MIME类型，再通过URL.createObjectURL生成预览链接，用iframe加载即可：

// 假设wordBlob是你已有的Word文档Blob对象
const correctWordBlob = new Blob([wordBlob], { 
  type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' 
});
const previewUrl = URL.createObjectURL(correctWordBlob);

// 创建iframe用于预览
const iframe = document.createElement('iframe');
iframe.src = previewUrl;
iframe.style.width = '100%';
iframe.style.height = '600px';
document.body.appendChild(iframe);

// 页面卸载或不需要预览时，记得释放URL资源
// URL.revokeObjectURL(previewUrl);

2. Excel文档（.xlsx）预览 #

Chrome、Edge同样支持原生预览xlsx，但Firefox、Safari的支持度较差。实现逻辑和Word一致，仅需更换对应的MIME类型：

// 假设excelBlob是你已有的Excel文档Blob对象
const correctExcelBlob = new Blob([excelBlob], { 
  type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
});
const previewUrl = URL.createObjectURL(correctExcelBlob);

// 创建iframe加载预览
const iframe = document.createElement('iframe');
iframe.src = previewUrl;
iframe.style.width = '100%';
iframe.style.height = '600px';
document.body.appendChild(iframe);

// 释放URL资源
// URL.revokeObjectURL(previewUrl);

注意事项 #

• 兼容性：仅Chromium内核浏览器能稳定预览，Firefox和Safari可能无法正常显示文档内容。
• 格式还原：复杂样式、宏、嵌入图片等内容，原生预览可能无法完全还原原文档格式。
• 资源释放：生成的预览URL会占用浏览器内存，不需要时务必调用URL.revokeObjectURL释放资源。

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