这玩意的坑是相当的多，如果只是单纯的网页浏览，真心建议直接使用 <iframe> 来进行嵌入pdf吧，省心也省事
我这边的web页面是需要放到客户端里面的，然后由于某些原因吧，不支持显示iframe嵌入的pdf网页，只能使用vue-pdf来进行实现了
下面就说一下实现步骤吧，我尽量说的通俗易懂一些：
首先呢，我们需要下载vue-pdf：（我的版本是4.3.0）
npm install --save vue-pdf
然后，我们去到需要展示的vue页面，引入vue-pdf
import pdf from "vue-pdf"
在components中注册一下
components: {pdf}
还是贴上代码吧，不然谁看谁蒙圈
1.template中的pdf代码
<div class="zsqy">
<pdf
v-for="item in numPages"
:rotate="pageRotate"
:key="item"
:src="src"
:page="item"
ref="pdf"
/>
</div>
2.引入、注册代码：（这块在上面写了 ）
3.data中vue-pdf我用的相关参数：
4.在crreated中调用：
created() { this.src = pdf.createLoadingTask("https://cw.picimos.com/site/guihua.pdf"); this.loadPdfHandler(); },
loadPdfHandler() {
this.src.promise.then((pdf) => {
this.numPages = pdf.numPages;
});
},
值得一提的是网上有很多写这个方法的时候，把promise去掉了，非常多。。。
//旋转方法，我写的是顺时针，只写了一个按钮，有需求可以写两个
setXz() { this.pageRotate += 90; },
//放大方法，这个也有个搞笑的，网上有些人 把pdf[0].$el写成pdf.$el setFd() { this.scale += 15; this.$refs.pdf[0].$el.style.width = parseInt(this.scale) + "%"; },
//缩小方法
setSx() {
// scale 是百分百展示 不建议缩放
if (this.scale == 100) {
return;
}
this.scale += -15;
this.$refs.pdf[0].$el.style.width = parseInt(this.scale) + "%";
},
我这里用到的方法不是很多，只用到了放大缩小旋转，其他功能由于项目不需要我也就没有去实现。
还有一些细微的坑！ 由于vue-pdf是基于pdfjs来进行封装的，导致我们打包的时候会多出来2个worker.js和map文件，这两个文件需要在服务器上运行时才可以，不然是读取不到本地文件的，
研究了半天源码，也没解决