GCLS_Page_Book_Component_NPC/src/components/Adult/preview/PdfView.vue

<template>
  <div class="pdfView-box">
    <div class="pdfView">
      <pdf
        v-for="i in curQue.data.numPages"
        ref="pdf"
        :key="i"
        :src="pdfSrc"
        :page="i"
        @progress="loadedRatio = $event"
      />
    </div>
    <div v-show="loadedRatio!==1" class="progress">
      <el-progress type="circle" :width="70" color="#53a7ff" :percentage="Math.floor(loadedRatio*100)" />
      <br>
      <span>{{ remindShow }}</span>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";

export default {
  // import引入的组件需要注入到对象中才能使用
  components: { pdf },
  props: ["curQue", "fn_data", "type"],

  data() {
    // 这里存放数据
    return {
      numPages: null,
      remindShow: "加载文件中，文件较大请耐心等待...",
      loadedRatio: 0,
      pdfSrc: ''
    };
  },
  created() {
    this.getNumPages();
  },
  methods: {
    getNumPages() {
      let str = this.curQue.data.fileRelativePath;
      str.replace(process.env.VUE_APP_BASE_API, '');
      let loadingTask = pdf.createLoadingTask(`${process.env.VUE_APP_PDF}${str}`);
      loadingTask.promise
        .then(pdff => {
          console.log("拿到结果");
          this.pdfSrc = loadingTask;
          this.numPages = pdff.numPages;
          this.curQue.data.numPages = pdff.numPages;
        })
        .catch(err => {
          console.error("pdf 加载失败", err);
        });
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.pdfView-box{
    width:100%;
}
.pdfView {
  width: 100%;
}
.progress{
    position: absolute;
    right: 50%;
    top: 50%;
    text-align: center;
    width: 500px;
    margin-right: -250px;
}
</style>