Vue2.0移动端PDF预览问题：iOS设备文件内容多显示不全？

Question

vue2.0移动端使用pdfjs-dist预览文件，在ios文件内容多显示不全（>50页） 内容少可以正常显示，在安卓端无问题都可以正常显示

想要的效果：pdf文件预览内容正常显示

使用的pdfjs-dist@2.2.228，具体代码如下:

<canvas
   v-for="page in pdfPages"
   :key="page"
   :id="'pdf-canvas' + page"
  />

import * as PDFJS from 'pdfjs-dist'
import pdfjsWorjer from 'pdfjs-dist/build/pdf.worker.entry'
PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorjer

loadFile (url) {
  let loadingTask = PDFJS.getDocument({
    url: url,
    withCredentials: true // 携带凭证
  })
  loadingTask.promise.then(pdf => {
    this.pdfDoc = pdf
    this.pdfPages = pdf.numPages
    this.$nextTick(() => {
      this.renderPage(1)
    })
  }).catch(err => {
    console.log(err, 'loadingTask err')
  })
},
renderPage (num) {
  const that = this
  this.pdfDoc.getPage(num).then(page => {
    let canvas = document.getElementById('pdf-canvas' + num)
    let ctx = canvas.getContext('2d')
    let dpr = window.devicePixelRatio || 1
    let ratio = dpr
    // screen.availWidth 屏幕可用宽度
    let viewport = page.getViewport({scale: screen.availWidth / page.getViewport({scale: this.pdfScale}).width})
    canvas.width = viewport.width * ratio
    canvas.height = viewport.height * ratio
    canvas.style.width = viewport.width + 'px'
    canvas.style.height = viewport.height + 'px'
    that.pdfWidth = viewport.width + 'px'
    canvas.style.height = viewport.height + 'px'
    ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
    // 将 PDF 页面渲染到 canvas 上下文中
    let renderContext = {
      canvasContext: ctx,
      viewport: viewport
    }
    page.render(renderContext)
    if (this.pdfPages > num) {
      this.renderPage(num + 1)
    }
  })
}

Answer 1

显示不全能不能看看截图