embed标签必须显式设置type="application/pdf"，否则Firefox/Safari会失败；iframe兼容性更好；复杂功能需用pdf.js实现。
embed 标签的 type 属性必须写成 application/pdf
浏览器只认这个标准 MIME 类型，写成 pdf、text/pdf 或漏掉 type 都会失败——不是报错，而是悄悄退化为下载链接，或直接留白。Chrome 和 Edge 有时能“猜对”，但 Firefox 和 Safari 严格校验，一错就挂。
常见错误现象：
-
embed渲染区为空白，控制台无报错，Network 面板里 PDF 请求状态是 200 但Content-Type是text/plain或application/octet-stream - 点击后触发下载而非预览，尤其在 Safari 和移动端 Chrome 上高频出现
实操建议：
- 务必显式声明：
<embed src="doc.pdf" type="application/pdf" width="100%" height="600"> - 不要依赖服务器自动推断 MIME 类型；本地开发时用
python3 -m http.server起服务，它默认返回application/octet-stream，需手动配或换工具（如live-server） - 生产环境检查响应头：
curl -I https://yoursite.com/doc.pdf确认含Content-Type: application/pdf
embed 在 Safari 中基本不可用，别把它当主力方案
Safari（macOS 14+ / iOS 17+）已彻底禁用 embed 对 application/pdf 的渲染能力，即使路径、MIME、同源全对，也只会显示空白框或“无法预览”提示。这不是 bug，是 Apple 主动移除的功能。
关键事实：
- Firefox 依赖系统级 PDF 查看器（比如启用了 pdf.js 才能显示）
- Chrome/Edge 原生支持，但若用户禁用了 PDF 查看器插件，也会 fallback 到下载
-
embed不支持任何 JavaScript 交互：无法监听翻页、获取当前页码、搜索文本
所以除非你明确只面向内网 Chrome 用户，否则不要把 embed 当作跨浏览器解决方案。
替代方案中，iframe 是最简单且兼容性最好的选择
现代浏览器（包括 Safari）对 iframe 加载 PDF 的支持远好于 embed，原理是它复用浏览器内置 PDF 查看器上下文，而非依赖插件或标签语义。
实操要点：
- 用法极简：
<iframe src="manual.pdf" width="100%" height="600px" style="border: none;"></iframe> -
src必须可直连访问：不能是后端重定向 URL，也不能是带 session 鉴权的动态接口（除非返回application/pdf+ 正确 CORS 头） - 移动端 Safari 有缩放和滚动条干扰，加
scrolling="no"或 CSSoverflow: hidden可缓解 - fallback 内容（如下载提示）在
iframe中无效，需额外加一层 DOM 提示或用 JS 检测加载失败
需要控制页码、搜索、深色模式？直接上 pdf.js
原生 embed 和 iframe 都只是“展示容器”，不提供 API。如果你要实现跳转指定页、高亮关键词、导出某页为图片、或适配暗色主题，绕不开 pdf.js。
最小可用示例（CDN 引入）：
<canvas id="pdf-canvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/build/pdf.min.js"></script>
<script>
pdfjsLib.getDocument('report.pdf').promise.then(pdf => {
pdf.getPage(1).then(page => {
const viewport = page.getViewport({ scale: 1.5 });
const canvas = document.getElementById('pdf-canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = { canvasContext: context, viewport };
page.render(renderContext);
});
});
</script>
注意：
- 不要用
fetch+Blob URL中转 PDF：大文件易卡顿，Safari 中URL.createObjectURL生成的 blob URL 无法被 pdf.js 渲染 - pdf.js 默认不带 UI，需自己拼工具栏，或直接用官方 viewer.html（但要处理路径和跨域）
- 服务端若托管 PDF，仍需确保返回
Content-Type: application/pdf，否则 pdf.js 会解析失败
真正麻烦的从来不是写哪行 HTML，而是让 PDF 文件在所有设备、所有网络条件下，以正确 MIME 类型、可访问路径、无 CORS 阻挡的方式抵达浏览器——这一步卡住，后面所有标签都白搭。
