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

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

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

  • 7
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值