vue查看pdf，禁止複製文字，禁止頁面鼠標右擊，禁用F12

1、 問題

最近在做公司項目的時候，客戶提出一個好玩的業務問題，禁止用戶打印、複製、下載他們的pdf文件，只能進行在線查看，因爲這些pdf文件可能是機密的。很好奇查看的時候截圖會不會泄密…

2、解決方案

於是去網上刨地三尺，發現pdf.js和vue-pdf都可以實現，但是pdf.js似乎有副作用，於是就決定開始入坑vue-pdf組件…
這是github地址：https://github.com/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() {	// 禁用鼠標右擊、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 < 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

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