pdf.js的简单使用

写在前面的话:最近有个项目需要用到在手机端中使用pdf.js预览pdf文件,找了点资料,发现pdf.js不支持file协议,所以即使很多人下载了,在本地直接引用也打不开,网上有很多人说放到服务器上,花里胡哨一大堆。那没有自己的服务器还不开发了 ?(黑人问号)

服务器也是电脑,那我自己起个服务不就行了,搞个nginx不就行了,哪用费那么多事!

一.下载nginx,这个简简单单,不多说;

二.下载pdf.js,直接上官网下载稳定版;

三.把下载好的pdf.js和自己的代码丢进nginx目录下的html文件夹中,然后启动nginx就Ok了,如下图;

 

  启动nginx的时候,闪一下就行了,然后输入localhost能显示你的index.html就说明OK了。 

四.pdf.js的用法官网上很多,百度也能搜到许多,就不多哔哔,主要看路径,后面放测试或者生产这个路径都需要跟着修改。

<body>
    <div class="topTit">
       上面的文案
    </div>
    <--重点看iframe标签-->
    <iframe  src="http://localhost/web/viewer.html?file=http://localhost/jieru.pdf" class="myPdfStyle"></iframe>
    <div class="bottomTit">
        下面的文案
    </div>
</body>

 加上一张效果图,实话有点丑,想要好看,还是用canvas画吧,pdf.js也提供了方法。

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值