HTML怎么插入PDF文件预览_HTML embed PDF教程【文档】

标签最轻量但 safari 不支持 pdf 渲染，需用 配 google docs viewer 或自托管 pdf.js；注意同源、mime 类型、路径可达性及移动端手势适配。

用 <embed></embed> 标签最简单，但 Safari 不支持 PDF 渲染

直接插入 PDF 预览，<embed></embed> 是最轻量的方案，一行代码就能加载本地或远程 PDF：

@@@###@@@

但它在 Safari（尤其是 macos 14+ 和 ios）上会显示空白或提示“无法预览”，因为 Safari 默认禁用第三方 MIME 类型渲染。chrome 和 edge 没问题，firefox 依赖系统 PDF 查看器（如 pdf.js 启用时才可用）。

常见错误现象：embed 在 Safari 控制台无报错，但页面只留白框；PDF 文件路径正确、网络可访问，仍不显示。

• 确保 src 是同源 URL，跨域 PDF 需服务端配 access-Control-Allow-Origin
• type 必须写成 "application/pdf"，写成 "pdf" 或漏掉会退化为下载链接
• 不要嵌套 <embed src="manual.pdf" type="application/pdf" width="100%" height="600"></embed> 在 <Object></object> 里“兜底”——这反而触发 Safari 更严格的拦截逻辑

<iframe></iframe> 兼容性最好，但得走 Google Docs 或 PDF.js 中转

<iframe></iframe> 本身不能直接渲染 PDF（除非浏览器内置支持且允许），但通过中转服务能绕过兼容性问题。最常用的是 Google Docs Viewer：

<iframe src="https://docs.google.com/gview?url=https://yoursite.com/report.pdf&embedded=true" width="100%" height="600" frameborder="0"></iframe>

它在所有现代浏览器都可用，但有明显限制：PDF 必须公开可爬，且文件大小不能超 50MB；Google 可能缓存旧版本，更新后需清缓存或加时间戳参数。

更可控的方式是自托管 pdf.js（Mozilla 官方库）：

<iframe src="/pdfjs/web/viewer.html?file=/docs/manual.pdf" width="100%" height="600"></iframe>

需要提前部署完整 pdf.js 包，但完全可控、无外链依赖、支持密码保护 PDF。

立即学习“前端免费学习笔记（深入）”；

• Google Docs 方式下，url 参数必须是绝对 URL（含 http:// 或 https://），相对路径会失败
• 用 pdf.js 时，确保 viewer.html 和 build/ 目录结构完整，否则控制台报 "Cannot find worker"
• 移动端 iframe 高度建议用 min-height + JS 动态适配，否则容易截断内容

PDF 路径 404 或 CORS 报错？检查三件事

无论用 embed 还是 iframe，最常见的失败不是语法错，而是资源不可达。打开 DevTools 的 Network 面板，看 PDF 请求是否返回 200 —— 很多时候你看到“白框”，其实是请求卡在 404、403 或 CORS 拒绝上。

• 静态文件服务器（如 nginx、Vite、Next.js）默认不支持 .pdf MIME 类型，需手动添加 application/pdf 映射，否则返回 text/plain，浏览器拒解析
• PDF 放在 /public 目录（如 Vite/React）没问题，但若放在 /src 下，构建后根本不会输出，路径自然 404
• 本地开发用 file:// 协议打开 HTML？所有现代浏览器都会因安全策略阻断 PDF 加载，必须走 http://localhost 启服务

移动端双击缩放失效、滚动卡顿？别硬扛，加一层 wrapper

PDF 渲染容器（embed 或 iframe）在 iOS 和 android 上常出现手势冲突：双击不放大、上下滚动拖不动、甚至整个页面卡死。这不是 PDF 本身的问题，而是浏览器对内嵌文档的 touch 事件处理过于保守。

一个实操性强的解法是用 CSS 封装一层“手势透传”容器：

<div class="pdf-wrapper"><br>  @@@###@@@<br></div>

然后加这段 CSS：

.pdf-wrapper {<br>  -webkit-overflow-scrolling: touch;<br>  overflow: auto;<br>}<br>.pdf-wrapper embed {<br>  display: block;<br>  width: 100%;<br>  height: 600px;<br>  -ms-zoom: 1;<br>  zoom: 1;<br>}

• iOS 上必须加 -webkit-overflow-scrolling: touch，否则内部滚动完全失灵
• 避免给 embed 或 iframe 设 height: 100vh，Safari 对视口单位在嵌入内容中解析异常
• 如果 PDF 内容文字模糊，大概率是缩放未触发，可在加载后用 JS 主动调一次 window.print() 触发重绘（仅调试用）

PDF 预览看着简单，真正卡住人的永远不是标签怎么写，而是路径、协议、MIME、移动端事件这四层叠加的隐性约束。少查一层 Network 请求，就可能调一整天。