可在HTML5页面中显示Word文档内容的四种方法：一、用iframe嵌入Office Online Viewer；二、用object标签声明MIME类型（兼容性差）；三、服务端转HTML后注入；四、集成OnlyOffice等Web编辑器。
如果您希望在HTML5页面中显示Word文档内容，直接嵌入.doc或.docx文件存在兼容性限制。浏览器原生不支持直接解析Word二进制格式，需借助转换、服务端处理或第三方组件实现可视化。以下是几种可行的技术路径：
一、使用iframe嵌入Office Online Viewer
Microsoft Office Online提供免费的文档在线查看服务，无需服务器端转换，仅需将Word文档上传至公开可访问的URL（如OneDrive、SharePoint或支持CORS的HTTPS托管地址），再通过iframe加载其预览页。
1、将Word文档（.docx）上传至OneDrive，并设置分享权限为“任何人可查看”。
2、复制OneDrive生成的共享链接，形如：https://onedrive.live.com/view?resid=XXXXX
立即学习“前端免费学习笔记（深入）”；
3、提取其中的resid和authkey参数，构造Office Online Viewer URL：https://view.officeapps.live.com/op/embed.aspx?src=YOUR_ENCODED_URL
4、对原始文档URL进行URL编码（例如使用JavaScript encodeURI()或在线工具），替换YOUR_ENCODED_URL部分。
5、在HTML中插入iframe标签，设置宽高并启用sandbox属性以保障安全：
二、使用object标签配合MIME类型声明（有限支持）
object标签理论上可通过type属性指定application/vnd.openxmlformats-officedocument.wordprocessingml.document声明Word文档类型，但实际中绝大多数现代浏览器已禁用对本地Office MIME类型的内置处理，仅在安装了Microsoft Office且启用ActiveX/插件的旧版IE中可能生效，不推荐用于通用场景。
1、确保Word文档位于同源HTTP/HTTPS服务器路径下，例如./docs/report.docx。
2、编写object标签，显式声明type与data属性：
3、在内部嵌套备用提示文本或下载链接，作为降级方案。
三、服务端转换为HTML后嵌入
通过后端服务（如Python的python-docx + BeautifulSoup、Node.js的mammoth、Java的Apache POI）将.docx解析为语义化HTML片段，再注入到页面中。该方式完全可控，支持样式还原与自定义渲染，但需部署服务端逻辑且无法实时编辑。
1、将Word文档上传至应用后端接口，例如POST /api/convert/docx-to-html。
2、后端调用mammoth.convertToHtml({ path: uploadedFilePath })解析文档结构。
3、返回标准化HTML字符串，不含script、style等危险标签，仅保留p、h1–h6、ul、ol、table等安全元素。
4、前端接收响应后，使用innerHTML或DOMParser插入到指定容器：document.getElementById('word-container').innerHTML = response.html;
四、集成Web版富文本编辑器（如OnlyOffice或Collabora Online）
OnlyOffice和Collabora提供可嵌入的Web组件，支持在线打开、编辑、保存.docx文件，依赖独立部署的服务实例或SaaS API密钥，适合需要协作功能的场景。
1、注册OnlyOffice Developer Portal获取免费开发密钥，并部署Document Server或使用cloud.onlyoffice.com。
2、引入onlyoffice-embedded-script.min.js脚本文件。
3、初始化Editor实例，传入配置对象，其中document.fileType必须设为"docx"，document.url指向可跨域访问的Word文档绝对路径。
4、确保响应头包含Access-Control-Allow-Origin: *，否则加载失败。
