<template>
  <div class="wrapper">
    <template v-for="page in pages">
      <canvas :id="ID_Prefix + page" :key="page" />
    </template>
  </div>
</template>
<script>
const pdfViewerPath = '/static/plugins/pdfviewer/'
const ID_Prefix = 'pdfviewer-canvas'
export default {
  props: {
    url: [String, Object, ArrayBuffer]
  },
  data() {
    return {
      pages: 1,
      ID_Prefix: ID_Prefix
    }
  },
  created() {
    if (!window.pdfjsLib) {
      var hm = document.createElement('script')
      hm.src = pdfViewerPath + 'js/pdf.js'
      hm.onload = () => {
        this.redenrPdf()
      }
      hm.onerror = function(err) {
        alert('pdfjs加载出错')
      }
      var s = document.getElementsByTagName('script')[0]
      s.parentNode.insertBefore(hm, s)
    } else this.redenrPdf()
  },
  methods: {
    // 多页数组
    getDataURLs() {
      const arr = []
      for (let i = 1; i <= this.pages; i++) {
        const el = document.getElementById(ID_Prefix + i)
        el.getContext('2d')
        arr.push(el.toDataURL('image/png'))
      }
      return arr
    },
    redenrPdf() {
      //
      // The workerSrc property shall be specified.
      //
      const pdfjsLib = window.pdfjsLib
      pdfjsLib.GlobalWorkerOptions.workerSrc = pdfViewerPath + 'js/pdf.worker.js'
      /* pdfjsLib.GlobalWorkerOptions.useWorkerFetch = true
            pdfjsLib.GlobalWorkerOptions.cMapUrl = pdfViewerPath + 'cmaps/' */
      //
      // Asynchronous download PDF
      //
      const loadingTask = pdfjsLib.getDocument({
        data: this.url,
        useWorkerFetch: true,
        cMapUrl: pdfViewerPath + 'cmaps/'
      });
      (async() => {
        const pdf = await loadingTask.promise
        window.pdf2 = pdf
        this.pages = pdf.numPages
        this.$nextTick(async() => {
          for (let i = 1; i <= this.pages; i++) {
            const page = await pdf.getPage(i)
            const scale = 1.5
            const viewport = page.getViewport({ scale })
            // Support HiDPI-screens.
            const outputScale = window.devicePixelRatio || 1

            //
            // Prepare canvas using PDF page dimensions
            //
            const canvas = document.getElementById(ID_Prefix + i)
            const context = canvas.getContext('2d')

            canvas.width = Math.floor(viewport.width * outputScale)
            canvas.height = Math.floor(viewport.height * outputScale)
            canvas.style.width = Math.floor(viewport.width) + 'px'
            canvas.style.height = Math.floor(viewport.height) + 'px'

            const transform = outputScale !== 1
              ? [outputScale, 0, 0, outputScale, 0, 0]
              : null

            //
            // Render PDF page into canvas context
            //
            const renderContext = {
              canvasContext: context,
              transform,
              viewport
            }
            page.render(renderContext)
          }
        })
      })()
    }
  }
}
</script>
<style scoped lang="scss">
.wrapper{
    text-align: center;
    canvas{
        display: block;
        border: 1px solid #333;
        margin: 5px auto;
    }
}
</style>
