vue里使用pdf.js实现pdf文件的预览功能

引言：经过上一篇文章的测试，发现了以下问题：

1. 兼容性不好
2. 不适用多语言场景（不能共用一套）
3. 会出现跨域问题
4. 难于监控阅读状态
5. 不能控制下载状态

在基于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.更改源码（持续更新中）