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

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