ios - 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 = pdfjsWorjerloadFile (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

显示不全能不能看看截图

Answer 2

对于你的问题，看起来你在使用pdfjs-dist库在Vue2.0中预览PDF文件。你在iOS设备上遇到的问题是，当PDF文件页数较多（>50页）时，文件内容显示不全。而在安卓设备和页数较少的PDF文件上，显示正常。

这个问题可能是由于iOS设备上的内存管理或者渲染性能导致的。当处理大量页面时，可能会超出设备的内存限制，导致渲染失败或显示不全。

以下是一些可能的解决方案：

1. 分块渲染：尝试将PDF文件分成更小的块，然后一次只渲染一部分。这样可以减少单次渲染的页面数量，降低内存使用。
2. 优化渲染性能：你可以尝试优化你的渲染逻辑，例如减少不必要的渲染操作，或者只在需要时重新渲染页面。
3. 使用虚拟滚动：如果你的应用允许，你可以考虑使用虚拟滚动。这意味着你只在屏幕上渲染可见的页面，而不是一次性渲染所有页面。
4. 更新库版本：检查pdfjs-dist库是否有更新版本，新版本可能已经修复了与iOS设备相关的问题。
5. 检查设备性能：确保你的iOS设备有足够的内存和性能来渲染PDF文件。如果可能，尝试在不同的iOS设备上运行你的应用，看看问题是否仍然存在。

在代码层面，你可以尝试修改renderPage函数，使其支持分块渲染或虚拟滚动。例如，你可以添加一个参数来指定要渲染的页面范围，而不是一次性渲染所有页面。

请注意，这些解决方案可能需要一些实验和调整，以找到最适合你的应用的解决方案。