引言:经过上一篇文章的测试,发现了以下问题:
- 兼容性不好
- 不适用多语言场景(不能共用一套)
- 会出现跨域问题
- 难于监控阅读状态
- 不能控制下载状态
在基于vue开发的移动项目中,如果预览的pdf数量不是很多的话,是可以使用 vue-pdf 的,因为在实际开发测试中,ios系统依次预览多个pdf文件会出现白屏的现象,android系统不会出现。但是此时也很难监控阅读状态,所以最后采用pdf.js来实现业务需求。
目录:
- 实现效果
- 1.下载pdfjs
- 2.放在项目中位置
- 3.在页面中使用
- 4.出现问题
- 5.更改源码
实现效果
1.下载pdfjs
官网:
http://mozilla.github.io/pdf.js/getting_started/#download
2.放在项目中位置
将下载下来的文件解压,放在项目的public目录下
为了减小打包体积,bulid文件夹中保留pdf.js和pdf.worker.js即可正常编译。
3.在页面中使用
在我的项目中,pdf文件是以url的形式提供的,我们在页面中放一个iframe,他的src属性等于到viewer.html的相对路径 '/pdfplugin/web/viewer.html?file=' ,file后拼接你的pdf的url就可以了。
代码实现:
<template>
<div>
<iframe :src="src" style="width: 100%;height: 100vh" ></iframe>
</div>
</template>
<script>
export default {
name: "myTestTwo",
data(){
return {
url:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
src:''
}
},
mounted() {
this.getUrl();
},
methods :{
getUrl:function () {
this.src = '/pdfplugin/web/viewer.html?file=' + this.url
}
}
}
</script>
<style scoped>
</style>
效果展示:
通过结果可以看出,pdf.js真的是很强大,我们可以按照需求来更改源码,实现自己想要的效果。
4.出现问题
- 跨域问题:可参考这篇文章,推荐让后端小伙伴添加配置。
- 当访问本地文件时,有可能会出现**
Not allowed to load local resource
**的问题,原因是谷歌浏览器禁止直接访问磁盘文件,在实际开发中,文件大多存在服务器中,如果个人想学习测试可以使用在线的pdf资源。 - 在使用viewer.html相对路径时有可能找不到正确路径,我之前的路径是
/public/pdfplugin/web/viewer.html?file=
,发现怎么也找不到文件,后来去掉了一层/public
,pdf就神奇的出来了。
5.更改源码(持续更新中)