vue-pdf 一个基于vue的pdf预览插件(vue2.x)

vue-pdf 的使用示例 官方入口>>> github地址

vue版本: "vue": "^2.6.14"
vue-pdf版本: "vue-pdf": "^4.2.0"、"vue-pdf": "^4.3.0"
安装指令: npm install --save vue-pdf

1、分页显示：
效果图：

组件模板:

<template>
  <div class="pdf">
    <div class="show">
      <pdf
        ref="pdf"
        :src="pdfUrl"
        :page="pageNum"
        :rotate="pageRotate"
        @password="password"
        @progress="loadedRatio = $event"
        @page-loaded="pageLoaded($event)"
        @num-pages="pageTotalNum = $event"
        @error="pdfError($event)"
        @link-clicked="page = $event"
      >
      </pdf>
    </div>

    <div class="pdf_footer">
      <div class="info">
        <div>当前页数/总页数：{ 
   { 
    pageNum }}/{ 
   { 
    pageTotalNum }}</div>
        <div>进度：{ 
   { 
    loadedRatio }}</div>
        <div>页面加载成功: { 
   { 
    curPageNum }}</div>
      </div>
      <div class="operate">
        <div class="btn" @click.stop="clock">顺时针</div>
        <div class="btn" @click.stop="counterClock">逆时针</div>
        <div class="btn" @click.stop="prePage">上一页</div>
        <div class="btn" @click.stop="nextPage">下一页</div>
        <div class="btn" @click="scaleD">放大</div>
        <div class="btn" @click="scaleX">缩小</div>
        <div class="btn" @click="pdfPrint()">打印所有指定页</div>
        <div class="btn" @click="pdfPrintAll()">打印所有</div>
        <div class="btn" @click="logContent()">获取页面信息</div>
        <div class="btn" @click="fileDownload(pdfUrl, 'pdf文件')">下载</div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import pdf from "vue-pdf";
export default { 
   
  name: "vue_pdf_preview",
  props: { 
   
    // 当前pdf路径
    pdfUrl: { 
   
      type: String,
      default:
        "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
    },
  },
  components: { 
   
    pdf,
  },
  data() { 
   
    return { 
   
      // 总页数
      pageTotalNum: 1,
      // 当前页数
      pageNum: 1,
      // 加载进度
      loadedRatio: 0,
      // 页面加载完成
      curPageNum: 0,
      // 放大系数 默认百分百
      scale: 100,
      // 旋转角度 ‘90’的倍数才有效
      pageRotate: 0,
      // 单击内部链接时触发 (目前我没有遇到使用场景)
      page: 0,
    };
  },
  watch: { 
   },
  computed: { 
   },
  created() { 
   },
  mounted() { 
   },
  methods: { 
   
    //下载PDF
    fileDownload(data, fileName) { 
   
      let blob = new Blob([data], { 
   
        //type类型后端返回来的数据中会有，根据自己实际进行修改
        type: "application/pdf;charset-UTF-8",
      });
      let filename = fileName || "pdf.pdf";
      if (typeof window.navigator.msSaveBlob !== "undefined") { 
   
        window.navigator.msSaveBlob(blob, filename);
      } else { 
   
        var blobURL = window.URL.createObjectURL(blob);
        // 创建隐藏<a>标签进行下载
        var tempLink = document.createElement("a");
        tempLink.style.display = "none";
        tempLink.href = blobURL;
        tempLink.setAttribute("download", filename);
        if (typeof tempLink.download === "undefined") { 
   
          tempLink.setAttribute("target", "_blank");
        }
        document.body.appendChild(tempLink);
        tempLink.click();
        document.body.removeChild(tempLink);
        window.URL.revokeObjectURL(blobURL);
      }
    },

    //放大
    scaleD() { 
   
      this.scale += 5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },

    //缩小
    scaleX() { 
   
      // scale 是百分百展示 不建议缩放
      if (this.scale == 100) { 
   
        return;
      }
      this.scale += -5;
      console.log(parseInt(this.scale) + "%");
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
    // 切换上一页
    prePage() { 
   
      var p = this.pageNum;
      p = p > 1 ? p - 1 : this.pageTotalNum;
      this.pageNum = p;
    },
    // 切换下一页
    nextPage() { 
   
      var p = this.pageNum;
      p = p < this.pageTotalNum ? p + 1 : 1;
      this.pageNum = p;
    },
    // 顺时针选中角度
    clock() { 
   
      this.pageRotate += 90;
    },
    // 逆时针旋转角度
    counterClock() { 
   
      this.pageRotate -= 90;
    },
    // pdf 有密码 则需要输入秘密
    password(updatePassword, reason) { 
   
      updatePassword(prompt('password is "test"'));
      console.log("...reason...");
      console.log(reason);
      console.log("...reason...");
    },
    // 页面加载成功 当前页数
    pageLoaded(e) { 
   
      this.$emit("current", e);
      this.curPageNum = e;
    },
    // 异常监听
    pdfError(error) { 
   
      console.error(error);
    },
    // 打印所有
    pdfPrintAll() { 
   
      this.$refs.pdf.print();
    },
    // 打印 第一页和第二页
    pdfPrint() { 
   
      // 第一个参数 文档打印的分辨率
      // 第二个参数 文档打印的页数
      this.$refs.pdf.print(100, [1, 2]);
    },
    // 获取当前页面pdf的文字信息内容
    logContent() { 
   
      this.$refs.pdf.pdf.forEachPage(function (page) { 
   
        return page.getTextContent().then(function (content) { 
   
          let text = content.items.map((item) => item.str);
          let allStr = content.items.reduce(
            (initVal, item) => (initVal += item.str),
            ""
          );
          console.log(allStr); // 内容字符串
          console.log(text); // 内容数组
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pdf { 
   
  padding: 20px;
  .show { 
   
    overflow: auto;
    margin: auto;
    max-width: 75%;
    height: 80vh;
    // max-height: 530px;
  }
  .pdf_footer { 
   
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 0;
    background-color: rgba(255, 255, 255, 0.5);
    .info { 
   
      display: flex;
      flex-wrap: wrap;
      div { 
   
        width: 30%;
      }
    }
    .operate { 
   
      margin: 10px 0 0;
      display: flex;
      flex-wrap: wrap;
      div { 
   
        // width: 80px;
        text-align: center;
        font-size: 15px;
      }
      .btn { 
   
        cursor: pointer;
        margin: 5px 10px;
        width: 120px;
        border-radius: 10px;
        padding: 5px;
        color: #fff;
        background-color: #3dcbbc;
      }
    }
  }
}
</style>

2、整页显示：
效果图：

组件模板：

<template>
  <div class="pdf">
    <pdf v-for="i in numPages" :key="i" :src="laoclUrl" :page="i"></pdf> 
  </div>
</template>

<script>
/* eslint-disable */
import pdf from 'vue-pdf'
export default { 
   
  name: "index",
  props: { 
   
    // 当前pdf的路径
    pdfUrl: { 
   
      type: String,
      default: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
    }
  },
  components: { 
   
    pdf 
  },
  data () { 
   
    return { 
   
     // 当前页数
      numPages: 1,
      // 预览路径
      laoclUrl: '',
    };
  },
  watch: { 
   },
  computed: { 
   },
  created () { 
   
    this.laoclUrl = this.pdfUrl;
  },
  mounted () { 
   
    this.getNumPages()
  },
  methods: { 
   
    getNumPages() { 
   
      let loadingTask = pdf.createLoadingTask(this.laoclUrl)
      // 网上查询 都没有加promise执行的整页渲染 emmmm... 不知道他们怎么运行的
      loadingTask.promise.then(pdf => { 
   
        // this.laoclUrl = loadingTask
        this.numPages = pdf.numPages
      }).catch((err) => { 
   
        console.error('pdf加载失败')
      })
    },
  }
}
</script>

<style lang="scss" scoped>
</style>

关于旋转时err：Cannot read properties of undefined (reading ‘catch’)，网上查询都是修改node_modules源码，不建议这样操作。
目前没有什么解决方法，且报错不影响正常功能操作，有强迫症患者可以去修改源码中的 pdfjsWrapper.js文件

this.renderPage = function(rotate) { 
   
	if ( pdfRender !== null ) { 
   
		if ( canceling )
			return;
		canceling = true;
		//pdfRender.cancel().catch(function(err) { 
   
		// emitEvent('error', err);
		//});
		// 修改这里
		pdfRender.cancel()；
		return;
	}
	//....
}