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

---
 src/components/PdfViewer/index copy.vue | 359 ------------------------
 1 file changed, 359 deletions(-)
 delete mode 100644 src/components/PdfViewer/index copy.vue

diff --git a/src/components/PdfViewer/index copy.vue b/src/components/PdfViewer/index copy.vue
deleted file mode 100644
index b9c297a8..00000000
--- a/src/components/PdfViewer/index copy.vue	
+++ /dev/null
@@ -1,359 +0,0 @@
-<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>
-