使用pdfjs，在前端页面上展示pdf格式文件的办法

小灰灰 2023-06-07 13:26 76阅读 0赞

今天在解决一个前端问题的时候，在网上看到这样一篇帖子，解决了我的问题，给原博主点赞后还是决定转发到这里供大家参考~  
在此感谢原博主： [lixiuke][]

**我需要用ajax异步请求的方式将后台传入的pdf格式的文件在页面做一个展示，开始这个方法虽然可行，但是到了安卓手机上显示不出来，用了这位博主的方法，也就是pdfjs之后，问题就解决了~**

下面是我之前的方法：

**上面的方法需要注意的就是用jquery的方式给src动态写值是不行的，需要将整个param都动态写入  
不过这个方法在某些地方还是不支持**

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

**因此用下面的方法（pdfjs）：**

现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了，不用安装额外的插件。但是不同的浏览器显示的页面不一样。如果我们想在网页上统一预览pdf怎样实现呢？

Mozilla开源了一个插件pdf.js，无需任何本地支持就可以在浏览器上显示pdf文档。唯一的要求就是浏览器必须支持HTML5。使用方法：

1.  下载https://github.com/mozilla/pdf.js/archive/gh-pages.zip
2.  解压到目录pdf，再把整个目录拷贝到网站的public目录下。解压后是这样的：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX2x1a2FpZmFuZw_size_16_color_FFFFFF_t_70]  
3. 我们可以使用pdf.js自带的预览界面viewer.html，只需传入pdf文件的url即可。

如果要打开一个pdf文件，直接这样写就可以了：

如果想在弹窗打开：

window.open('/pdf/web/viewer.html?file=file.pdf','PDF','width:50%;height:50%;top:100;left:100;');

最后如果有下面这个错误：  
![在这里插入图片描述][20191015143719295.png]  
这个错误是说你打开的协议与url的协议不匹配，这是它的一个安全措施。

要解决这个问题很简单，打开web目录下的viewer.js文件，把第1692行注释掉。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX2x1a2FpZmFuZw_size_16_color_FFFFFF_t_70 1]

[lixiuke]: https://www.cnblogs.com/lixiuke/p/10141982.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX2x1a2FpZmFuZw_size_16_color_FFFFFF_t_70]: /images/20230601/9c27600ea8fc417ca193644f536952da.png
[20191015143719295.png]: /images/20230601/a23050bb075e457f8ed1a8b428401a2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX2x1a2FpZmFuZw_size_16_color_FFFFFF_t_70 1]: /images/20230601/c28d4b2f31f34d4daf7c39d3a0a64ba9.png