vue-cli使用pdf.js插件浏览pdf文件,禁止下载打印复制粘贴。

news/2024/7/19 13:44:31 标签: javascript, js, vue.js

很多项目中都会有预览pdf文件,普通的可以直接使用a标签来实现该功能,但是此预览是浏览器自带的,有时候项目需求中会有禁止用户禁止下载和打印功能,浏览器自带的是无法满足的。
小编在网上找到pdf.js插件,pdf.js插件是可以满足此功能的。
pdf.js插件下载地址

此文件没有太多的专业术语,简单的话让大家快速了解
首先肯定是导入插件,我是从官网直接下载,小编是放在放在public文件目录下
在这里插入图片描述
导入插件后就是使用插件了,在自己需要使用的页面用a标签使用
使用a标签链接到pdf.<a class=js文件里面的viewer.html,file引入自己的pdf文件,小编这里是用拼接方式引入的" />
到这里基本上就大功告成了(小编这里有遇见一个问题,小编使用的查找绝对路径的方式@/…/public/build/generic/web/viewer.html去查找的),这里说明一下没有必要,直接/build/generic/web/viewer.html就可以了,会自动匹配到该文件的
看下成功的效果
大家在右上角是可以看到有下载和打印按钮的

在这里插入图片描述
打开控制台,大家可以看到有下载打印的按钮
在这里插入图片描述
想要禁止它的话我们打开viewer.html文件,我们可以直接注释掉就行了,小编是用css来控制的
在这里插入图片描述
css控制,打开viewer.css文件,直接把自己不需要的控件隐藏就可以了
在这里插入图片描述
看下效果
在这里插入图片描述

禁止赋值粘贴也很简单的,打开viewer.html,在body上加上下面代码就可以了
在这里插入图片描述
leftmargin=“0”
οncοntextmenu=“return false”
οndragstart=“return false”
onselectstart=“return false”
οnselect=“document.selection.empty()” οncοpy=“document.selection.empty()”
onbeforecopy=“return false”
οnmοuseup=“document.selection.empty()”

有不懂的请在评论区留言


http://www.niftyadmin.cn/n/1562815.html

相关文章

Python3与OpenCV3.3 图像处理(十一)--图像直方图

一、什么是图像直方图 由于其计算代价较小,且具有图像平移、旋转、缩放不变性等众多优点,广泛地应用于图像处理的各个领域,特别是灰度图像的阈值分割、基于颜色的图像检索以及图像分类。 二、应用范围 图像主题内容与背景分离、图像分类、检索等 三、示例 注意:编写代码前需…

实数比较

版权声明&#xff1a;您好&#xff0c;转载请留下本人博客的地址&#xff0c;谢谢 https://blog.csdn.net/hongbochen1223/article/details/44811681 要求用户输入两个实数&#xff0c;程序通过比较之后&#xff0c;输出最大的数。 在这里学习到了三目运算符。 #include <s…

js将数组转字符,字符转回数组

js将数组转字符&#xff0c;字符转回数组 在项目中碰见一个问题&#xff0c;jq传参时只识别字符&#xff0c;但是我们要将数组传过去。可以先将数组转换为字符&#xff0c;传过去后在转为数组。 数组转字符 使用JSON.stringify() console的结果 字符转换回数组 使用JSON.pa…

Python3与OpenCV3.3 图像处理(十二)--图像直方图应用

一、调节对比度 import cv2 as cvdef equalHist(image):"""直方图均衡化,图像增强的一个方法"""#彩色图片转换为灰度图片gray=cv.cvtColor(image,cv.COLOR_BGR2GRAY)#直方图均衡化,自动调整图像的对比度,让图像变得清晰dst=cv.equalizeHist(g…

D3.js area函数

2019独角兽企业重金招聘Python工程师标准>>> var area d3.svg.area().interpolate("monotone").x(function(d) { return x(d.date); }).y0(260).y1(function(d) { return y(d.price); });//.x()数据点在x轴的坐标d.date//.y1数据点在y轴的坐标d.price,这…

vue 给placeholder绑定动态变量

placeholder前加&#xff1a;就可以了&#xff0c;后面是变量

Python3与OpenCV3.3 图像处理(十三)--反射投影

一、什么是反射投影 简单的说就是通过给定的直方图信息,在图像找到相应的像素分布区域 二、反射投影的应用 物体跟踪、定位物体等 三、示例代码 import cv2 as cv import numpy as np from matplotlib import pyplot as pltdef hist2d(image):"""2d 直方图计算…

UITableView汇总

1.声明数据源数组&#xff0c;声明全局的TableView NSMutableArray *_dataArray; UITableView *_tableView; 2.实例化_tableView 遵守协议<UITableViewDeleate,UITableViewDataSoure> _tableView [[UITableView alloc] initWithFrame:CGRectMake(0,0,320,460)]; _tableV…