pdfjs插件 PDF页面在移动设备上显示不全

在Vue项目中，可以使用pdfjs-dist这个包代替pdfjs。

我们可以在网上找到很多示例的代码。

  loadFile(url) {
    this.showLoading = true;
    PDF.getDocument(url).then((pdf) => {
      this.showLoading = false;
      this.pdfDoc = pdf;
      this.pages = this.pdfDoc.numPages;
      this.$nextTick(() => {
        this.renderPage(1);
      });
    });
  }

  renderPage(num) {
    this.pdfDoc.getPage(num).then((page) => {
      const canvas: any = document.getElementById("canvas" + num);
      const ctx = canvas.getContext("2d");
      const dpr = window.devicePixelRatio || 1; // 设备像素比
      const bsr =
        ctx.webkitBackingStorePixelRatio ||
        ctx.mozBackingStorePixelRatio ||
        ctx.msBackingStorePixelRatio ||
        ctx.oBackingStorePixelRatio ||
        ctx.backingStorePixelRatio ||
        1; // 浏览器在渲染canvas之前会用几个像素来存储画布信息,类似img
      const ratio = dpr / bsr;
      const deviceWidth = window.screen.width;
      const deviceHeight = window.screen.height;
      canvas.width = deviceWidth * ratio; // 画布大小
      canvas.height = deviceHeight * ratio;
      canvas.style.width = deviceWidth + "px"; // 画布的框架大小
      canvas.style.height = deviceHeight + "px";
      const renderContext = {
        canvasContext: ctx,
        viewport: page.getViewport(1),
        transform: [ratio, 0, 0, ratio, 0, 0],
      };
      page.render(renderContext);
      if (this.pages > num) {
        this.renderPage(num + 1);
      }
    });
  }

然而，这在移动端H5是会显示不全的。每个设备的分辨率不一样，屏幕宽高也不一样，所以显示的效果都不一样。

首先 canvas设置了两个尺寸。

1. canvas.width：实际的宽度
2. canvas.style.width：在页面上的宽度。可以理解为缩放出来的宽度

所以对于高分屏来说，canvas.width需要乘以高分屏的倍数，才是设备真正能显示的分辨率。否则会很模糊。

接下来是viewport。getViewport是pdfjs的方法。在移动端上，它取出来的viewport.width和viewport.height跟设备的屏幕尺寸是不一致的，这是最令我困惑的地方。它接受一个参数scale，指缩放的比例，范围在0~1之间，1为不缩放。如果把scale设小一点，移动端能显示完全，但是pdf还是有偏移的。这个方法治标不治本。因为设备不一样，scale是不一样的。

后来我想到一点，既然scale<1，而deviceWidth / page.getViewport(1.0).width的值就是小于1的。然后尝试了这个方法，移动端能正常显示了。

另外，pdfjs-dist需要指定版本：https://blog.csdn.net/ju__ju/article/details/106941421

参考：

https://stackoverflow.com/questions/13038146/pdf-js-scale-pdf-on-fixed-width

https://blog.csdn.net/weixin_44402694/article/details/100152174