移动端实现在线预览PDF功能,使用pdf.js(个人笔记)

官网地址及示例http://mozilla.github.io/pdf.js/
挺烦的,需要翻出去才能看到,然后下载。
我的第一步:
下载之后,去viewer.js里面,找到defaultUrl在这里插入图片描述
把value清掉(没啥用),顺便把这个pdf文件也删掉。
第二步:
把需要展示的pdf文件存放在同级文件夹内(没研究定位,暂时先放在同级)。
第三步:
把这整个玩意儿放到项目里,然后我在需要用到在线预览pdf的页面,
使用iframe进行访问,地址就是viewer.html,很简单。在这里插入图片描述
在这里插入图片描述

第四步:
需要在手机上测试一下行不行。因为公司原因,没有测试服务器给我试错,所以整了个live-server,还行。npm install -g live-server
下载之后,找到live-server存放的文件夹(npm全局下载的通常都放在C盘-user-username(你的用户名)-AppData-Roaming-npm-node_modules)在这里插入图片描述
用编辑器打开这个index.js
在这里插入图片描述
搜索serveHost找到这儿,把三元式的true改成你电脑的ip地址。
完成之后,在这个项目根目录,打开编辑器的终端,输入live-server即可
第五步:
手机和电脑要在同一个wifi下,然后手机打开浏览器,访问live-server开放出来的地址端口。
第六步:
我是大功告成了,手机端打开页面是可以在线预览pdf了。可以把这个文件夹提交去服务器啦!

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值