记录一次pdf.js的使用

简介:在这次工作中需要在移动端展示pdf文件,但是移动端没有安装pdf解析器,座椅在应用中内置一个pdf.js来解决这个问题
说在前面:使用pdf.js插件需要启动服务器,emmmm直接用浏览器打开是使用不了的,各位小伙伴注意了,我之前用的vscode直接打开就显示找不到pdf文件(文件路径没错),后来用webstore打开,启动服务器就可以查看了。如下
在这里插入图片描述

具体效果图

在这里插入图片描述

1、在官网上下载pdf.js插件。网址http://mozilla.github.io/pdf.js/ 点击下载Stable稳定版

请添加图片描述
![请添加图片描述](https://img-blog.csdnimg.cn/a4de66618d8f4e148eecbe4135c0b17b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2luZXIgYWxs,size_20,color_FFFFFF,t_70,g_se,x_16
请添加图片描述

2、这样就能得到如下文件,这就是一个dome例子文件

在这里插入图片描述

3、因为我的js以及html需要放在固定文件夹,所以我在我项目里放js文件的文件夹里新建一个pdf文件,把上面两个文件拷贝进去,如图

在这里插入图片描述

4、在js文件夹同级新建一个static文件夹放pdf文件(根据自己的需要新建)

放置静态资源

5、修改web文件夹下的viewer.js文件里的数据

在这里插入图片描述

6、最后,我们终于可以使用了,这次是借用他自己的展示的html文件(viewer.html),我们只需要把自己的pdf文件路径传过去就好了,我的功能具体是点击按钮后跳转页面显示pdf文档,调整好之后直接运行就可以

在这里插入图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值