From 3cc084933b6e76fd9991561a175aa464a8313536 Mon Sep 17 00:00:00 2001
From: linfso <linfso@sina.com>
Date: Fri, 31 May 2024 18:15:03 +0800
Subject: [PATCH] md

---
 src/components/PdfViewer/pdfview_html.vue | 317 +++++++++++++++++++
 src/components/PdfViewer/tmp.vue          | 359 +++++++++++++++++++++
 src/components/PdfViewer/viewer.vue       | 360 ++++++++++++++++++++++
 3 files changed, 1036 insertions(+)
 create mode 100644 src/components/PdfViewer/pdfview_html.vue
 create mode 100644 src/components/PdfViewer/tmp.vue
 create mode 100644 src/components/PdfViewer/viewer.vue

diff --git a/src/components/PdfViewer/pdfview_html.vue b/src/components/PdfViewer/pdfview_html.vue
new file mode 100644
index 00000000..79d732d0
--- /dev/null
+++ b/src/components/PdfViewer/pdfview_html.vue
@@ -0,0 +1,317 @@
+<template>
+  <div id="container">
+      <div class="tools">
+        <!-- <el-button type="text" @click="FirstPage()">
+            <el-tooltip class="item" effect="light" content="第一页" placement="top">
+                <i class="el-icon-d-arrow-left"></i>
+            </el-tooltip>
+        </el-button>
+        <el-button type="text" @click="changePdfPage(0)">
+            <el-tooltip class="item" effect="light" content="上一页" placement="top">
+                <i class="el-icon-arrow-left"></i>
+            </el-tooltip>
+        </el-button>
+        <el-button type="text" @click="changePdfPage(1)">
+            <el-tooltip class="item" effect="light" content="下一页" placement="top">
+                <i class="el-icon-arrow-right"></i>
+            </el-tooltip>
+        </el-button>
+        <el-button type="text" @click="lastPage()">
+            <el-tooltip class="item" effect="light" content="最后一页" placement="top">
+                <i class="el-icon-d-arrow-right"></i>
+            </el-tooltip>
+        </el-button>
+        <el-button type="text" @click="setIsExit()" v-show="!isExit" style="margin-right:10px;">
+            <el-tooltip class="item" effect="light" content="页码选择" placement="top">
+                <i class="el-icon-setting"></i>
+            </el-tooltip>
+        </el-button>
+        <el-tooltip class="item" effect="light" content="页码选择" placement="top" v-show="isExit">
+            <el-select v-model="value" placeholder="请选择" @change="pageSelect" size="mini">
+                <el-option v-for="item in pageCount" :key="item" :label="'第 '+item+' 页'" :value="item"></el-option>
+            </el-select>
+        </el-tooltip>
+        <el-button type="text" @click="scaleD()">
+            <el-tooltip class="item" effect="light" content="放大" placement="top">
+                <i class="el-icon-zoom-in"></i>
+            </el-tooltip>
+        </el-button>
+        <el-button type="text" @click="scaleX()">
+            <el-tooltip class="item" effect="light" content="缩小" placement="top">
+                <i class="el-icon-zoom-out"></i>
+            </el-tooltip>
+        </el-button>
+        <el-button type="text" @click="clock()">
+            <el-tooltip class="item" effect="light" content="顺时针旋转" placement="top">
+                <i class="el-icon-refresh-right"></i>
+            </el-tooltip>
+        </el-button>
+        <el-button type="text" @click="counterClock()">
+            <el-tooltip class="item" effect="light" content="逆时针旋转" placement="top">
+                <i class="el-icon-refresh-left"></i>
+            </el-tooltip>
+        </el-button> -->
+        <div style="width:100%;text-align: right;">
+          <el-button type="text" @click="downPDF">
+            <el-tooltip class="item" effect="light" content="下载" placement="top">
+                <i class="el-icon-download"></i>
+            </el-tooltip>
+          </el-button>
+          <el-button type="text" @click="printPDF">
+              <el-tooltip class="item" effect="light" content="打印" placement="top">
+                  <i class="el-icon-printer"></i>
+              </el-tooltip>
+          </el-button>
+        </div>
+
+        <!-- <p class="total">
+            <el-tooltip class="item" effect="light" content="当前页" placement="top">
+                <b style="color:#F56C6C;cursor:pointer;">{{ currentPage }}</b> </el-tooltip>&nbsp;/&nbsp;
+            <el-tooltip class="item" effect="light" content="总页数" placement="top">
+                <b style="color:#67C23A;cursor:pointer;">{{ pageCount }}</b></el-tooltip>
+        </p> -->
+      </div>
+      <div class="main">
+        <!-- <div class="pdfview"> -->
+          <!-- <pdf
+          v-for="i in pageCount" :key="i"
+            ref="pdf" id="pdf"
+            :page="i"
+            :src="pdfLoadUrl"
+            style="width: 100%;margin-bottom: 10px;"
+            @num-pages="currentPage=$event">
+          </pdf> -->
+        <!-- </div> -->
+        <iframe style="width: 100%; height: 100%;" :src="pdfLoadUrl" frameborder="0"></iframe>
+
+          <!-- <pdf ref="pdf" id="pdf" :src="src" :page="currentPage" :rotate="pageRotate" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" @loaded="loadPdfHandler"></pdf> -->
+      </div>
+  </div>
+</template>
+
+<script>
+import pdf from 'vue-pdf'
+
+export default {
+  name: "PdfViewer",
+  props: {
+    pdfUrl: {
+      type: [String],
+      required: false
+    },
+  },
+  components: {
+    pdf
+  },
+  computed: {
+  },
+  created () {
+  },
+  destroyed () {
+  },
+  mounted () {
+  },
+  data() {
+      return {
+          isExit: false,
+          value: 1,
+          src: this.pdfUrl,
+          pdfLoadUrl:null,
+          currentPage: 0,
+          pageCount: 0,
+          scale: 100,
+          pageRotate: 0
+      }
+  },
+  watch: {
+    pdfUrl(newVal) {
+        console.log(this.pdfUrl)
+        if(this.pdfUrl){
+          // this.src=this.pdfUrl;
+          this.pdfLoadUrl='/static/pdfjs/4.2.67/web/viewer.html?file=' + encodeURIComponent(this.pdfUrl)
+          console.log(this.pdfLoadUrl)
+        }
+      },
+  },
+  mounted () {
+    this.loadPdfHandler();
+  },
+  methods: {
+      async loadPdfHandler () {
+        console.log(this.pdfUrl)
+        this.pdfLoadUrl = pdf.createLoadingTask(this.pdfUrl);
+        console.log(this.pdfLoadUrl)
+        this.pdfLoadUrl.promise.then(pdf => {
+          this.pageCount = pdf.numPages
+          console.log(this.pageCount)
+        })
+      },
+
+     // pdf加载时
+      // loadPdfHandler() {
+      //     this.value = this.currentPage = 1 // 加载的时候先加载第一页
+      // },
+      // 第一页
+      FirstPage() {
+          this.value = this.currentPage = 1
+          this.isExit = false
+      },
+      // 最后一页
+      lastPage() {
+          this.value = this.currentPage = this.pageCount
+          this.isExit = false
+      },
+      // 改变PDF页码,val 传过来区分上一页下一页的值,0 上一页,1 下一页
+      changePdfPage(val) {
+          if (val === 0 && this.currentPage > 1) {
+              this.currentPage--
+          }
+          if (val === 1 && this.currentPage < this.pageCount) {
+              this.currentPage++
+          }
+          this.value = this.currentPage
+          this.isExit = false
+      },
+      // 页码选择
+      pageSelect() {
+          this.currentPage = this.value
+          this.isExit = false
+      },
+      // 控制下拉选择框显示隐藏
+      setIsExit() {
+          this.isExit = true
+      },
+      // 放大
+      scaleD() {
+          this.scale += 5
+          this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
+      },
+      // 缩小
+      scaleX() {
+          if (this.scale === 100) {
+              return
+          }
+          this.scale += -5
+          this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
+      },
+      // 顺时针
+      clock() {
+          this.pageRotate += 90
+      },
+      // 逆时针
+      counterClock() {
+          this.pageRotate -= 90
+      },
+      // 下载
+      downPDF() {
+          var url = this.src
+          var tempLink = document.createElement('a')
+          tempLink.style.display = 'none'
+          tempLink.href = url
+          tempLink.setAttribute('download', (new Date()).getTime()+'.pdf')
+          // console.log(typeof tempLink.download,11111);
+          if (typeof tempLink.download === 'undefined') {
+              tempLink.setAttribute('target', '_blank')
+          }
+          document.body.appendChild(tempLink)
+          tempLink.click()
+          document.body.removeChild(tempLink)
+      },
+      // 打印
+      printPDF() {
+          // this.$refs.pdf.print()
+          this.$emit("onPrint");
+
+      }
+  }
+}
+ // display: flex;
+  /* justify-content: center; */
+</script>
+
+<style lang="scss" scoped>
+#container {
+  overflow: auto;
+  height: 100%;
+
+  font-family: PingFang SC;
+  width: 100%;
+  position: relative;
+  background: #e9e9e9;
+}
+
+.main {
+    border: 2px solid #dcdfe6;
+    height: 100%;
+    width:100%;
+    overflow: auto;
+    // max-height: 1000px;
+}
+
+.pdfview {
+  height: 100%;
+  width:30%;
+  margin: 0 auto;
+}
+
+.tools {
+    display: flex;
+    background: #e1e1e1;
+    width: 100%;
+    z-index:9999;
+}
+
+.total {
+    width: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.main::-webkit-scrollbar {
+    width: 6px;
+}
+
+/* 修改 滚动条的 下面 的 样式 */
+.main::-webkit-scrollbar-track {
+    background-color: white;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+}
+
+/* 修改 滑块 */
+.main::-webkit-scrollbar-thumb {
+    background-color: #dcdfe6;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+}
+
+:deep .el-dialog {
+    height: 735px;
+    font-family: '楷体';
+}
+
+:deep .el-dialog__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #303133;
+}
+
+:deep .el-dialog__title,
+:deep .el-dialog__headerbtn .el-dialog__close {
+    color: white;
+}
+
+:deep .el-dialog__body {
+    padding: 20px;
+}
+
+:deep .el-select {
+    width: 95px;
+    height: 28px;
+    margin: 5px 20px 0px 20px;
+}
+</style>
diff --git a/src/components/PdfViewer/tmp.vue b/src/components/PdfViewer/tmp.vue
new file mode 100644
index 00000000..b9c297a8
--- /dev/null
+++ b/src/components/PdfViewer/tmp.vue
@@ -0,0 +1,359 @@
+<template>
+  <div id="container">
+      <div>
+        <div class="tools">
+          <el-button type="text" @click="FirstPage()">
+              <el-tooltip class="item" effect="light" content="第一页" placement="top">
+                  <i class="el-icon-d-arrow-left"></i>
+              </el-tooltip>
+          </el-button>
+          <el-button type="text" @click="changePdfPage(0)">
+              <el-tooltip class="item" effect="light" content="上一页" placement="top">
+                  <i class="el-icon-arrow-left"></i>
+              </el-tooltip>
+          </el-button>
+          <el-button type="text" @click="changePdfPage(1)">
+              <el-tooltip class="item" effect="light" content="下一页" placement="top">
+                  <i class="el-icon-arrow-right"></i>
+              </el-tooltip>
+          </el-button>
+          <el-button type="text" @click="lastPage()">
+              <el-tooltip class="item" effect="light" content="最后一页" placement="top">
+                  <i class="el-icon-d-arrow-right"></i>
+              </el-tooltip>
+          </el-button>
+          <el-button type="text" @click="setIsExit()" v-show="!isExit" style="margin-right:10px;">
+              <el-tooltip class="item" effect="light" content="页码选择" placement="top">
+                  <i class="el-icon-setting"></i>
+              </el-tooltip>
+          </el-button>
+          <el-tooltip class="item" effect="light" content="页码选择" placement="top" v-show="isExit">
+              <el-select v-model="value" placeholder="请选择" @change="pageSelect" size="mini">
+                  <el-option v-for="item in pageCount" :key="item" :label="'第 '+item+' 页'" :value="item"></el-option>
+              </el-select>
+          </el-tooltip>
+          <el-button type="text" @click="scaleD()">
+              <el-tooltip class="item" effect="light" content="放大" placement="top">
+                  <i class="el-icon-zoom-in"></i>
+              </el-tooltip>
+          </el-button>
+          <el-button type="text" @click="scaleX()">
+              <el-tooltip class="item" effect="light" content="缩小" placement="top">
+                  <i class="el-icon-zoom-out"></i>
+              </el-tooltip>
+          </el-button>
+          <el-button type="text" @click="clock()">
+              <el-tooltip class="item" effect="light" content="顺时针旋转" placement="top">
+                  <i class="el-icon-refresh-right"></i>
+              </el-tooltip>
+          </el-button>
+          <el-button type="text" @click="counterClock()">
+              <el-tooltip class="item" effect="light" content="逆时针旋转" placement="top">
+                  <i class="el-icon-refresh-left"></i>
+              </el-tooltip>
+          </el-button>
+          <el-button type="text" @click="downPDF">
+              <el-tooltip class="item" effect="light" content="下载" placement="top">
+                  <i class="el-icon-download"></i>
+              </el-tooltip>
+          </el-button>
+          <el-button type="text" @click="printPDF">
+              <el-tooltip class="item" effect="light" content="打印" placement="top">
+                  <i class="el-icon-printer"></i>
+              </el-tooltip>
+          </el-button>
+          <p class="total">
+              <el-tooltip class="item" effect="light" content="当前页" placement="top">
+                  <b style="color:#F56C6C;cursor:pointer;">{{ currentPage }}</b> </el-tooltip>&nbsp;/&nbsp;
+              <el-tooltip class="item" effect="light" content="总页数" placement="top">
+                  <b style="color:#67C23A;cursor:pointer;">{{ pageCount }}</b></el-tooltip>
+          </p>
+      </div>
+      <div class="main">
+          <pdf ref="pdf" id="pdf" :src="src" :page="currentPage" :rotate="pageRotate" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" @loaded="loadPdfHandler"></pdf>
+      </div>
+    </div>
+    <!-- 上一页、下一页 -->
+    <div class="right-btn">
+      <!-- 输入页码 -->
+      <div class="pageNum">
+        <input v-model.number="currentPage"
+               type="number"
+               class="inputNumber"
+               @input="inputEvent()"> / {{pageCount}}
+      </div>
+      <div @click="changePdfPage('first')"
+           class="turn">
+        首页
+      </div>
+	    <!-- 在按钮不符合条件时禁用 -->
+      <div @click="changePdfPage('pre')"
+           class="turn-btn"
+           :style="currentPage===1?'cursor: not-allowed;':''">
+        上一页
+      </div>
+      <div @click="changePdfPage('next')"
+           class="turn-btn"
+           :style="currentPage===pageCount?'cursor: not-allowed;':''">
+        下一页
+      </div>
+      <div @click="changePdfPage('last')"
+           class="turn">
+        尾页
+      </div>
+    </div>
+
+    <div class="pdfArea">
+      <pdf :src="src"
+           ref="pdf"
+           v-show="loadedRatio===1"
+           :page="currentPage"
+           @num-pages="pageCount=$event"
+           @progress="loadedRatio = $event"
+           @page-loaded="currentPage=$event"
+           @loaded="loadPdfHandler"
+           @link-clicked="currentPage = $event"
+           style="display: inline-block;width:100%"
+           id="pdfID"></pdf>
+    </div>
+    <!-- 加载未完成时，展示进度条组件并计算进度 -->
+    <div class="progress"
+         v-show="loadedRatio!==1">
+      <el-progress type="circle"
+                   :width="70"
+                   color="#53a7ff"
+                   :percentage="Math.floor(loadedRatio * 100)"></el-progress>
+      <br>
+      <!-- 加载提示语 -->
+      <span>{{remindShow}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import pdf from 'vue-pdf'
+
+export default {
+  name: "PdfViewer",
+  props: {
+    pdfUrl: {
+      type: [String],
+      required: false
+    },
+  },
+  components: {
+    pdf
+  },
+  computed: {
+  },
+  created () {
+    this.prohibit()
+  },
+  destroyed () {
+    // 在页面销毁时记得清空 setInterval
+    clearInterval(this.intervalID)
+  },
+  mounted () {
+    // 更改 loading 文字
+    this.intervalID = setInterval(() => {
+      this.remindShow === this.remindText.refresh
+        ? this.remindShow = this.remindText.loading
+        : this.remindShow = this.remindText.refresh
+    }, 4000)
+    // 监听滚动条事件
+    this.listenerFunction()
+  },
+  data () {
+    return {
+      // ----- loading -----
+      remindText: {
+        loading: '正在加载...',
+        refresh: '正在加载...'
+      },
+      remindShow: '正在加载...',
+      intervalID: '',
+      // ----- vuepdf -----
+      src: this.pdfUrl,
+      // 当前页数
+      currentPage: 0,
+      // 总页数
+      pageCount: 0,
+      // 加载进度
+      loadedRatio: 0
+    }
+  },
+  watch: {
+    pdfUrl(newVal) {
+        console.log(this.pdfUrl)
+        if(this.pdfUrl){
+          this.src=this.pdfUrl;
+        }
+      },
+  },
+  methods: {
+    // 监听滚动条事件
+    listenerFunction (e) {
+      // document.getElementById('container').addEventListener('scroll', true)
+    },
+    // 页面回到顶部
+    toTop () {
+      document.getElementById('container').scrollTop = 0
+    },
+    // 输入页码时校验
+    inputEvent () {
+      if (this.currentPage > this.pageCount) {
+        // 1. 大于max
+        this.currentPage = this.pageCount
+      } else if (this.currentPage < 1) {
+        // 2. 小于min
+        this.currentPage = 1
+      }
+    },
+    // 切换页数
+    changePdfPage (val) {
+      if (val === 'pre' && this.currentPage > 1) {
+        // 切换后页面回到顶部
+        this.currentPage--
+        this.toTop()
+      } else if (val === 'next' && this.currentPage < this.pageCount) {
+        this.currentPage++
+        this.toTop()
+      } else if (val === 'first') {
+        this.currentPage = 1
+        this.toTop()
+      } else if (val === 'last' && this.currentPage < this.pageCount) {
+        this.currentPage = this.pageCount
+        this.toTop()
+      }
+    },
+
+    // pdf加载时
+    loadPdfHandler (e) {
+      // 加载的时候先加载第一页
+      this.currentPage = 1
+    },
+
+    // 禁用鼠标右击、F12 来禁止打印和打开调试工具
+    prohibit () {
+      // console.log(document)
+      // 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
+      //   }
+      // }
+    }
+  }
+}
+</script>
+
+<style scoped>
+#container {
+  overflow: auto;
+  height: 100%;
+  font-family: PingFang SC;
+  width: 100%;
+  display: flex;
+  /* justify-content: center; */
+  position: relative;
+}
+
+/* 右侧功能按钮区 */
+.right-btn {
+  position: fixed;
+  right: 5%;
+  bottom: 15%;
+  width: 120px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  z-index: 99;
+}
+
+.pdfArea {
+  width: 50%;
+}
+
+/* ------------------- 输入页码 ------------------- */
+.pageNum {
+  margin: 10px 0;
+  font-size: 18px;
+}
+/*在谷歌下移除input[number]的上下箭头*/
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+  margin: 0;
+}
+/*在firefox下移除input[number]的上下箭头*/
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+.inputNumber {
+  border-radius: 8px;
+  border: 1px solid #999999;
+  height: 35px;
+  font-size: 18px;
+  width: 60px;
+  text-align: center;
+}
+.inputNumber:focus {
+  border: 1px solid #00aeff;
+  background-color: rgba(18, 163, 230, 0.096);
+  outline: none;
+  transition: 0.2s;
+}
+
+/* ------------------- 切换页码 ------------------- */
+.turn {
+  background-color: #888888;
+  opacity: 0.7;
+  color: #ffffff;
+  height: 70px;
+  width: 70px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 5px 0;
+}
+
+.turn-btn {
+  background-color: #000000;
+  opacity: 0.6;
+  color: #ffffff;
+  height: 70px;
+  width: 70px;
+  border-radius: 50%;
+  margin: 5px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.turn-btn:hover,
+.turn:hover {
+  transition: 0.3s;
+  opacity: 0.5;
+  cursor: pointer;
+}
+
+/* ------------------- 进度条 ------------------- */
+.progress {
+  position: absolute;
+  right: 50%;
+  top: 50%;
+  text-align: center;
+}
+.progress > span {
+  color: #199edb;
+  font-size: 14px;
+}
+</style>
+
diff --git a/src/components/PdfViewer/viewer.vue b/src/components/PdfViewer/viewer.vue
new file mode 100644
index 00000000..bd5896ab
--- /dev/null
+++ b/src/components/PdfViewer/viewer.vue
@@ -0,0 +1,360 @@
+<template>
+  <!-- v-if="pdfUrl" -->
+  <div class="pdf-viewer grid2" >
+    <div style="position: relative;">
+      <div class="pdf-bar">
+        <div class="zoom-minus" @click="zoomIn">
+          <i class="el-icon-minus" title="缩小"></i>
+        </div>
+        <div class="scale" >
+          <el-input v-model.number="scale" size="mini" @keyup.enter.native="setScaleValue">
+            <template slot="append">%</template>
+          </el-input>
+        </div>
+        <div class="zoom-plus" @click="zoomOut">
+          <i class="el-icon-plus" title="放大"></i>
+        </div>
+        <div class="prev" @click="preFile">
+          上一页
+        </div>
+        <div class="page">
+          <el-input-number
+            v-model.number="currentNum"
+            :min="0"
+            :max="fileCount"
+            size="mini"
+          />
+        </div>
+        <div class="page-count">/ {{ fileCount }}</div>
+        <div class="next" @click="nextFile">
+          下一页
+        </div>
+        <div class="tools">
+          <div style="width:100%;text-align: right;">
+            <el-button title="下载" type="primary" icon="el-icon-download"   @click="downPDF">下载</el-button>
+            <el-button title="打印" type="primary" icon="el-icon-printer"   @click="printPDF">打印</el-button>
+          </div>
+        </div>
+      </div>
+      <div style="min-height:1600px;margin: 0 auto;overflow: auto;">
+          <div class="pdf-wrapper">
+            <!-- v-for="item in pdfList"
+                    :key="item.billCode"
+                    :src="item.pdfUrl" -->
+                  <pdf
+                    :src="currentPdfUrl"
+                    :page="page"
+                    @num-pages="pageCount = $event"
+                    @page-loaded="onPageLoaded($event)"
+                    ref="pdf"
+
+                  ></pdf>
+
+                  <!-- v-drag -->
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import pdf from 'vue-pdf'
+export default {
+  components: { pdf },
+  props: {
+    pdfList:{
+      type: Array,
+    },
+    startPage: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+
+      cacheFileList:this.pdfList,
+      loadPdfUrl:null,
+      page: 1,
+      currentPage: 0,
+      pageCount: 0,
+
+      currentNum:1,
+      fileCount: this.pdfList.length,
+
+      scale: 20,
+      preScale: 20,
+
+    }
+  },
+  computed: {
+    currentPdfUrl() {
+      if (!this.loadPdfUrl) return ''
+      const publicPath =
+        process.env.NODE_ENV === 'production'
+          ? process.env.VUE_APP_ROUTER_BASE
+          : '/'
+      return pdf.createLoadingTask({
+        url: this.loadPdfUrl,
+        cMapUrl: `${publicPath}cmaps/`,
+        cMapPacked: true
+      })
+    }
+  },
+  watch: {
+    pdfList(){
+      console.log("===77777====>");
+      this.cacheFileList=this.pdfList;
+      // this.loadPdfUrl =this.cacheFileList[0].pdfUrl;
+      this.fileCount=this.cacheFileList.length;
+      // console.log(this.loadPdfUrl);
+    },
+    pageCount(value) {
+      if (value) this.page = this.startPage
+    }
+  },
+  mounted() {
+    if(this.cacheFileList&& this.cacheFileList.length>0){
+      this.loadPdfUrl =this.pdfList[0].pdfUrl;
+    }
+    window.addEventListener('mousewheel', this.handleScroll, { passive: false })
+
+  },
+  methods: {
+    addPdfUrl(ydSn,pdfUrl){
+      let item={
+        "ydSn":ydSn,
+        "pdfUrl":pdfUrl
+      }
+      this.pdfList.push(item);
+    },
+    handleScroll(e){
+      // 判断是不是按下ctrl键
+      if(e.ctrlKey) {
+        // 取消浏览器默认的放大缩小网页行为
+        e.preventDefault()
+        // 判断是向上滚动还是向下滚动
+        if (e.deltaY > 0) {
+          // 放大重写，业务代码
+          this.zoomOut()
+        } else {
+          // 缩小重写，业务代码
+          this.zoomIn()
+        }
+      }
+    },
+    onPageLoaded(){
+      this.doScale(20);
+    },
+    doScale(val){
+       if (isNaN(val)) {
+        this.scale = this.preScale
+        return
+      }
+      if (val< 10) {
+        this.scale = 10
+      }
+      if (val > 200) {
+        this.scale = 200
+      }
+      this.preScale = this.scale
+      // this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%';
+      // this.$refs.pdf.$el.style.margin = "0 auto";
+
+      this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%';
+      this.$refs.pdf.$el.style.margin = "0 auto";
+    },
+    setScaleValue(e) {
+      this.doScale(e.target.value)
+    },
+    zoomIn() {
+      if (this.scale > 20) {
+        this.scale += -5
+        this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
+        this.$refs.pdf.$el.style.margin = "0 auto";
+      }
+    },
+    zoomOut() {
+      if (this.scale < 200) {
+        this.scale += 5
+        this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
+        this.$refs.pdf.$el.style.margin = "0 auto";
+      }
+    },
+    preFile(){
+      let count = this.currentNum - 1
+      if (count < 1) return
+      this.currentNum = count
+      this.loadPdfUrl =this.cacheFileList[this.currentNum-1].pdfUrl;
+    },
+    nextFile() {
+      console.log('this.fileCount', this.currentNum, this.fileCount)
+      let count = this.currentNum + 1
+      if (count > this.fileCount) return
+      this.currentNum = count
+      this.loadPdfUrl =this.cacheFileList[this.currentNum-1].pdfUrl;
+    },
+    prePage() {
+      let count = this.currentPage - 1
+      if (count < 1) return
+      this.page = count
+    },
+    nextPage() {
+      console.log('this.pageCount', this.currentPage, this.pageCount)
+      let count = this.currentPage + 1
+      if (count > this.pageCount) return
+      this.page = count
+    },
+     // 下载
+     downPDF() {
+          var tempLink = document.createElement('a')
+          tempLink.style.display = 'none'
+          tempLink.href = this.loadPdfUrl
+          tempLink.setAttribute('download', (new Date()).getTime()+'.pdf')
+          if (typeof tempLink.download === 'undefined') {
+              tempLink.setAttribute('target', '_blank')
+          }
+          document.body.appendChild(tempLink)
+          tempLink.click()
+          document.body.removeChild(tempLink)
+      },
+      // 打印
+      printPDF() {
+          // this.$refs.pdf.print()
+          this.$emit("onPrint");
+
+      }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .grid1 {
+    height: 200px;
+    background-image:
+      linear-gradient(45deg, #8d8b8b 25%, transparent 0),
+      linear-gradient(-45deg, #8d8b8b 25%, transparent 0),
+      linear-gradient(45deg, transparent 75%, #8d8b8b 0),
+      linear-gradient(-45deg, transparent 75%, #8d8b8b 0);
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+    background-size: 20px 20px;
+  }
+
+  .grid2 {
+  height: 200px;
+  background-image: radial-gradient(circle, rgb(165, 165, 165) 1px, #fff 1px);
+  background-size: 20px 20px;
+  background-position: center center;
+}
+
+
+.grid3 {
+  height: 200px;
+  background-image:
+      linear-gradient(to right, rgb(203 213 225) 1px, transparent 1px),
+      linear-gradient(to bottom, rgb(203 213 225) 1px, transparent 1px);
+  background-size: 20px 20px;
+  background-position: center center;
+}
+
+.grid4 {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23fff' /%3E%3Crect x='50%' width='1' height='100%' fill='rgb(203 213 225)' /%3E%3Crect y='50%' width='100%' height='1' fill='rgb(203 213 225)' /%3E%3C/svg%3E%0A");
+}
+
+.pdf-viewer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  // overflow: hidden;
+  overflow: auto;
+  // height: 100%;
+  font-family: PingFang SC;
+  // width: 100%;
+  // position: relative;
+  // background: #eeeeee;
+  // background: #dcdcdc;
+
+  .tools {
+    display: flex;
+    z-index: 9999;
+    position: absolute;
+    top: 5px;
+    right: 30px;
+  }
+  .pdf-bar {
+    position: absolute;
+    // position: fixed;
+    top: 0px;
+    left: 0px;
+    z-index: 1;
+
+    width: 100%;
+    height: 50px;
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+    text-align: center;
+    background: #f8f8f8;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    & > div {
+      min-width: 36px;
+      height: 36px;
+      line-height: 36px;
+      color: #666;
+      cursor: pointer;
+      i {
+        width: 100%;
+        height: 100%;
+        color: #666;
+        font-weight: bold;
+      }
+      ::v-deep .el-input--mini {
+        input {
+          padding: 0 8px;
+          width: 50px;
+          text-align: center;
+        }
+        .el-input-group__append {
+          padding: 0 6px;
+          color: #666;
+          cursor: auto;
+        }
+      }
+      ::v-deep .el-input-number {
+        margin-left: 10px;
+        width: 40px;
+        .el-input-number__decrease {
+          display: none;
+        }
+        .el-input-number__increase {
+          display: none;
+        }
+        .el-input--mini {
+          input {
+            width: 40px;
+            text-align: center;
+          }
+        }
+      }
+    }
+    .prev {
+      margin-left: 16px;
+    }
+    .scale,
+    .page {
+      display: flex;
+      align-items: center;
+    }
+    .page-count {
+      margin-right: 10px;
+    }
+  }
+  .pdf-wrapper {
+    position: absolute;
+    margin-top: 70px;
+    width: 100%;
+    height: calc(100% - 70px);
+    overflow: auto;
+  }
+}
+</style>