vue查看pdf，禁止复制文字，禁止页面右击，禁用F12

1、 问题

最近在做公司项目的时候，客户提出一个好玩的业务问题，禁止用户打印、复制、下载他们的pdf文件，只能进行在线查看，因为这些pdf文件可能是机密的。很好奇查看的时候截图会不会泄密…

2、解决方案

于是去网上刨地三尺，发现pdf.js和vue-pdf都可以实现，但是pdf.js似乎有副作用，于是就决定开始入坑vue-pdf组件…

这是github地址：/FranckFreiburger/vue-pdf#readme， 有需要的小伙伴可以自行下载；

好了，废话不多说，直接上代码

<template><div class="pdf"><pdf :src="src" :page="currentPage" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" class="pdf-set"></pdf><div><span class="span-clas">{{currentPage}} / {{pageCount}}</span> //页码<Button-group shape="circle" class="button-group">//翻页按钮<Button type="primary" @click="change1"><Icon type="chevron-left"></Icon>上一页</Button><Button type="primary" @click="change2">下一页<Icon type="chevron-right"></Icon></Button></Button-group></div></div></template><script>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() {// 禁用鼠标右击、F12document.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 < this.pageCount){this.currentPage++}}}}</script><style scoped>.pdf .pdf-set{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;}</style>

注意：引入组件之后，需要cnpm install一下;这里的name就是pdf文件的名字: xxx.pdf

害怕泄露机密文件，故不再此展示效果图…