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

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

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

<iframeid="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.jsonVue.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/>'})
})

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

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

Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
vue中通过monment.js插件来将时间戳转换为常用的时间格式
vue中通过monment.js插件来将时间戳转换为常用的时间格式在项目中很多时候需要展示时间信息,我们一般都是用时间戳来传输时间信息,但是我们在页面展示的话是我们想要的常见格式,比如:2021-4 ...
php vue pdf预览,Vue项目使用pdf.js
前段时间有个支持在线学习功能的项目,有需要在线预览pdf格式课件的功能,我就想在线预览pdf多简单,因为大部分浏览器都支持打开pdf文件,所以直接放个iframe然后src是pdf文件的地址不就行了吗 ...
vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
vue里使用pdf.js实现pdf文件的预览功能
引言:经过上一篇文章的测试,发现了以下问题: 兼容性不好不适用多语言场景(不能共用一套) 会出现跨域问题难于监控阅读状态不能控制下载状态在基于vue开发的移动项目中,如果预览的pdf数量不是很 ...
vue 中展示PDF内容
vue 中展示PDF内容不久前有个需要改的需求,以前是直接根据链接让用户下载对应pdf文件来查看,最主要是给用户查看,然而这种并不是很安全的,其他用户可以进行下载或者使用pdf链接分享给其他人,所以 ...
vue打包后获取不到数据_vue 打包后，如何修改接口地址？
bug收集:专门解决与收集bug的网站网址:www.bugshouji.com 01背景在 vue 项目中,我们可以通过不同的环境,访问不同的服务器. 虽然可以使用环境的切换,但是在打包成html ...
vue项目打包后修改接口地址
vue项目打包后修改接口地址我们在做vue项目时,总会遇到开发时用的测试地址和项目上线时用到的接口地址不同,再就是项目上线后,后期需要更改接口地址的情况.然而,如果没有一个配置文件,后期更换起来就只 ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...

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

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

最新文章

热门文章