使用HTML object标签嵌入Office文件失败求助

原因 #

1. 浏览器原生无Office格式渲染能力：PDF、图片、TXT属于浏览器内置支持解析的格式，但doc/docx/xls/xlsx这类Office文件，浏览器没有原生渲染引擎，无法直接通过object标签解析显示。
2. MIME类型配置错误：你列出的类型存在混淆，比如把docx的MIME类型写成了xlsx的（application/vnd.openxmlformats-officedocument.spreadsheetml.sheet是xlsx的），正确的docx类型应为application/vnd.openxmlformats-officedocument.wordprocessingml.document，但即使MIME类型正确，浏览器依然无法渲染。
3. 插件支持已淘汰：早年浏览器依赖第三方插件（如ActiveX）渲染Office文件，但目前主流浏览器已全面移除这类插件支持，object标签失去了对应的解析载体。

解决办法 #

1. 用Office在线渲染服务嵌入（iframe替代object） #

借助微软的Office在线渲染能力，通过iframe直接在页面嵌入Office文件，示例代码如下：

• 嵌入docx：

<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=你的文件公开HTTPS地址" width="100%" height="600px" frameborder="0"></iframe>

• 嵌入xlsx：

<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=你的文件公开HTTPS地址" width="100%" height="600px" frameborder="0"></iframe>

注意：文件需为公开可访问的HTTPS链接，本地文件无法使用该方式。

2. 转换为PDF后嵌入 #

将Office文件转换为PDF格式，再用object标签嵌入，PDF的跨浏览器渲染支持更稳定，示例代码和你之前用的PDF嵌入一致：

<object data="../assets/转换后的文件.pdf" type="application/pdf">
    <div>No PDF viewer available</div>
</object>

3. 前端库解析渲染 #

针对简单的Office文件，可使用开源前端库解析内容并转为HTML渲染：

• docx文件：用mammoth.js将docx内容转为HTML后插入页面
• xlsx文件：用SheetJS解析表格数据，生成HTML表格
  示例（SheetJS解析xlsx）：

<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
<input type="file" id="fileInput" />
<div id="tableContainer"></div>
<script>
document.getElementById('fileInput').addEventListener('change', e => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = event => {
    const data = new Uint8Array(event.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
    const worksheet = workbook.Sheets[workbook.SheetNames[0]];
    document.getElementById('tableContainer').innerHTML = XLSX.utils.sheet_to_html(worksheet);
  };
  reader.readAsArrayBuffer(file);
});
</script>

4. 提供下载降级方案 #

如果以上方式都不适用，在object标签的备用区域添加下载链接，让用户自行下载查看：

<object data="../assets/你的文件.docx" type="application/vnd.openxmlformats-officedocument.wordprocessingml.document">
  <div>无法预览文件，请 <a href="../assets/你的文件.docx" download>点击下载</a> 后查看</div>
</object>

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