<template>
  <div class="pdfMain">
    <!-- <div class="pdfBar">
      <div class="pdf_print">
        <a :href="url" download target="_blank" class="btnDownload">下载</a>
      </div>
    </div> -->
    <div class="pdfBox">
      <pdf v-for="i in numPages" :key="i"  :src="src" :page="i" style="display: inline-block; width: 100%"></pdf>
    </div>
  </div>
</template>

<script>
  import pdf from 'vue-pdf'
  export default {
    components: {
      pdf
    },
    data() {
      return {
        loading: false,
        url: '',
        src: '',
        numPages: undefined,
        currentPage: 0, // pdf文件页码
        pageCount: 0, // pdf文件总页数
      }
    },
    created() {
      this.loading = true
      this.url = this.$route.query.url || ''
      if(this.url != '') {
        this.getPageNums();
      }
    },
    mounted() {

    },
    methods: {
      getPageNums() {
        let task = pdf.createLoadingTask({
          url: this.url,
          // 引入pdf字体
          // cMapUrl: '/cmaps/',
          cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/',
          cMapPacked: true
        });
        this.src = task;
       this.src.promise.then(pdf => {
          this.numPages = pdf.numPages;
          this.loading = false;
        });
      },
      changePdfPage (val) {
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
        }
      },
      // pdf加载时
      loadPdfHandler (e) {
        this.currentPage = 1
        this.loading = false;
        console.log('end', e);
      }
    }
  }
</script>

<style lang="scss" scoped>
.pdfMain {
    position: relative;
    min-height: calc(100vh);
    overflow-x: hidden;
    background-color: #fff;
  }
  .pdfBar {
    padding: 20px 0;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .oper_pdf {
      flex: 1;
    }
    .btnDownload {
      padding: 9px 15px;
      color: #fff;
      font-size: 12px;
      background-color: #1890ff;
      text-align: center;
      border-radius: 4px;
      display: block;
    }
  }
  .pdfBox {
    height: calc(100vh - 75px);
    width: 1200px;
    margin: 0 auto;
  }
</style>
