深入理解pdf.js，PDFObject, iframe 三种方式来打开PDF文件的区别

以你之姓@ 2022-12-29 09:24 701阅读 0赞

浏览器原生就是支持打开PDF文件的。

所以使用iframe打开就相当于是使用浏览器自带的PDF插件打开，这个很好理解。

--------------------

至于PDFObject，他是借助了`embed`这个标签，这个标签是什么概念？

> HTML 元素将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供

其实就是使用浏览器的PDF插件打开。所以他和iframe打开的核心是一样的，只不过使用embed感觉不用内嵌iframe更好些。

其实PDFObject.js库真的很小，压缩的代码只有不到3k。也说明了他实现的功能很简单，从他最终的导出接口可以看到：

return { 
        embed: function (a, b, c) {  return embed(a, b, c); },
        pdfobjectversion: (function () {  return pdfobjectversion; })(),
        supportsPDFs: (function () {  return supportsPDFs; })()
      };

*  embed方法 创建embed节点并显示PDF
 *  pdfobjectversion 是打酱油的，显示当前的版本号
 *  检测当前环境是否支持embed打开pdf

--------------------

最后说下pdf.js， 这货其实很有意思，上边说无论iframe，还是embed，都是使用浏览器自带插件打开。而这时候pdf.js站起来说：没错，在下就是火狐的自带pdf插件…言下之意，你用以下几种方式在火狐中打开PDF:

*  浏览器直接输入
 *  iframe内嵌
 *  embed嵌入
 *  pdf.js
 *  pdfobject

最后都是使用同一套代码去解析执行的，ui都一模一样…\[汗\]

为了证明这一点，你可以网络上直接找个可以访问的pdf，然后用火狐打开，接着打开控制台，注意了，当前我只是打开了一个pdf，可不是html，我根本引入不了任何js库…

在控制台输入pdf.js这个库暴露出的全局变量  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]  
看到了么，已经被引入了，感觉这相当于你的浏览器自带了vue一样神奇…

当然这个pdf.js可以在谷歌等其他浏览器中引入并可以打开相同样式的pdf预览，这是很了不起的。因为各个浏览器的预览样式，比如上一页下一页等按钮都是不一致的。

--------------------

最后，我还想说一句，pdf.js的页面主要页面引入方式，其实就是iframe…，具体做法是你打包生成一个view.html文件，你在iframe中拼上文件地址就可以：

http://yourhost.com/view.html?file=encodeURIComponent('http://yourhost.com/yourpdf.pdf')

更有甚者，PDFObject这个库还对不支持embed的浏览器提供了兼容，其方式就是上边这种基于pdf.js的iframe方式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 1]  
以上是PDFObject的部分源码，感觉自己快被绕晕了…

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221120/f6a34154de264a0c9a185813bb96a90e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 1]: /images/20221120/dbe449cf2755493d87897b1295c8b247.png