vue中集成pdfjs自定義分頁

<template>
 <div id="div_read_area_scrool" class="no-scrollbar--x" :style="'text-align:center;height:'+ '500px;'+'overflow: auto;'">
    <div id="div_read_area"></div>
 </div>
</template>

<script>
// 參數：the-document={}
//    屬性：
import pdfjsLib from 'pdfjs-dist'
import $ from 'jquery'
export default {
  name: 'ReadByPdf',
  data () {
    return {
      theReadOnline: {
        current: 1,
        numPages: 0,
        html: ''
      }
    }
  },
  methods: {
    // 初始化pdfjs
    initThePDFJSLIB: function () {
      pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js'
    },
    // 根據頁碼獲取pdf內容
    loadPDFForTheDocument (index) {
      // 實例化pdfjs
      pdfjsLib.getDocument("/static/110.pdf").then(pdf => {
        // 經過頁碼獲取每頁內容
        pdf.getPage(index).then(page => {
          // 得到總頁數
          this.theReadOnline.numPages = pdf.numPages

          // 設置頁面顯示倍數 842×595
          let _clientWidth = document.documentElement.clientWidth * 0.618
          let view = _clientWidth % 842 > 0 ? 1.33 : 1

          // 實例化畫布
          let canvas = document.createElement('canvas')
          let context = canvas.getContext('2d')

          let dpr = window.devicePixelRatio || 1
          let bsr = context.webkitBackingStorePixelRatio ||
                  context.mozBackingStorePixelRatio ||
                  context.msBackingStorePixelRatio ||
                  context.oBackingStorePixelRatio ||
                  context.backingStorePixelRatio || 1
          let ratio = dpr / bsr

          let viewport = page.getViewport(view)

          canvas.width = viewport.width * ratio
          canvas.height = viewport.height * ratio
          // canvas.style.width = viewport.width + 'px'
          // canvas.style.height = viewport.height + 'px'

          // context.setTransform(ratio, 0, 0, ratio, 0, 0)

          let renderContext = {
            canvasContext: context,
            viewport: viewport
          }

          // 追加上新的一頁空間
          document.getElementById('div_read_area').appendChild(canvas)

          // 賦值上顯示內容
          page.render(renderContext).then(() => {
          })
        })
      }).catch(err => {
        console.log(err)
      })
    },
    watchTheReadScroll: function () {
      let _theVue = this

      // 獲取節點
      let _scrollContent = document.getElementById('div_read_area_scrool')

      // 綁定事件
      _scrollContent.addEventListener('scroll', function () {
        var viewH, contentH, scrollTop

        viewH = $(this).height()
        contentH = $(this).get(0).scrollHeight
        scrollTop = $(this).scrollTop()

        // 後期改爲傳遞給父級
        if (scrollTop / (contentH - viewH) >= 1) { // 到達底部時,加載新內容
          _theVue.theReadOnline.current++
          if (_theVue.theReadOnline.current <= _theVue.theReadOnline.numPages) {
            _theVue.loadPDFForTheDocument(_theVue.theReadOnline.current)
          }
        }
      })
    }
  },
  mounted: function () {
    this.initThePDFJSLIB()
    this.watchTheReadScroll()
    this.loadPDFForTheDocument(1)
  }
}
</script>