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

最新推荐文章于 2024-03-22 09:54:18 发布

VIP文章 Huohuohuowy

最新推荐文章于 2024-03-22 09:54:18 发布

阅读量3k

点赞数

文章标签： vue.js ios android

本文链接：https://blog.csdn.net/Huohuohuowy123/article/details/107718730

版权

在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