前端预览PDF总结

前端预览PDF总结：

原文链接：https://blog.csdn.net/qappleh/article/details/80250492
要在网页上显示PDF文件,首先< object >、< embed >、< iframe >这几个标签就能实现PDF文件的预览（无需JavaScript支持），我还在网上看了下发现挺多第三方js库可以实现PDF预览，如jQuery Document Viewer、jquery.media.js、PDFObject、PDF.js等等。我大概看了下PDFObject、PDF.js这两个库，前者并不是一个PDF的渲染工具，而是通过使用< embed >标签来显示PDF；后者则会解析PDF文件内容，还能将PDF渲染成Canvas。

< iframe >

所有浏览器都支持 < iframe > 标签，直接将src设置为指定的PDF文件就可以预览了。此外可以把需要的文本放置在 < iframe > 和 之间，这样就可以应对无法理解 iframe 的浏览器，比如下面的代码可以提供一个PDF的下载链接：

This browser does not support PDFs. Please download the PDF to view it: Download PDF

< embed > 标签定义嵌入的内容，比如插件。在HTML5中这个标签有4个属性：

属性 值 描述
height pixels 设置嵌入内容的高度。
width pixels 设置嵌入内容的宽度。
type type 定义嵌入内容的类型。
src url 嵌入内容的 URL。
但是需要注意的是这个标签不能提供回退方案，与< iframe > < / iframe >
不同，这个标签是自闭合的的，也就是说如果浏览器不支持PDF的嵌入，那么这个标签的内容什么都看不到。用法如下：

< object >

< object >定义一个嵌入的对象，请使用此元素向页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。几乎所有主流浏览器都拥有部分对 < object > 标签的支持。这个标签在这里的用法和< iframe >很小，也支持回退：

This browser does not support PDFs. Please download the PDF to view it: Download PDF

当然，结合< object >和< iframe >能提供一个更强大的回退方案：

This browser does not support PDFs. Please download the PDF to view it: Download PDF

以上三个标签是一种无需JavaScript支持的PDF预览方案。 ———————————————— 版权声明：本文为CSDN博主「ruanhongbiao」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。