party_construct_web/src/components/RocVuePdfDialog/index.vue

<!--
 * @Description: pdf预览弹框
 * @Author: Rockery
 * @Date: 2021-12-13 17:40:22
 * @LastEditors: Rockery
 * @LastEditTime: 2022-01-19 10:01:57
 * @FilePath: \party_construct_web\src\components\RocVuePdfDialog\index.vue
 * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
-->

<template>
  <div class="rocvuepdfdialog">
    <el-dialog
      :title="dialogTitle"
      :visible.sync="currentVisible"
      width="60%"
      append-to-body
      class="rocvuepdfdialog-dialog"
      @close="handleCloseDialogClick"
    >
      <div v-loading="loadedRatio !== 1">
        <el-button-group>
          <el-button size="mini" @click="handleHomePage">首 页</el-button>
          <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="handlePrePage">上一页</el-button>
          <el-button type="primary" size="mini" @click="handleNextPage">
            下一页
            <i class="el-icon-arrow-right el-icon--right"></i>
          </el-button>
          <el-button size="mini" @click="handleLastPage">尾 页</el-button>
        </el-button-group>
        <div class="rocvuepdfdialog-dialog-page">当前页码：{{ pageNum }} / 总页码：{{ numPages }}</div>
        <div
          v-show="loadedRatio === 1"
          ref="rocVuePdfContainerRef"
          class="rocvuepdfdialog-dialog-container"
        >
          <vue-pdf
            :src="pdfUrl"
            ref="vuePdfRef"
            :page="pageNum"
            @num-pages="numPages = $event"
            @progress="loadedRatio = $event"
            @page-loaded="pageNum = $event"
            @loaded="loadPdfHandler"
            @link-clicked="pageNum = $event"
          ></vue-pdf>
        </div>
        <template v-if="loadedRatio !== 1">
          <div class="rocvuepdfdialog-dialog-nodata">文件预览失败</div>
        </template>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseDialogClick">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import vuePdf from 'vue-pdf';

export default {
  name: 'Rocvuepdfdialog',
  components: {
    'vue-pdf': vuePdf
  },
  props: {
    // 是否显示对话框
    visible: {
      type: Boolean,
      required: true,
      default: true
    },
    // 对话框标题
    dialogTitle: {
      type: String,
      required: false,
      default: 'PDF文件预览'
    },
    // PDF 文件访问路径
    pdfUrl: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      numPages: 0, // pdf 总页数
      pageNum: 1,
      loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
    };
  },
  computed: {
    currentVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
      }
    }
  },
  methods: {
    /**
     * pdf加载时
     */
    loadPdfHandler(e) {
      // 加载的时候先加载第一页
      this.pageNum = 1;
    },
    /**
     * 首页按钮事件
     */
    handleHomePage() {
      this.pageNum = 1;
      this.toTop();
    },
    /**
     * 上一页按钮事件
     */
    handlePrePage() {
      let page = this.pageNum;
      page = page > 1 ? page - 1 : this.numPages;
      this.pageNum = page;
      this.toTop();
    },
    /**
     * 下一页按钮事件
     */
    handleNextPage() {
      let page = this.pageNum;
      page = page < this.numPages ? page + 1 : 1;
      this.pageNum = page;
      this.toTop();
    },
    /**
     * 尾页按钮事件
     */
    handleLastPage() {
      this.pageNum = this.numPages;
      this.toTop();
    },
    /**
     * 对话框关闭事件
    */
    handleCloseDialogClick() {
      // this.$emit("close", false);
      this.currentVisible = false;
    },
    /**
     * 页面回到顶部
    */
    toTop() {
      this.$refs.rocVuePdfContainerRef && (this.$refs.rocVuePdfContainerRef.scrollTop = 0);
    }
  }
}
</script>

<style lang="scss" scoped>
.rocvuepdfdialog {
  &-dialog {
    ::v-deep {
      .el-dialog__header {
        border-bottom: 1px solid #dfe4ed;
      }

      .el-dialog__body {
        padding: 20px 20px 30px;
        text-align: center;
      }
    }

    &-page {
      margin: 10px 0;
      color: #409eff;
    }

    &-container {
      position: relative;
      overflow: auto;
      width: 100%;
      height: 550px;
      border: 1px solid #d9d9d9;
    }

    &-nodata {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
      font-size: 22px;
      color: #747474;
      opacity: 0.8;
    }
  }
}
</style>