vue 使用pdf.js

在Vue知识库应用中,对于上传的PDF文件,利用pdf.js插件进行展示。文章详细介绍了如何处理不同类型的文件,以及如何在iframe中通过pdf.js插件展示PDF,确保下载统计功能的实现。涉及到的步骤包括:下载并配置pdf.js,处理跨域问题,以及动态生成PDF文件的URL。
摘要由CSDN通过智能技术生成

知识库模块,知识库新建功能中,文件内容支持富文本编辑和文件上传两种方式,其中文件上传支持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

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值