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

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

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

下面是我之前的方法:

<object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" id="embeded" width="100%" height="100%"
                        border="0">
                        <param name="_Version" value="65539">
                        <param name="_ExtentX" value="20108">
                        <param name="_ExtentY" value="10866">
                        <param name="_StockProps" value="0">
                        <param name="SRC" value="testing_pdf.pdf"><embed id="val_pdf" src="pdf文件路径" width="100%"
                            height="800" href="pdf文件路径"></embed>
 </object>

上面的方法需要注意的就是用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目录下。解压后是这样的:

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

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

<a href="/pdf/web/viewer.html?file=file.pdf">Open</a>

如果想在弹窗打开:

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

最后如果有下面这个错误:
在这里插入图片描述
这个错误是说你打开的协议与url的协议不匹配,这是它的一个安全措施。

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

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值