前端 PDF 预览的 7 种主流方案详解
在 Web 开发中,PDF 预览是个老生常谈却又坑不少的问题。不同的业务场景对性能、交互和兼容性的要求差异很大,没有一种万能方案。作为过来人,我总结了七种常见路径,并附上选型建议。
一、原生浏览器方案
最基础的方式是利用浏览器内置能力,适合快速原型或简单展示。
1. 使用 <embed> 标签
<embed src="document.pdf" type="application/pdf" width="100%" height="600px"/>
优点:零依赖,原生支持,自动显示控制栏(打印/下载按钮)。 缺点:不同浏览器样式差异大,无法深度定制界面,移动端兼容性较差。
2. 使用 <object> 标签
<object data="document.pdf" type="application/pdf" width="100%" height="600px">
<p>您的浏览器不支持 PDF 预览,请<a href="document.pdf">下载查看</a></p>
</object>
3. 使用 <iframe> 标签
<iframe src="document.pdf#view=FitH" width="100%" height="600px" frameborder="0">


