<style  scoped>

canvas {

  display: block;

}

.grey {

  color: #ddd;

}

.turn {

  cursor: pointer;

}

</style>

<template>

  <div class="f-c h-f">

    <div class="f-a-c f-j-b o-p-s">

      <div class="f-a-c f-j-c f-1">

        <span

          @click="currentPage == 1 ? '' : getPage(currentPage - 1)"

          class="turn o-plr"

          :class="{ grey: currentPage == 1 }"

          >上一页</span

        >

        {{ currentPage }} / {{ pageCount }}

        <span

          @click="currentPage == pageCount ? '' : getPage(currentPage + 1)"

          class="turn o-plr"

          :class="{ grey: currentPage == pageCount }"

          >下一页</span

        >

        <input

          class="o-mlr bd-r-4 bd-f bd-c-e"

          style="outline: none; width: 60px"

          type="text"

          v-model="currentP"

          @confirm="inputPage"

          @change="inputPage"

        />

      </div>

      <div>

        <a class="o-plr-s" :href="pdfUrl">下载</a>

      </div>

    </div>

    <div class="f-1 p-re" style="overflow-y:scroll;">

      <div id="mycanvas" class="w-f" ref="mycanvas" :data-pdfUrl="pdfUrl"></div>

    </div>

  </div>

</template>

<script>

import pdf from './pdf'

export default {

  name: 'pdf',

  data() {

    return {

      currentPage: 1,

      pageCount: 1,

      pdfObj: {},

      currentP: '',

      pdfUrl: '',

    }

  },

  methods: {

    inputPage() {

      console.log('inputPage ---', this.currentP)

      if (1 <= this.currentP && this.currentP <= this.pageCount) {

        this.getPage(parseInt(this.currentP))

      } else {

        this.currentP = ''

      }

    },

    getPage(pageNumber) {

      this.currentPage = pageNumber

      //获取pdf

      let _this = this

      let pdf = this.pdfObj

      let container = document.getElementById('mycanvas')

      pdf.getPage(pageNumber).then((page) => {

        let scale = container.offsetWidth / page.view[2]

        let viewport = page.getViewport(scale)

        let canvas = document.createElement('canvas')

        canvas.width = viewport.width

        canvas.height = viewport.height

        container.innerHTML = ''

        container.appendChild(canvas)

        let ctx = canvas.getContext('2d')

        var renderContext = {

          canvasContext: ctx,

          transform: [1, 0, 0, 1, 0, 0],

          viewport: viewport,

          intent: 'print',

        }

        page.render(renderContext).then(() => {})

      })

    },

    preview(url) {

      console.log('preview ---', url)

      this.pdfUrl = url

      let pdfjsLib = pdf

      pdfjsLib.PDFJS.workerSrc = './pdf.worker.js'

      let loadingTask = pdfjsLib.getDocument(url)

      loadingTask.promise.then(

        (res) => {

          console.log('getPdf ---loadingTask res', res)

          this.pageCount = res.numPages

          this.pdfObj = res

          this.getPage(1)

        },

        function (reason) {

          console.log('preview ---loadingTask reason', reason)

        }

      )

    },

  },

}

</script>