vue 使用 vue-pdf 实现pdf在线预览的示例代码

pdf
},
data(){
return{
url: '',
numPages:1,
}
},
mounted: function() {
this.getNumPages("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf")

},
methods: {
getNumPages(url) {
var loadingTask = pdf.createLoadingTask(url)
loadingTask.then(pdf => {
this.url = loadingTask
this.numPages = pdf.numPages
}).catch((err) => {
console.error('pdf加载失败')
})
},
}
}
</script>

各个属性：

url ：pdf 文件的路径，可以是本地路径，也可以是在线路径。
numPages ： pdf 文件总页数。

getNumPages 计算总页数，顺便给url和numPages赋值。

唯一需要大家注意的是这句：

this.getNumPages("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf")

注意啊，这句不一定非要写到mounted里面，你想写哪就写哪，比如你前端请求后端，后端返回一个pdf 的url，在那里写就行，写在你需要的地方。

vue-pdf 轻车熟路：

很多人看到这，就这，就这？万一，我pdf有一千页，我浏览器还不得裂开，我追求的是那种在微醺的下午，一页一页的翻看的感觉，你能给我吗？

我不能，才怪，保证满足你。

<template>
 <div>
 <div class="tools">
  <bk-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="prePage" class="mr10"> 上一页</bk-button>
  <bk-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="nextPage" class="mr10"> 下一页</bk-button>
  <div class="page">{{pageNum}}/{{pageTotalNum}} </div>
  <bk-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="clock" class="mr10"> 顺时针</bk-button>
  <bk-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="counterClock" class="mr10"> 逆时针</bk-button>
 </div>
 <pdf ref="pdf"
 :src="url"
 :page="pageNum"
 :rotate="pageRotate"
 @progress="loadedRatio = $event"
 @page-loaded="pageLoaded($event)"
 @num-pages="pageTotalNum=$event"
 @error="pdfError($event)"
 @link-clicked="page = $event">
 </pdf>
 </div>
</template>

接下来，我们一一介绍这些都是个啥。

参数介绍：

page: 当前显示的页数，比如第一页page=1
rotate ： 旋转角度，比如0就是不旋转，+90，-90 就是水平旋转。
progress ：当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了。
page-loaded ：页面加载成功的回调函数，不咋能用到。