IE浏览器PDF展示，禁止下载，禁止打印，禁止另存，禁止复制完美解决

1，IE浏览器下使用PDFObject，需求是只能预览不能下载不能另存及打印和复制，

 <template><div id="ensur"></div>
</template>

const { PDFObject } =require('../../../assets/js/PDFObject/pdfobject.js')

    var options = {height: "1000px",pdfOpenParams: { scrollbars: '0', toolbar: '0', statusbar: '0'}              //禁用工具栏代}PDFObject.embed(this.filepath, "#ensur",options);

当时做完以后，那个禁用工具大概意思就是把浏览器自带的下载打印按钮给变成透明，来达成一个效果，不过不可用，右击另存还是能下载和打印。火狐浏览器PDF打开是白色的，变透明就无效了，更不能用，IE就不用说了直接白屏，内心一片崩溃。

接下来就是网上一顿狂搜就看到了vue-pdf，第一先下载，第二在引入

npm install --save vue-pdf@4.2.0

我用的是固定版本，因为不固定版本就一直报错没有ES5文件，每天一个坑，坑坑不一样啊

import Pdf from 'vue-pdf'

  <div class="pdf"><el-tabs @tab-click="handleClick" type="border-card"><el-tab-panelabel="全部加载"v-loading="loading"element-loading-text="加载中"><Pdfref="pdf"v-for="i in pdfTotal":key="i":src="pdfSrc":page="i"@page-loaded="handlePdfLoaded"></Pdf></el-tab-pane><el-tab-pane label="单页加载"><div class="single"><div class="bar"><el-tooltipclass="item"effect="dark"content="上一页"placement="top"><i@click="handleLastPage"class="el-icon-back":class="{ disable: pdfNum === 1 }"></i></el-tooltip><el-tooltipclass="item"effect="dark"content="逆时针"placement="top"><i@click="handleReverseRotate"class="el-icon-refresh-left"></i></el-tooltip><span>{{ pdfNum }}/{{ pdfTotal }}</span><el-tooltipclass="item"effect="dark"content="顺时针"placement="top"><i @click="handleAlongRotate" class="el-icon-refresh-right"></i></el-tooltip><el-tooltipclass="item"effect="dark"content="下一页"placement="top"><i@click="handleNextPage"class="el-icon-right":class="{ disable: pdfNum === pdfTotal }"></i></el-tooltip></div><Pdf:src="pdfSrc":page="pdfNum":rotate="pdfRotate"@num-pages="pdfTotal = $event"@page-loaded="pdfNum = $event"></Pdf></div></el-tab-pane></el-tabs></div>

export default {name: 'pdf',created() {this.postCompanylists()},mounted() {this.loading = true// 创建PDF加载任务this.prohibit()},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}}},postCompanylists() {此处是接口if (result.data.msg == 200) {this.pdfSrc = result.data.obj.filepaththis.pdfSrc = Pdf.createLoadingTask(this.pdfSrc)this.handlePdfTask(this.pdfSrc)}},handleLastPage() {if (this.pdfNum > 1) {this.pdfNum--}},// 下一页handleNextPage() {if (this.pdfNum < this.pdfTotal) {this.pdfNum++}},// 顺时针旋转handleAlongRotate() {this.pdfRotate += 90},// 逆时针旋转handleReverseRotate() {this.pdfRotate -= 90},// 加载handlePdfLoaded(e) {if (e === this.pdfTotal) {this.$nextTick(() => {setTimeout(() => {this.loading = false}, 500)})}},handlePdfTask(task) {task.promise.then(Pdf => {this.pdfTotal = Pdf.numPages}).catch(err => {console.error('pdf 加载失败', err)})},handleClick(tab) {if (tab.label === '单页加载') {this.pdfNum = 1}}},data() {return {id: this.$route.params.id,//filepath: '',loading: true,pdfSrc: '',pdfTotal: 1, // pdf总页数pdfNum: 1, // 当前页pdfRotate: 0 // 旋转角度}}
}
</script>

<style lang="less" scoped>
#ensur {width: 1155px;margin-top: 10px;
}
// 导航条
.qianxian15 {width: 1155px;display: flex;height: 33px;background: url(1.jpg) no-repeat;background-size: 100%;img {height: 21px;margin: 7px 10px 10px 30px;}.qianxian1_2 {color: #7d7d7d;padding-left: 7px;width: 890px;height: 33px;font-size: 16px;font-weight: bold;line-height: 33px;}
}
.pdf {width: 1155px;.single {width: 100%;.bar {display: flex;align-items: center;justify-content: space-around;width: 100%;font-size: 24px;color: cornflowerblue;z-index: 1;> i {cursor: pointer;}> .disable {cursor: not-allowed;color: gray;}}}
}
.pdf {.el-tabs {min-height: 100vh;}.el-loading-mask {position: fixed;overflow: hidden;}
}
</style>

我借鉴的 https://blog.csdn.net/melodystars/article/details/107794478，完美解决禁止下载，禁止复印，禁止另存，啊真香

IE浏览器PDF展示，禁止下载，禁止打印，禁止另存，禁止复制完美解决相关推荐

pdf.js使用说明及禁止下载，打印
PdfJS使用的一些说明参考:https://blog.csdn.net/qubernet/article/details/82599613?utm_medium=distribute.pc_rel ...
iframe预览pdf，隐藏下载和打印按钮的解决方案
直接在嵌入的地址后面加'#toolbar=0'就可以完美解决,至少在goole浏览器上兼容 <iframeid="iframe":src="pdfUrl+'#too ...
Chrome浏览器提示 adobe flash player 已过期的问题，反复提示完美解决
新用户在安装了Chrome浏览器或者更新过的的时候,经常提示 adobe flash player 已过期的问题,反复提示,从网上也找了很多办法都没有解决.这里给大家提供一个最完美的解决方案.经亲自测 ...
Devexpress PdfViewer预览pdf，禁止下载，打印，复制
PDFviewer控件: 参数设置: 1.屏蔽书签栏和右键菜单 2.加载文档支持路径以及流stream加载的方式 1 pdfViewer.MenuManager.DisposeManager(); 2 ...
360浏览器一直显示安全连接到服务器,360浏览器提示“您与此网站之间建立的连接不安全完美解决方法...
如果您是该网站的访客,请注意不要在该网站上输入任何敏感信息,更不要在线进行任何购买等交易,因为正规的网上商城网站都会使用 https 加密连接来保护用户的信息安全. 安装了SSL证书的网站,好处很多, ...
使用pdf.js将PDF嵌入HTML网页中,并禁止下载打印
有的项目需要显示PDF类的文档, 大多需要在项目中禁止将PDF打印, 下载我最初采用embed标签显示 PDF, iframe,object标签都可以显示但是这类标签的打印和下载按钮不可以禁止, ...
vue-cli使用pdf.js插件浏览pdf文件，禁止下载打印复制粘贴。
很多项目中都会有预览pdf文件,普通的可以直接使用a标签来实现该功能,但是此预览是浏览器自带的,有时候项目需求中会有禁止用户禁止下载和打印功能,浏览器自带的是无法满足的. 小编在网上找到pdf.js插 ...
pdf.js禁止下载功能
大家在使用pdf的时候如果用普通的方法使用是没有办法禁止下载,打印之类的功能的,所以就用到了pdf而且这个插件功能相当强大,还可以直接复制粘贴pdf内的内容,有兴趣的朋友看下PDF.js实际运行起来的 ...
html5的video播放器上禁止下载和禁止右键下载实现。
<video id="video" src="#" controls controlsList="nodownload" oncont ...

IE浏览器PDF展示，禁止下载，禁止打印，禁止另存，禁止复制完美解决

IE浏览器PDF展示，禁止下载，禁止打印，禁止另存，禁止复制完美解决相关推荐

最新文章

热门文章