要在网页中嵌入pdf并实现在线预览，常用方法有四种：1. 使用<embed>标签，兼容性好、代码简洁但样式控制有限；2. 使用<iframe>标签，结构清晰便于响应式设计，但移动端支持与<embed>类似；3. 借助google docs在线预览，跨平台兼容性强但需联网且国内不可用；4. 使用pdf.js本地化展示，高度可定制但部署复杂，适合企业级项目。根据是否依赖外部服务、是否需要移动端适配等因素选择合适方案，并注意测试跨域和样式适配问题。
在网页中插入PDF文件，最常见的需求是让用户可以直接在线查看文档内容，而不是下载后再打开。HTML本身不支持直接显示PDF，但可以通过一些方法实现嵌入效果。下面介绍几种实用的方法，适合不同场景下的使用。
1. 使用 <embed> 标签嵌入 PDF
这是最简单、兼容性较好的方式之一，适用于大多数现代浏览器（如 Chrome、Edge、Firefox 等）。
<embed src="example.pdf" type="application/pdf" width="100%" height="600px">
- 优点：代码简洁，加载快。
- 缺点：样式控制有限，部分移动端可能不支持直接预览。
-
建议：
- 设置合适的
width和height，避免页面布局错乱。 - 如果 PDF 文件较大，可以加一个加载提示或缩略图作为占位符。
- 设置合适的
2. 使用 <iframe> 嵌入 PDF
如果你希望更好地控制嵌入区域的外观，或者需要兼容某些旧设备，可以用 <iframe>：
立即学习“前端免费学习笔记（深入）”；
<iframe src="example.pdf" width="100%" height="600px"></iframe>
- 优点：结构清晰，便于响应式设计。
-
缺点：与
<embed>类似，在部分手机浏览器上可能无法直接显示。 -
小技巧：
- 可以结合 CSS 来设置 iframe 的宽高比例，比如用
aspect-ratio。 - 在 src 后面加上参数
#toolbar=0可隐藏 PDF 工具栏，例如：<iframe src="example.pdf#toolbar=0" ...></iframe>
- 可以结合 CSS 来设置 iframe 的宽高比例，比如用
3. 使用 Google Docs 在线预览 PDF
如果希望在所有设备上都能稳定显示 PDF，可以借助 Google Docs 的在线预览功能：
<iframe src="https://docs.google.com/gview?url=https%3A%2F%2Fyourdomain.com%2Fexample.pdf&embedded=true"
width="100%" height="600px" frameborder="0"></iframe>- 优点：跨平台兼容性强，适合移动端用户。
-
缺点：
- 需要联网访问 Google 服务（国内不可用）。
- PDF 文件必须能被公开访问，否则会加载失败。
- 注意：URL 要进行编码处理，特别是路径中包含特殊字符时。
4. 使用 PDF.js 实现本地化展示
如果你想完全掌控 PDF 显示逻辑，并且不需要依赖第三方服务，可以使用 Mozilla 开发的开源库 PDF.js。
基本步骤如下：
- 下载 PDF.js 并部署到服务器
- 引入必要的 JS 和 CSS 文件
- 使用提供的 viewer.html 或自定义渲染器来展示 PDF
<iframe src="path/to/pdf.js/web/viewer.html?file=example.pdf" width="100%" height="600px"></iframe>
- 优点：高度可定制，支持多种配置项。
- 缺点：部署复杂，首次集成需要一定时间调试。
- 适用场景：企业级项目、内部系统、对隐私要求高的应用。
基本上就这些常用的方法了。根据你的具体需求（是否需要兼容移动端、是否依赖外部服务、是否允许用户下载等），选择合适的方式即可。有些方法虽然看起来简单，但实际部署时可能会遇到跨域问题或样式适配的问题，提前测试好环境比较关键。
