移动端浏览器常下载而非预览pdf，因ios safari等默认禁用内联渲染，android chrome需正确content-type，微信则强制劫持.pdf链接跳转腾讯文档；稳妥方案是用pdf.js canvas渲染。
手机浏览器直接打开 PDF 链接为什么经常下载而不是预览？
因为多数移动端浏览器（尤其是 iOS Safari 和部分 Android Chrome）默认禁用内联 PDF 渲染，或仅在特定条件下才调用系统 PDF 查看器。不是你的 <a href="xxx.pdf"></a> 写错了，是平台策略在干预。
常见错误现象：
点击链接后自动唤起下载管理器、跳转到空白页、提示“无法打开此文件”、或强制保存到“文件”App 里。
- Android Chrome 通常能内联预览，但需服务器返回正确的
Content-Type: application/pdf，且不带Content-Disposition: attachment - iOS Safari 几乎从不内联渲染 PDF —— 它会把 PDF 当作“可下载资源”，除非你用
<embed></embed>或<iframe></iframe>显式声明，并配合src指向同源 PDF（跨域基本失效） - 微信内置浏览器、QQ 浏览器等 WebView 容器更保守，大概率直接调起系统下载或跳转到腾讯文档/金山文档等第三方解析页
<iframe></iframe> 和 <embed></embed> 在手机上表现差异大吗？
有，而且很关键。iOS 上 <iframe src="a.pdf"></iframe> 偶尔能触发预览，但成功率低；<embed src="a.pdf"></embed> 在部分 Android 机型上会卡住或白屏；两者都受同源策略和 MIME 类型限制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
<iframe></iframe>，它兼容性略好，且 fallback 更可控（比如加width="100%" height="600"） - 确保 PDF URL 是同源的，或服务端已配置 CORS（
Access-Control-Allow-Origin: *），否则 iOS Safari 会静默失败 - 避免在
<iframe></iframe>上设style="display:none"或动态src，iOS 会拒绝加载 - 不要依赖
<object data="x.pdf"></object>—— 现代移动端基本不支持，尤其 iOS
有没有不依赖服务器配置的稳妥方案？
有，但得绕开浏览器原生 PDF 渲染，改用 JS 库解析。最常用的是 pdfjs-dist（Mozilla 官方 PDF.js）。
它把 PDF 解析成 Canvas 渲染，完全脱离系统限制，适合需要稳定预览、加水印、高亮文本等场景。
- 体积不小（压缩后约 1.5MB），首次加载慢，慎用于弱网环境
- 需自己处理分页、缩放、下载按钮等 UI，不能直接复用系统阅读器功能
- 示例最小启动方式：
import { getDocument } from 'pdfjs-dist/build/es5/pdf.mjs';<br>getDocument('manual.pdf').promise.then(pdf => pdf.getPage(1).then(page => { /* 渲染到 <canvas> */ })); - 注意：CDN 引入时务必用完整版（
pdf.min.js+pdf.worker.min.js），worker 路径配错会导致白屏
微信里点开 PDF 总是跳转到“腾讯文档”怎么办？
这是微信主动拦截并劫持了 PDF 请求，无论你怎么写 HTML，只要 URL 以 .pdf 结尾，它就大概率介入。这不是 bug，是策略。
目前唯一有效绕过方式：把 PDF 包装成非 .pdf 后缀的请求，靠服务端做内容协商。
- 例如 URL 写成
/view?file=report，后端响应时设Content-Type: application/pdf且不带Content-Disposition - 不能用 302 重定向到真实 PDF 地址 —— 微信会跟踪重定向并再次劫持
- 微信 JSSDK 的
openLocation或chooseImage等接口不适用于 PDF，别试 - 如果必须用原始链接，可提示用户“长按链接 → 在 Safari/Chrome 中打开”，这是最现实的兜底动作
微信里 PDF 的行为由客户端硬编码控制，任何前端 hack 都可能某天失效。真要稳定，就得接受「用户必须离开微信」这个前提，或者彻底转向 PDF.js 自渲染。
