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

最新推荐文章于 2025-05-16 16:09:49 发布

Huohuohuowy

最新推荐文章于 2025-05-16 16:09:49 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js ios android

本文链接：https://blog.youkuaiyun.com/Huohuohuowy123/article/details/107718730

在Vue项目中使用pdfjs-dist处理PDF时，在移动端H5上出现显示不全的问题。由于不同设备分辨率和屏幕尺寸差异，canvas的宽度需要乘以高分屏比例以避免模糊。PDF的viewport.width和viewport.height与屏幕尺寸不一致，调整scale虽可暂时解决，但无法根本解决不同设备间的适配。通过deviceWidth与page.getViewport(1.0).width的比例，可以实现移动端PDF的正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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.scree