GCLS_Page_Book_Component_NPC/src/components/Adult/phonePreview/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"
      /> -->
      <iframe
        :src="curQue.data.newpath"
        width="100%"
        height="1000px"
        id="ifm"
      ></iframe>
    </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";
const Base64 = require("js-base64").Base64;
import { getToken, getConfig } from "../../../utils/auth";

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

  data() {
    // 这里存放数据
    return {
      numPages: null,
      remindShow: "加载文件中，文件较大请耐心等待...",
      loadedRatio: 0,
      pdfSrc: "",
    };
  },
  created() {
    // this.getNumPages();
    let data = JSON.parse(getConfig());
    let file_preview_url = data.doc_preview_service_address;
    let path =
      `${file_preview_url}/onlinePreview?url=` +
      Base64.encode(this.curQue.data.file_url);
    this.curQue.data.newpath = path;
  },
  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>