526互联

去除iframe下载和打印

发布时间 2023-11-03 14:04:33作者: 张哲Zeo

最近项目开发中，有需求提出去除浏览器浏览PDF时的打印和下载按钮，网上查询后，大多是使用了第三方插件pdf.js，而本人也是用此插件实现了。

但是甲方还是希望保持浏览器自带的浏览，于是我又想办法进行处理，最终从元素覆盖 下载和打印 按钮 的方式来进行处理。

基本思路：使用定位覆盖 + 根据浏览器中的工具栏布局，自己在写一套覆盖到上面，这样网页改变时，同样能做到自适应 +  load事件监听，可添加loading层优化体验

<template>
    <div class="pdfcontainer">
        <div class="toolbar" v-if="toolShow && type=='pdf'">
            <div class="start"></div>
            <div class="center"></div>
            <div class="end"></div>
        </div>
        <iframe :id="id" style="width: 100%;height: 100%;" :src="src"></iframe>
    </div>
</template>
<script>
export default {
    name: "PdfIframe",
    props: {
        src: {
            type: String,
            default: ""
        }, 
        id: {
            type: String,
            deafault: "myiframe"
        },
        type: {
            type: String,
            default: "web"
        }
    },
    data(){
        return {
            toolShow: false
        }
    },
    mounted(){
        let iframe = document.getElementById(this.id)
        iframe.addEventListener("load", this.iframLoaded)
    },
    methods: {
        iframLoaded(){
            this.toolShow = true
            this.$emit("onload")
        }
    },
    beforeDestroy(){
        let iframe = document.getElementById(this.id)
        iframe.removeEventListener("load", this.iframLoaded)
    }

}
</script>
<style scoped>
.pdfcontainer{
    position: relative;
}
.toolbar{
    display: flex;
    padding: 0 16px;
    width: 100%;
    height: 45px;
    position: absolute;
    left: 0;
    top: 5px;
    pointer-events: none;
}
.start{
    flex: 1;
}
.center{
    width: 289px;
}
.end{
    flex: 1;
    pointer-events: all;
    background: #323639;
}
@media (max-width: 600px){ 
    .center{
        width: 240px;
    }
}
@media (max-width: 530px){ 
    .start {
        display: none;
    }
    .center{
        width: 190px;
    }
}
@media (max-width: 420px){
    .start, .center {
        display: none;
    }
}
</style>