vue 使用pdf.js

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

对于富文本的内容，直接在div标签中用v-html予以展示。
对于上传的文件，若为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;

后台要返回数据流

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

修改源码支持跨域

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

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

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

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

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

vue 使用pdf.js相关推荐

vue使用pdf.js实现移动端在线PDF文件预览
背景产品需求涉及到动态的PDF展示,PDF是由后端去生成的,然后下发给前端在线的cdn地址,H5需要实现在线PDF预览的能力方案 H5展示合同PDF,有很多实现方式.但是通过尝试后发现在不同操作系 ...
springboot+vue整合pdf.js实现预览pdf
前景回顾: 上一次说到使用浏览器自带的预览pdf功能所遗留的问题,360浏览器不够给力,IE的我没测,估计也不行,于是乎我又翻阅资料(度娘)找到了一种新的实现方式,使用pdf.js实现如果想看使用浏 ...
vue版pdf.js 在线预览pdf文件流
1.简介由于我使用的是若依版的vue前端框架(ElementUI二开),因此不知道为什么在前端配置pdf.js一直无法生效,所以换了一个思路,将pdf.js相关文件放置在后台代码中,以访问后台页面的 ...
使用vue引入pdf文件
vue使用iframe引入pdf文件在网上找的很多文章都显示需要添加pdf.js来引入vue文件,但是还有一个很简单的办法就是使用iframe框架引入pdf 效果使用iframe框架引入的话代码会 ...
fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
Vue项目中使用基于pdf.js的vue-pdf插件在pc浏览器下阅览PDF文件
最近项目中需求为在浏览器上阅览PDF格式的文件,之前没有写过,随即上网查阅,发现大家常使用的为两个插件. 其一是火狐出品的pdf.js,github地址:https://github.com/mozi ...
php+预览和下载pdf文件,vue实现在线预览pdf文件和下载（pdf.js）
最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上.谷歌.安卓,苹果) 强烈推荐改插件, ...
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 1.vue项目pdf展示 2.pdf工具栏放大缩小功能文章目录前端vue项目(使用pdf.js) pdf展示及pdf工 ...

vue 使用pdf.js

vue 使用pdf.js相关推荐

最新文章

热门文章