需结合iframe、object、embed标签分别嵌入PDF、Office文档和纯文本，通过JavaScript控制多格式无刷新切换，并为不支持场景提供下载降级方案。
如果您希望在HTML5页面中嵌入多种格式的文档（如PDF、Word、Excel、TXT等）并实现用户友好的格式切换体验，则需要结合不同的嵌入机制与交互控制逻辑。以下是实现此目标的具体操作步骤：
一、使用<iframe>嵌入PDF及其他支持直接渲染的文档
PDF文件可被主流浏览器原生解析，通过<iframe>标签可直接加载并显示，无需额外插件。该方式适用于静态文档展示，且具备基础缩放与滚动能力。
1、在HTML文档中插入<iframe>标签，并设置src属性指向PDF文件路径。
2、为<iframe>设置固定宽高，例如width="100%" height="600"，确保内容区域清晰可见。
立即学习“前端免费学习笔记（深入）”；
3、添加title属性以提升可访问性，例如title="PDF格式文档预览"。
4、在src值末尾追加#view=fit参数（如document.pdf#view=fit），使PDF自动适配视口尺寸。
二、通过<object>嵌入Office文档（.docx、.xlsx）
当目标文档为Microsoft Office格式时，可借助Office Online Viewer服务进行在线渲染。该方案依赖外部服务，需确保文档已公开可读或托管于支持跨域的存储位置。
1、构造Office Online Viewer的URL，格式为：https://view.officeapps.live.com/op/embed.aspx?src=文档绝对URL。
2、将该URL作为<object>标签的data属性值。
3、设置<object>的type为text/html，并指定宽高属性以保障布局稳定。
4、在<object>内部嵌套<param name="src" value="同上URL">作为备用兼容声明。
三、使用<embed>加载纯文本（.txt）与Markdown（.md）
纯文本文件可通过<embed>标签配合type="text/plain"直接载入；对于Markdown文件，需配合客户端JavaScript解析器（如marked.js）进行动态渲染，此处仅处理原始文本加载阶段。
1、将<embed>标签插入文档流，设置src为.txt或.md文件路径。
2、指定type="text/plain"，确保浏览器以文本模式解析而非下载。
3、为<embed>设置width="100%" height="400"，并添加style="border:1px solid #ccc;"增强视觉边界。
4、在<embed>后紧跟<script>块，用于检测加载完成并触发后续格式化逻辑（如适用）。
四、构建多格式切换控件（无刷新切换）
为实现同一容器内不同文档格式的切换，需预先加载各格式对应的嵌入代码片段，并通过DOM操作动态替换内容区域，避免整页重载。
1、为每个文档格式准备独立的嵌入结构（如iframe、object、embed），并统一包裹在具有相同class名的容器中（如class="doc-container"）。
2、在页面顶部添加一组<button>，每个按钮的data-format属性对应一种格式（pdf/docx/txt）。
3、编写JavaScript事件监听器，点击按钮时隐藏所有.doc-container，再根据data-format值显示对应容器。
4、确保所有嵌入元素的id属性唯一，并在切换前调用contentWindow.location.reload()（针对iframe）或重新设置data属性（针对object）以强制刷新内容。
五、处理不支持格式的降级提示与下载链接
当用户浏览器无法渲染某类文档（如旧版IE对PDF iframe的支持受限），需提供明确的替代方案，防止内容不可见。
1、为每个嵌入容器添加<noscript>区块，内含对应文档的下载链接及格式说明。
2、在JavaScript中检测iframe.contentDocument是否存在且可读，若失败则显示提示层。
3、提示层中包含“当前浏览器不支持在线预览，请点击下方链接下载文档”文字及带download属性的<a>标签。
4、所有下载链接的href必须为绝对路径，且服务器响应头中包含Content-Disposition: inline以优先触发预览而非下载（如支持）。
