网页嵌入PDF方法：使用Embed标签实现在线预览

本文深入解析了网页中嵌入PDF文件的核心技术要点与常见陷阱，重点围绕``标签的正确用法展开，强调路径配置、MIME类型校验、本地服务器预览必要性及`type="application/pdf"`的关键作用；同时对比了`

PDF嵌入后空白或报错404

直接用 标签时，最常见问题是路径写错或PDF未被服务器正确托管。浏览器不会提示“文件不存在”，而是静默显示空白区域或 fallback 内容。

• 确保 PDF 文件路径是**相对当前 HTML 的有效路径**，比如 PDF 在同级目录就写 src="manual.pdf"；若在 /assets/docs/ 下，必须写 src="/assets/docs/manual.pdf"（注意开头的 / 表示根路径）
• 检查浏览器开发者工具的 Network 面板，确认 PDF 请求返回的是 200 OK 且 Content-Type 是 application/pdf；如果返回 404 或 text/html，说明路径错或服务器没配 MIME 类型
• 本地双击打开 HTML 时，file:// 协议下多数浏览器会因安全策略阻止 加载 PDF，务必用本地服务器（如 python3 -m http.server）预览

Embed 标签的 src 和 type 必须同时正确

能否渲染 PDF 不只看 src，还依赖 type 属性是否声明为 application/pdf。漏掉它，部分浏览器（尤其是旧版 Safari 或 Edge）会忽略该资源或降级为下载链接。

• 最小可用写法：

  <embed src="doc.pdf" type="application/pdf" width="100%" height="600px">

• width 和 height 推荐用具体数值（如 800px）或百分比，避免设为 auto —— 多数浏览器不支持 height="auto"，会导致高度塌陷
• 不要混用