|  | @@ -0,0 +1,333 @@
 | 
	
		
			
				|  |  | +<!--
 | 
	
		
			
				|  |  | + * @Description:
 | 
	
		
			
				|  |  | + * @Author: 空白格
 | 
	
		
			
				|  |  | + * @Date: 2022-08-25 16:39:06
 | 
	
		
			
				|  |  | + * @LastEditors: 空白格
 | 
	
		
			
				|  |  | + * @LastEditTime: 2022-08-25 17:10:46
 | 
	
		
			
				|  |  | + * @FilePath: \veterans_client_web\src\components\ViewPdf\index.vue
 | 
	
		
			
				|  |  | + * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 | 
	
		
			
				|  |  | +-->
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div>
 | 
	
		
			
				|  |  | +    <el-dialog
 | 
	
		
			
				|  |  | +      title="PDF 预览"
 | 
	
		
			
				|  |  | +      :visible.sync="dialogVisible"
 | 
	
		
			
				|  |  | +      :close-on-click-modal="false"
 | 
	
		
			
				|  |  | +      width="500"
 | 
	
		
			
				|  |  | +      top="10vh"
 | 
	
		
			
				|  |  | +    >
 | 
	
		
			
				|  |  | +      <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
 | 
	
		
			
				|  |  | +          > / 
 | 
	
		
			
				|  |  | +          <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>
 | 
	
		
			
				|  |  | +    </el-dialog>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +// pdf预览
 | 
	
		
			
				|  |  | +import pdf from "vue-pdf";
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  name: "ViewPdf",
 | 
	
		
			
				|  |  | +  components: {
 | 
	
		
			
				|  |  | +    pdf,
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  data() {
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      value: 1,
 | 
	
		
			
				|  |  | +      dialogVisible: false,
 | 
	
		
			
				|  |  | +      src: "",
 | 
	
		
			
				|  |  | +      currentPage: 0, // pdf文件页码
 | 
	
		
			
				|  |  | +      pageCount: 0, // pdf文件总页数
 | 
	
		
			
				|  |  | +      scale: 100,
 | 
	
		
			
				|  |  | +      pageRotate: 0,
 | 
	
		
			
				|  |  | +      isExit: false,
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    /**
 | 
	
		
			
				|  |  | +     * 打开弹框
 | 
	
		
			
				|  |  | +     * @date 2022-08-25
 | 
	
		
			
				|  |  | +     * @param {any} url
 | 
	
		
			
				|  |  | +     * @returns {any}
 | 
	
		
			
				|  |  | +     */
 | 
	
		
			
				|  |  | +    openDialog(url) {
 | 
	
		
			
				|  |  | +      this.src = url;
 | 
	
		
			
				|  |  | +      this.dialogVisible = true;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 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", this.src);
 | 
	
		
			
				|  |  | +      if (typeof tempLink.download === "undefined") {
 | 
	
		
			
				|  |  | +        tempLink.setAttribute("target", "_blank");
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      document.body.appendChild(tempLink);
 | 
	
		
			
				|  |  | +      tempLink.click();
 | 
	
		
			
				|  |  | +      document.body.removeChild(tempLink);
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    printPDF() {
 | 
	
		
			
				|  |  | +      this.$refs.pdf.print();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<style scoped>
 | 
	
		
			
				|  |  | +.btn {
 | 
	
		
			
				|  |  | +  margin: 20px 0px;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.main {
 | 
	
		
			
				|  |  | +  border: 2px solid #dcdfe6;
 | 
	
		
			
				|  |  | +  height: 65vh;
 | 
	
		
			
				|  |  | +  overflow: auto;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.tools {
 | 
	
		
			
				|  |  | +  display: flex;
 | 
	
		
			
				|  |  | +  justify-content: center;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.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) {
 | 
	
		
			
				|  |  | +  font-family: "楷体";
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +:deep(.el-dialog__header) {
 | 
	
		
			
				|  |  | +  display: flex;
 | 
	
		
			
				|  |  | +  justify-content: space-between;
 | 
	
		
			
				|  |  | +  align-items: center;
 | 
	
		
			
				|  |  | +  background: #303133;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +:deep(.el-dialog__title) {
 | 
	
		
			
				|  |  | +  color: white;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +: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>
 |