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
猜你喜欢
- 前言:Python 中的画图工具——turtle(海龟绘图),turtle 是 Python 中自带
- 不同于行级或页级锁定的选项:· 版本(例如,为并行的插入在MySQL中使用的技术),其中可以一个写操作,同时有许多读取操作。这明数据库或表支
- 前言针对一些特殊的需求,在项目里,需要将响应式数据变为普通原始类型数据,这种情况是有的在Vue里,能够将普通数据类型的数据变为响应式数据,同
- -- SQL Server 2000 SELECT a.name AS 字段名, CASE WHEN EXISTS (SELECT 1 FR
- 今天网页调试的时候在线订单出现错误:Server 对象 错误 'ASP 0178
- 问题:Python2获取包含中文的文件名是如果不转码会出现乱码。这里假设要测试的文件夹名为test,文件夹下有5个文件名包含中文的文件分别为
- 一、线程池简介传统多线程方案会使用“即时创建,即时销毁”的策略。尽管与创建进程相比,创建线程的时间已
- 这个问题让我查了许多天才解决,为了避免后面的人重复走弯路,记录下来。问题描述:我在ubuntu 下编译安装了caffe ,在命令行模式下可以
- 第一步在你的需要全文搜索的列上点击 全文搜索full text类型索引,注意我的例子是该列是个longText类型的列第一步建立fullte
- ROW_NUMBER()说明:返回结果集分区内行的序列号,每个分区的第一行从 1 开始。语法:ROW_NUMBER () OVER ( [
- python-pymysql获取字段名称-获取内容获取字段名称-获取内容import pymysql# 连接数据库db = pymysql.
- 本脚本为本人在性能测试过程中编写,用于对进程状态的监控,也可以用于日常的监控,适用性一般,扩展性还行# -*- coding: UTF-8
- Mac 下 Flask 框架 workon命令找不到 ---- 最终解决方案(详解具体实现操作过程中遇到的坑)2018年08月17日 00:
- .sh脚本可以自动运行多次实验。Windows系统下实现pycharm运行.sh文件1、安装GitGit官网下载或者点击这里下载默认设置安装
- python实现学生信息管理系统,供大家参考,具体内容如下#!/usr/bin/env python# -*- coding:utf-8 -
- 打开终端 切换到根目录 [shell@localhost ~]# su -安装Mysql5.5之前先卸载CentOS自带的Mysql5.0。
- 本文实例讲述了PHP利用func_get_args和func_num_args函数实现函数重载的方法。分享给大家供大家参考。具体方法分析如下
- 本文介绍了4个asp数据库管理中常用到的access数据库操作程序,一般的网站管理后台都提供了这个功能,方便管理员对数据库数据的管理维护。1
- 数据库事务-锁机制1.什么是锁锁,其实就是一个内存种的结构,在事务还没有来之前是没有锁存在的。在事务未开始前只有一条记录,是没有锁和记录之间
- 本文主要是对flask中的before_request与after_request用法做一个简单的分析,具体实例和介绍如下。使用before