vue-pdf的使用说明

vue-pdf使用方法如下

1、安装

npm i pdfjs-dist@2.5.207
npm i vue-pdf@4.2.0

2、使用

<template>
  <div class="drawer-pdf">
    <el-drawer
      class="drawer"
      :title="title"
      :visible="show"
      :direction="direction"
      size="50%"
      :before-close="handleClose"
    >
      <el-pagination
        style="text-align: center"
        v-if="pageTotalNum"
        :hide-on-single-page="true"
        background
        layout="prev, pager, next, jumper"
        :page-size="1"
        @current-change="handleCurrentChange"
        :total="pageTotalNum"
        :current-page.sync="pageNum"
      >
      </el-pagination>
      <el-scrollbar style="height: 100%; margin-top: 20px">
        <pdf
          ref="pdf"
          :src="src"
          :page="pageNum"
          @progress="loadedRatio = $event"
          @num-pages="pageTotalNum = $event"
          @error="pdfError"
        >
        </pdf>
      </el-scrollbar>
    </el-drawer>
  </div>
</template>
<script>
import pdf from "vue-pdf";

export default {
  name: "DrawerPdf",
  components: { pdf },
  props: {
    direction: {
      type: String,
      default: "ltr",
    },
  },
  data() {
    return {
      pageNum: 1,
      pageTotalNum: 0,
      loadedRatio: 0,
      src: undefined,
    };
  },
  computed: {
    // 抽屉数据
    drawerPdfDialog() {
      return this.$store.state.home.drawerPdfDialog;
    },
    show() {
      return this.drawerPdfDialog.show;
    },
    pdfUrl() {
      return this.drawerPdfDialog.pdfUrl;
    },
    title() {
      return this.drawerPdfDialog.title;
    },
  },
  watch: {
    show(newVal) {
      if (newVal) {
        if (!this.pdfUrl) {
          this.handleClose();
          this.$message.error("PDF文档不存在");
        } else {
          this.src = pdf.createLoadingTask(this.pdfUrl);
        }
      }
    },
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNum = val;
    },
    handleClose() {
      this.$store.dispatch("home/SetDrawerPdfDialog", {
        show: false,
        pdfUrl: "",
        title: "",
      });
    },
    pdfError(e) {
      console.log(e)
      this.$message.error(`PDF文档打开失败:${e.message} - ${this.pdfUrl}`);
      this.handleClose();
    },
  },
};
</script>
<style lang="scss" scoped>
.drawer-pdf {
  .drawer {
    ::v-deep.el-pagination__jump {
      color: #fff;
    }
    ::v-deep.el-drawer {
      background-color: #2a3e74;
      .el-drawer__body {
        overflow: hidden;
      }
      .el-drawer__header {
        color: #fff;
        text-align: center;
      }
    }
  }
}
</style>