vue中使用pdf.js插件打包后不显示插件及打包后动态修改接口地址

最近写了一个项目 需要在线展示pdf 实现方法是下载该插件并解压放到 static文件夹中 地址：http://mozilla.github.io/pdf.js/

我在项目中使用iframe嵌套的方式 根据后台传过来的pdf地址显示

<iframe
       id="previewPdf"
        :src="pdfHtmlURL+'?file=' + baseUrl+'/'+pdfPath"
        height="560"
        width="100%"
        v-if="pdfPath"
></iframe>

代码所示

data中代码如图

使用this.pdfHtmlURL 是因为初始化app 在Vue原型上添加了

pdfHtmlURL指的是 你的插件viewer.html地址
baseUrl 指的是 你的接口地址
pdfPath指的是文件路径地址
其中 pdfHtmlURL ，baseUrl 在static下新建config.json 如图


baseUrl 使用 /api 用的代理 可自行百度
pdfHtmlURL 之所以配置是因为当打包项目放到tomcat下面的时候 因为在要在webapps下新建文件夹 将打包后文件放进去 会出现访问不到插件的viewer.html 需要将地址改为相对路径 加一个点 就可以访问到了
“./static/pdf/web/viewer.html”

{
    "baseURL":"http://192.168.11.101:8080",
    "pdfHtmlURL":"./static/pdf/web/viewer.html"
}

那这两个变量肯定在初始化的时候就会被赋值 我放到了Vue的原型上 在main.js中设置这两个地址
代码如下

import axios from 'axios'
var date = new Date();
var timer = date.getTime().toString();
// /* eslint-disable no-new */
axios.get("/static/config.json?"+timer).then(res=>{  //如果是打包 需将地址改为/wskj/static/config.json
    Vue.prototype.pdfHtmlURL = res.data.pdfHtmlURL;
    Vue.prototype.baseURL = res.data.baseURL;
    axios.defaults.baseURL = res.data.baseURL;
      new Vue({
        el: '#app',
        router,
        store,
        components: { App },
        template: '<App/>'
      })
})

注意获取config.json的时候如果是本地开发 使用“/static/config.json”
如果是需要打包上线 则需要把地址改为“/wskj/static/config.json”
“wskj” 指的是 tomcat webapps下新建的文件夹 使用根目录可以访问到
路由那边 加了默认地址 base
如图

可以看到两个名字一致 需要统一

这样 操作 项目修改接口地址可直接在config.json中修改
切记 如果是本地开发 pdfHtmlURL 是绝对路径“/static/pdf/web/viewer.html”
如果是线上 使用相对路径 “./static/pdf/web/viewer.html”

如果上线之后 pdf.js 报错请把viewer.js 1900行注释

不明白留言

经过一段时间的学习 可以将代码简化 可以根据是否是生产还是开发环境绑定 接口地址和pdf地址

let url = (process.env.NODE_ENV =="production") ? '/wskj/static/config.json?' :'/static/config.json?' //获取接口的json
let pdfHtmlURL = (process.env.NODE_ENV =="production") ? './static/pdf/web/viewer.html' :'/static/pdf/web/viewer.html' //获取pdf地址
axios.get(url).then(res => { 
  Vue.prototype.pdfHtmlURL = pdfHtmlURL;
  Vue.prototype.baseURL = res.data.baseURL;
  Vue.prototype.$is_disabled = is_disabled;//判断按钮是否可用
  axios.defaults.baseURL = res.data.baseURL;
  new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
  })
})

这杨可以 当打包的时候不需要手动在改地址了