在HTML5中通过iframe预览Word文档需借助第三方服务或转换工具，浏览器原生不支持.doc/.docx渲染；可行方法包括：一、Office Online嵌入；二、Google Docs Viewer临时转换；三、后端转HTML再嵌入；四、OnlyOffice/Collabora私有SDK；五、客户端docx-preview库解析。
如果您希望在HTML5页面中通过iframe嵌入Word文档进行在线预览，则需借助第三方服务或转换工具，因为浏览器原生不支持直接渲染.doc或.docx文件。以下是实现此目标的多种可行方法：
一、使用Microsoft Office Online嵌入
该方法依赖微软提供的Office Online服务，可将存储在OneDrive中的Word文档生成嵌入代码，通过iframe加载其在线查看界面。需确保文档已上传并设置为“任何人可查看”权限。
1、将Word文档上传至OneDrive，并右键选择“共享”→“获取链接”→设置为“任何人可查看（无编辑权限）”。
2、点击生成的链接右侧的“嵌入”选项，复制提供的代码。
立即学习“前端免费学习笔记（深入）”；
3、将代码粘贴至您的HTML5页面中，确保allow="clipboard-read; clipboard-write"属性存在以支持部分交互功能。
4、在标签中添加loading="lazy"和referrerpolicy="no-referrer"以优化加载与隐私控制。
二、使用Google Docs Viewer临时转换
Google Docs Viewer可接收公开可访问的Word文档URL，并在iframe中渲染为只读PDF样式视图。注意：该服务未提供官方公开API，且可能随时返回403或跳转至登录页。
1、将Word文档上传至公开可直链访问的服务器或GitHub Pages（需为HTTPS且允许跨域）。
2、构造嵌入URL格式：https://docs.google.com/gview?url=YOUR_DOC_URL&embedded=true，其中YOUR_DOC_URL必须为URL编码后的绝对地址。
3、创建iframe标签，设置width和height为具体像素值（如width="800" height="600"），避免使用百分比导致布局异常。
4、在iframe中添加sandbox="allow-scripts allow-same-origin"属性以满足Viewer运行所需权限。
三、后端转换为HTML再嵌入
该方法通过服务端将.docx解析为HTML片段，再由iframe加载本地生成的HTML文件，完全规避跨域与浏览器兼容性问题，适用于内网或对数据安全要求高的场景。
1、使用Python库python-docx或Node.js库mammoth在服务器端读取.docx文件内容。
2、调用转换接口将Word文档结构（含段落、列表、表格、内联图片）输出为语义化HTML字符串。
3、将生成的HTML保存为独立文件（如doc-output.html），存放于Web服务器静态资源目录下。
4、在前端iframe中通过相对路径引用该HTML文件，例如src="assets/docs/doc-output.html"。
5、确保响应头包含Content-Type: text/html; charset=utf-8且无X-Frame-Options: DENY限制。
四、使用专用文档预览SDK（如OnlyOffice或Collabora Online）
部署私有文档协作服务后，可通过其REST API获取文档加载令牌，并构造受控iframe嵌入地址，支持真实编辑与格式保留，但需自建服务环境。
1、在OnlyOffice Document Server或Collabora Online中完成安装与HTTPS配置，并验证/healthcheck接口返回200。
2、调用/coauthoring/CommandService.ashx或Collabora对应API，提交文档URL及用户信息，获取唯一token与fileId。
3、拼接嵌入URL：https://your-oo-server/Editor.aspx?filename=xxx.docx&user_id=uid&token=xxx。
4、将该URL设为iframe的src属性，并设置frameborder="0"与style="border: none;"以消除边框。
注意：所有请求必须携带有效JWT token，否则将被拒绝访问。
五、客户端JS库直接解析（仅限简单文档）
利用开源库docx-preview在浏览器中解析.docx二进制流并渲染为DOM节点，再注入到iframe的contentDocument中，无需后端参与，但不支持复杂样式与OLE对象。
1、通过获取用户本地Word文档的File对象。
2、使用fetch或FileReader读取文件为ArrayBuffer，传入docxPreview.renderAsync()方法。
3、创建空iframe元素，调用iframe.contentDocument.open()，写入基础HTML结构与重置规则。
4、将渲染生成的DOM节点追加至iframe.contentDocument.body中。
该方案不支持IE11及以下版本，且无法处理密码保护或加密文档。
