vue 使用pdf.js

知识库模块，知识库新建功能中，文件内容支持富文本编辑和文件上传两种方式，其中文件上传支持word,excel,ppt,pdf几种格式。对应的知识库内容展示页面，根据上传的方式不同也有两种方式展示。

1. 对于富文本的内容，直接在div标签中用v-html予以展示。
2. 对于上传的文件，若为pdf文件，直接存储；若为office的三个类型文件，分成六种尾缀（'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx'）在服务器通过openOffice转成pdf的格式存储。然后统一在iframe标签中运用pdf.js插件展示。

对于只展示pdf文件的情况，可以直接在iframe标签中，src指向地址，不用通过pdf.js插件展示，这是因为浏览器都自带有pdf阅读器可以解析。但不同浏览器的pdf阅读器都不同，无法要求pdf阅读器禁止用户下载，搜索等定制化要求。由于需求要求统计文档下载次数，我们单独做了下载的入口，故需要将pdf阅读器中的下载隐藏，我们引入pdf.js插件解析。

 

首先肯定是导入插件，从官网直接下载，链接：http://mozilla.github.io/pdf.js/getting_started/#download，注意放在static文件目录下，

这里面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer页面把它作为静态资源来编译，基本想要的build和web这两个重要文件夹的东西都正常编译。

 

关键代码：

 

preBase: '/gacenter',

base: '/static/pdf/web/viewer.html?file=',

 

// pdf流的接口为'/knowledge/word/getPdfStreamById?id='

          // url必须进行encode编码  把参数file后传入的动态参数中特殊字符转义

          this.checkURL = encodeURIComponent(this.preUrl + '/knowledge/word/getPdfStreamById?id=' + this.detailInfo.id);

          // 在测试服务器上，viewer.html的路径发生了变化，需要加上this.preBase '/gacenter'

          if (this.axios.defaults.baseURL === '/gacenter/api/v1') {

            this.fullURL = this.preBase;

          }

          this.fullURL = this.fullURL + this.base + this.checkURL;

 

1. 后台要返回数据流

用这种方式必不可少的是跨域问题，你存储文件的服务器路径会和项目产生跨域，我的解决办法是，让后台返回流的形式返回文件，后台代码案例：

 

1. 修改源码支持跨域

pdf.js是不支持跨域文件加载的  直接加载是不会成功的。会报  “file origin doesnot match viewer”错误。 所以我们得改变一下源码

把这句警告直接注释就行了。

1. 打包后viewer.html相对路径发生变化

打开config/index.js，看其中的assetsPublicPath值改为，在引用的iframe中base: '/static/pdf/web/viewer.html?file=', 前加入前缀。

 

1. 前后端分离在pdf.js中修改withCredentials默认false为true支持跨域。