admin管理员组文章数量:1567446
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-pane
label="全部加载"
v-loading="loading"
element-loading-text="加载中"
>
<Pdf
ref="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-tooltip
class="item"
effect="dark"
content="上一页"
placement="top"
>
<i
@click="handleLastPage"
class="el-icon-back"
:class="{ disable: pdfNum === 1 }"
></i>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="逆时针"
placement="top"
>
<i
@click="handleReverseRotate"
class="el-icon-refresh-left"
></i>
</el-tooltip>
<span>{{ pdfNum }}/{{ pdfTotal }}</span>
<el-tooltip
class="item"
effect="dark"
content="顺时针"
placement="top"
>
<i @click="handleAlongRotate" class="el-icon-refresh-right"></i>
</el-tooltip>
<el-tooltip
class="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() {
// 禁用鼠标右击、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
}
}
},
postCompanylists() {
此处是接口
if (result.data.msg == 200) {
this.pdfSrc = result.data.obj.filepath
this.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/melodystars/article/details/107794478,完美解决禁止下载,禁止复印,禁止另存,啊 真香
版权声明:本文标题:IE浏览器PDF展示,禁止下载,禁止打印,禁止另存,禁止复制完美解决 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1726425649a1070338.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论