vue使用pdf.js预览pdf文件的方法
作者:奔跑的哈密瓜 发布时间:2024-04-27 16:06:24
我们在页面进行pdf预览的时候,由于有些文件不能够进行打印和下载,这时候我们使用window自带的pdf就很难满足客户的需求,因此需要另外的办法来支持我们进行特殊条件的pdf文件预览,这里我采用引入pdf.js文件的形式来达到目的。
第一步:下载pdf.js
引入pdf.js文件
地址如下:http://mozilla.github.io/pdf.js/getting_started/
第二步,vue引入
我这里是把下载下来的文件放在了根目录的piblic下
第三步,使用
主要是地址"/build/generic/web/viewer.html?file="+href,href为请求后端返回的文件路径或者后端返回文件流前段解析后生成的文件路径,前面拼接上/build/generic/web/viewer.html?file=,地址为自己引入pdf.js文件的路径,也可以直接这样写/build/generic/web/viewer.html,他会直接去找。下面我使用的是前段解析文件流生成地址预览的。
预览方法window.open("/build/generic/web/viewer.html?file="+href);
axios({
method: 'get',
url:url,
headers: {
"token":auth,
},
responseType: 'blob',
}).then(response => {
type_ = type_.toLowerCase();
if (type_ == "docx") {
that._type_ = "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
} else if (type_ == "doc") {
that._type_ = "application/msword"
} else if (type_ == "gif") {
that._type_ = "image/gif"
} else if (type_ == "jpeg" || type_ == "jpg") {
that._type_ = "image/jpeg"
} else if (type_ == "png") {
that._type_ = "image/png"
} else if (type_ == "pdf") {
that._type_ = "application/pdf"
} else if (type_ == "txt") {
that._type_ = "text/plain;charset=utf-8'"
} else if (type_ == "xls") {
that._type_ = "application/vnd.ms-excel"
} else if (type_ == "xlsx") {
that._type_ = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
}else if (type_ == "zip") {
that._type_ = "application/zip"
} else if (type_ == "ppt") {
that._type_ = "application/vnd.ms-powerpoint"
} else if (type_ == "pptx") {
that._type_ = "application/vnd.openxmlformats-officedocument.presentationml.presentation"
}
if(type_ == "pdf"){
var blob = new Blob([response.data], { type: that._type_ })
var href = window.URL.createObjectURL(blob); //创建下载的链接
window.open("/build/generic/web/viewer.html?file="+href);
}
})
最后
如果你想要的禁掉pdf文件的下载、打印等功能,最简单的方法是,找的自己导入文件里的viewer.html,路径为build下的generic文件夹下的web里的viewer.html,如下:
在这个html里找到对应下载的dom直接display:none就可以,切记不可以注掉,注掉会报错。如下,红色框中,一个是下载一个是打印,直接隐藏就可以。
如果有人问这样也不安全,那可以和客户商量不在页面展示,因为只要页面可以看到的东西,截屏也可以截下来,注定是不安全的。
来源:https://www.cnblogs.com/lisir-blogshare/p/15710769.html
猜你喜欢
- 1. 取键:keys()方法#spyderbb={'人才/可怕':23,'伏地魔&波特':'
- 很多的网站都有记数器,用来记录网站的访问量,这给网站管理员即时了解本网站的运行及访问情况提供了很多的方便。笔者研究过很多用ASP编写的计数器
- 导读:最近数据库经常出现会话阻塞的报警,过一会又会自动消失,昨天晚上恰好发生了一次,于是赶紧进行了查看,不看不知道,一看吓一跳,发现是由da
- 根据微软论坛作者的英文解释,.NET framework 4.0 安装失败回滚貌似是因为“msvcr100_clr0400.d
- 远程调用使得调用远程服务器的对象、方法的方式就和调用本地对象、方法的方式差不多,因为我们通过网络编程把这些都隐藏起来了。远程调用是分布式系统
- 随着网页技术的发展,网络视觉设计与之前以程序员为主导的审美特征相比,具有了极大的改观。同时,随着美术、音乐、舞蹈人才的加入,网络开始在这一社
- 关于NaN值-在能够使用大型数据集训练学习算法之前,我们通常需要先清理数据, 也就是说,我们需要通过某个方法检测并更正数据中的错误。 - 任
- /** * 递归法实现的快速排序 * @param $seq * @return array */f
- 通过学习私有函数与私有变量,可以更好的完善 类的开发 ,从而丰满我们的场景与实现方案。什么是私有函数和私有变量私有函数与私有变量中的私有是什
- 具体方法:1使用panda read_excel 方法加载excel2使用concat将DataFrame列表进行拼接3然后使用pd.Exc
- 一、什么是jieba库jieba是优秀的中文分词第三方库,由于中文文本之间每个汉字都是连续书写的,我们需要通过特定的手段来获得其中的每个词组
- 介绍RANGE分区基于一个给定的连续区间范围,早期版本RANGE主要是基于整数的分区。在5.7版本中DATE、DATETIME列也可以使用R
- Djangos 内置的模板加载器(在先前的模板加载内幕章节有叙述)通常会满足你的所有的模板加载需求,但是如果你有特殊的加载需求的话,编写自己
- Go操作MySQL安装: go get -u github.com/go-sql-driver/mysqlGO语言的操作数据库的驱动原生支持
- 我就废话不多说了,直接上代码吧!def _int_iter(): """根据回文数的定义。首先生成
- 细心的人都会发现GitHub个人主页有一个记录每天贡献次数的面板,我暂且称之为贡献面板。就像下图那个样子。只要当天在GitHub有提交记录,
- 1. mysql_where子句_聚合函数# ### part 单表查询""" select ... from
- 前言在python列表的元素删除操作中, del, pop(), remove()很容易混淆, 下面对三个语句/方法作出解释del语句del
- 本文的爬虫教程分为四部: 1.从哪爬 where &nbs
- 本文实例讲述了Python实现计算两个时间之间相差天数的方法。分享给大家供大家参考,具体如下:#-*- encoding:UTF-8 -*-