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-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.net/melodystars/article/details/107794478，完美解决禁止下载，禁止复印，禁止另存，啊 真香