|
vue查看pdf，禁止复制文字，禁止页面右击，禁用F12
1、 问题2、解决方案
1、 问题
最近在做公司项目的时候，客户提出一个好玩的业务问题，禁止用户打印、复制、下载他们的pdf文件，只能进行在线查看，因为这些pdf文件可能是机密的。很好奇查看的时候截图会不会泄密…
2、解决方案
于是去网上刨地三尺，发现pdf.js和vue-pdf都可以实现，但是pdf.js似乎有副作用，于是就决定开始入坑vue-pdf组件… 这是github地址：https://github.com/FranckFreiburger/vue-pdf#readme， 有需要的小伙伴可以自行下载； 好了，废话不多说，直接上代码
{{currentPage}} / {{pageCount}} //页码
//翻页按钮
上一页
下一页
import pdf from 'vue-pdf' //引入组件
export default {
created() {
this.name = this.$route.query.name;
this.init();
this.prohibit();
},
data(){
return{
name: '',
src:'./static/', //此处在本地需要把pdf文件放入static文件夹下面，线上可以放入别的可访问的文件夹即可
currentPage: 1,
pageCount: 1,
}
},
components: {
pdf
},
methods:{
prohibit() { // 禁用鼠标右击、F12
document.oncontextmenu = function(){
return false;
}
document.onkeydown = function(e) {
if (e.ctrlKey && (e.keyCode === 65 || e.keyCode === 67 || e.keyCode === 73 || e.keyCode === 74 || e.keyCode === 80 || e.keyCode === 83 || e.keyCode === 85 || e.keyCode === 86 || e.keyCode === 117)) {
return false;
}
if(e.keyCode==18||e.keyCode==123){
return false
}
};
},
init() {
this.src += this.name;
},
change1(){
if(this.currentPage>1){
this.currentPage--
}
},
change2(){
if(this.currentPage
display: inline-block;
text-align: center;
width:60%;
}
.pdf .button-group{
position: absolute;
bottom: -60%;
left: 78%;
}
.pdf .span-clas{
position: absolute;
bottom: -59.2%;
left: 75%;
font-size: 20px;
line-height: 20px;
display: inline-block;
}
注意：
引入组件之后，需要cnpm install一下;
这里的name就是pdf文件的名字: xxx.pdf
害怕泄露机密文件，故不再此展示效果图…
|