插件显示PDF,预览

官网上下载相关的js:pdf.js
下载地址:https://mozilla.github.io/pdf.js/getting_started/#download
解压之后会获取两个让文件包web以及build,两个文件内包含了相关了的js,html,css等组件,把两个文件包放置项目工程内,使用iframe标签src跳转到下载的组件前端页面里

										//下载的组件的相对位置以及pdf的文件地址
<iframe id="pdfPath" src="../../../styles/web/viewer.html?file=${fileName}"
        width="100%" height="100%" scrolling="yes" frameborder="0"></iframe>

下载之后pdf.js需要修改一下js的内容,因为本身会有一个默认显示的pdf,把原有的默认的pdf默认为空就行了
如图:

有的
在这里插入图片描述
有的在使用过程中控制台会报错需要把js文件里的一段代码注释掉就可以了
在这里插入图片描述
其实这个插件使用也是非常的简单,主要是从后台传一个参数至前端就可以了直接不经过后台就可以显示,如果非要进行一次跳转后台也是可以的,把路径改为控制台路径:
在这里插入图片描述
控制台路径分为两个:
在这里插入图片描述
通过控制台跳转插件页面,然后通过参数会自动再跳转控制台
在这里插入图片描述
这样就能实现再次访问控制台,因为我这里上面实现是移动端,下面是PC端,两个实现不一样但是都是同一个数据同一个效果所以实现有点会不一样!但是都能达到效果!

如果能用到的可以参考一下,或者有不同意见的可以讨论

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值