要在html5网页中嵌入office文档并支持在线查看与协作，可采用四种方法：一、使用office online嵌入代码；二、通过office javascript api集成；三、利用microsoft graph api动态生成嵌入链接；四、使用sharepoint嵌入web part。
如果您希望在HTML5网页中嵌入Office文档并支持在线查看与协作，则需借助Microsoft Office Online提供的嵌入服务。以下是实现此功能的多种方法：
一、使用Office Online嵌入代码
Microsoft为公开可访问的Office文档（如Word、Excel、PowerPoint）提供标准化的嵌入URL格式，通过iframe标签即可在HTML5页面中加载在线渲染视图。该方式无需用户登录即可查看，但编辑需授权。
1、确保目标Office文档已上传至OneDrive或SharePoint，并设置为“任何人可查看”或“任何人可编辑”的共享权限。
2、在OneDrive中打开该文档，点击右上角“共享”按钮，选择“嵌入”，复制生成的iframe代码。
立即学习“前端免费学习笔记（深入）”；
3、将复制的iframe代码粘贴至HTML5页面中，确认allow="clipboard-write"和allowfullscreen属性已包含，以支持复制与全屏操作。
4、保存HTML文件并在浏览器中打开，文档将以Office Online界面呈现，支持缩放、翻页及基础注释功能。
二、通过Office JavaScript API集成
若需深度控制文档行为（如监听保存事件、插入自定义UI按钮、读取选中文本），应使用Office JavaScript API。该方法要求文档托管于Office Add-in环境或启用Office加载项的Web应用中。
1、在HTML页面中引入Office.js库：<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>。
2、在页面加载完成后调用Office.onReady()检测Office宿主环境是否就绪。
3、使用Office.context.document.getSelectedDataAsync()等API获取当前选中内容，或通过Office.context.ui.displayDialogAsync()弹出协作面板。
4、部署时须将HTML页面托管于HTTPS域名下，且该域名已在Office Developer Portal中注册为有效加载项源。
三、利用Microsoft Graph API动态生成嵌入链接
当文档路径动态变化或需按用户权限差异化嵌入时，可通过Microsoft Graph API请求临时嵌入令牌，避免硬编码静态URL。该方法适用于企业级应用集成。
1、向https://graph.microsoft.com/v1.0/me/drive/items/{item-id}/createLink发送POST请求，body中指定{"type": "embed", "scope": "anonymous"}。
2、解析返回JSON中的link.webUrl字段，该URL含短期有效的访问签名。
3、将webUrl拼接至iframe的src属性，例如：src="https://onedrive.live.com/embed?cid=...&resid=...&authkey=..."。
4、嵌入后用户首次访问将触发OneDrive身份验证流程，通过后进入Office Online协作界面，编辑内容实时同步至源文件。
四、使用SharePoint嵌入Web Part（仅限SharePoint Online环境）
若网站已部署于SharePoint Online，可直接利用内置Document Embed Web Part，无需编写代码即可完成安全嵌入，且自动继承站点权限策略。
1、进入SharePoint页面编辑模式，点击“+”添加新Web Part，搜索并选择“Document Embed”。
2、在配置面板中粘贴目标文档的OneDrive或SharePoint共享链接，系统自动校验有效性并预览缩略图。
3、勾选“允许协作编辑”选项，确保用户点击文档后跳转至Office Online编辑界面而非只读视图。
4、发布页面后，所有具有对应SharePoint权限的用户均可按其角色执行查看、评论或共同编辑操作。
