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() { // 禁用鼠标右击、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

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

vue查看pdf，禁止复制文字，禁止页面鼠标右击，禁用F12相关推荐

html页面禁止右键、禁止复制、禁止图片拖动、禁止复制和剪切禁止IOS长按复制粘贴实现
html实现页面禁止右键禁止复制禁止图片拖动禁止复制和剪切众所周知,一般的屏蔽的方法是用JS来编写的脚本,但是也可以直接通过修改网页属性的方法来屏蔽右键禁止复制. 禁止右键oncontex ...
谷歌浏览器复制禁止复制文字网页上的文字
1,在你要复制文字的页面,按F12,选择" Console" 输入:document.body.innerText 然后按回车
解决网页禁止复制，禁止右键。
以chrome谷歌浏览器为例: 1.第一步:点击F12查看网页源代码,再按F1,出现设置,勾选上Disable JavaScript 因为网页禁止复制,禁止右键由js来控制的.禁用js代码即可. 2. ...
PDF：解决从PDF中复制文字时出现的空方框问题
PDF:解决从PDF中复制文字时出现的空方框问题目录解决问题解决思路解决问题解决从PDF中复制文字时出现的空方框问题解决思路将该pdf文档另存为html格式,然后打开html文件,复制文 ...
防止别人查看html代码,网页防采集/禁止复制粘贴/禁止F12查看的方法
方法一:温柔对话框提示法 function click(){ alert('禁止你的左键复制!') }function click1(){if(event.button==2) {alert('禁止右 ...
如何禁止复制文字和下载图片
<body οnmοusemοve=HideMenu() οncοntextmenu="return false" οndragstart="return fals ...
html屏蔽右键、禁止复制与禁止查看源代码
如何在网页中屏蔽右键众所周知,要保护一个页面,最基础的就是要屏蔽右键.而现在网页上用得最多的是function click(),即下面这段代码 ...
html实现页面禁止右键禁止复制禁止图片拖动禁止复制和剪切
众所周知,一般的屏蔽的方法是用JS来编写的脚本,但是也可以直接通过修改网页属性的方法来屏蔽右键禁止复制. 禁止右键 οncοntextmenu="return false" 禁止 ...
Chrome下如何复制禁止复制网页上的文字
上网或工作的时候,看到一些文章大家可能想复制或是收藏起来,但是当你要复制的时候却发现,根本复制不了,被网站做复制限制了,右键也给禁了.这可怎么办呢?正所谓,万物皆可破,在这里给大家介绍一个简单的方法, ...

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

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

1、问题

2、解决方案

vue查看pdf，禁止复制文字，禁止页面鼠标右击，禁用F12相关推荐

最新文章

热门文章

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

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

1、 问题

2、解决方案

vue查看pdf，禁止复制文字，禁止页面鼠标右击，禁用F12相关推荐

最新文章

热门文章

1、问题