直接用<iframe>嵌入PDF文件最简单可靠，前提是路径可被同源或公网直接访问且响应头为Content-Type: application/pdf；若遇跨域或认证拦截，则需改用pdfjs-dist等JS库解析渲染。
直接用 <iframe> 嵌入 PDF 文件，浏览器原生支持，最简单也最可靠——前提是 PDF 路径可被公网或当前域直接访问，且不涉及跨域或认证拦截。
PDF 能否用 <iframe> 直接打开
绝大多数现代浏览器（Chrome、Edge、Firefox、Safari）都内置 PDF 渲染引擎，只要 PDF 文件响应头包含 Content-Type: application/pdf，<iframe src="xxx.pdf"> 就能直接显示。但要注意：
- 路径必须是完整 URL（如
https://example.com/doc.pdf）或同源相对路径（如./report.pdf），不能是本地file://协议（开发时常见失败原因） - 若 PDF 在登录后才能访问，需确保请求携带有效 Cookie 或 token，否则 iframe 会空白或返回 401/403
- 某些 Nginx/Apache 配置可能默认禁止 PDF 的 inline 渲染，需检查是否设置了
X-Content-Type-Options: nosniff或错误的Content-Disposition: attachment
遇到跨域或后端权限控制怎么办
当 PDF 存在跨域限制（如 CDN 域名与前端不同）或需带认证头（如 Bearer Token），<iframe> 会直接失败（控制台报 CORS 错误或空白）。此时必须绕过浏览器直接加载，改用 JS 库解析并渲染：
- 首选
pdfjs-dist（Mozilla 官方 PDF.js）：纯前端解析，不依赖后端 PDF 流转换，支持自定义 UI 和文本选择 - 关键步骤：用
fetch带凭证（credentials: 'include'）或 token 请求 PDF 二进制流 → 转为Uint8Array→ 传给pdfjsLib.getDocument() - 注意：PDF.js 默认不处理跨域字体（如中文），需确保 PDF 内嵌字体，或配置
CORS允许字体资源（Access-Control-Allow-Origin）
pdfjs-dist 最简可用示例
不用构建工具，CDN 引入即可运行（适合快速验证）：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<canvas id="pdf-canvas"></canvas>
<script>
pdfjsLib.GlobalWorkerOptions.workerSrc =
'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';
fetch('/api/protected-report.pdf', {
credentials: 'include' // 或 headers: { Authorization: 'Bearer xxx' }
})
.then(r => r.arrayBuffer())
.then(data => pdfjsLib.getDocument(data))
.then(pdf => pdf.getPage(1))
.then(page => {
const viewport = page.getViewport({ scale: 1.5 });
const canvas = document.getElementById('pdf-canvas');
const ctx = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
return page.render({ canvasContext: ctx, viewport });
});
</script>
上面代码只渲染第一页；实际项目中需处理分页、缩放、加载状态和错误（如 InvalidPDFException 表示文件损坏或非 PDF 格式）。
为什么不用 <embed> 或 <object>
这两个标签理论上也能内嵌 PDF，但兼容性差、行为不一致：<embed> 在 Safari 中常被忽略 MIME 类型而触发下载；<object> 在 Chrome 中 fallback 内容几乎不可控。更麻烦的是，它们无法通过 JS 控制渲染逻辑（比如加水印、高亮文字、统计阅读进度），一旦出错只能靠用户手动刷新。真要轻量级方案，<iframe> 是唯一值得优先试的原生方式。
真正卡住的往往不是技术选型，而是 PDF 文件本身的 HTTP 响应头是否允许 inline 渲染，以及前端能否合法拿到它的字节流——这两点比选哪个库重要得多。
