近期vue移动端项目中遇到了页面内，嵌套展示pdf内容。实现方法很多种，可以用iframe嵌套，但不利于引擎优化seo。所以在网上找到了vue-pdf这个插件，这个插件非常好用，其中封装的方法也很多，属性能进行功能扩展。
接下来开始使用
第一步、安装
npm install --save vue-pdf第二步、使用
<template> <div class="pdf"> <pdf :src="pdfUrl"> </pdf> </div> </template> <script>import pdf from 'vue-pdf'export default{ components:{ pdf }, data(){ return{ pdfUrl:"pdf存放位置", } } </script>
注意： 1、通过import pdf from 'vue-pdf' 进行引入，components:{ pdf }进行注册
2、可能存在跨域问题，这里的src并不能实现jsonp的功能。（这里需要后端配合处理，或者自己写个代理服务器）
三、相关API
Props属性
:src String/Object pdf的链接，可以是相对、绝对地址或者是一个pdf的加载任务
:page Number-default:1 需要展示pdf的第几页；
:rotate Number-default:0 pdf的旋转角度，‘90’的倍数才有效；
Events回调
@password updatePassword，reason updatePassword:函数提示需要输入的密码；
reason:提示（'NEED_PASSWORD' or 'INCORRECT_PASSWORD'）；
@progress Number pdf的页面的加载进度，Rang[0,1]；
@page-loaded Number pdf某个页面加载成功回调，number为页面索引值；
@num-pages Number 监听pdf加载，获取pdf的页数；
@error Object pdf加载失败回调；
@link-clicked Number 单机内部链接时触发；
Public methods公共方法
print(dpi,pageList)
调用浏览器打印功能；
- dpi打印的分辨率（100）
- pageList需要打印的页面array
Public static methods静态方法
createLoadingTask(src)
这个方法创建一个当前pdf的加载任务，可以作为:src使用或者公开的获取当前pdf的页面总数；
四、相关示例
由于pdf文档可能有很多页，解析时不会当做一张大图进行处理，默认只会展示第一页内容，想要全部查看需要进行特殊处理
1、上一页下一页进行翻阅
<pdf :src="path":page="currentPage"@progress="loadedRatio = $event"@num-pages="pageCount=$event"@page-loaded="currentPage=$event"@loaded="loadPdfHandler"ref="wrapper"class="pdf"></pdf>翻页缩小： <ul class="footers"> <li :class="{select:idx==2}"@touchstart="idx=2"@touchend="idx=-1"@click="changePdfPage(0)"> <p>上一页</p> </li> <li :class="{select:idx==3}"@touchstart="idx=3"@touchend="idx=-1"@click="changePdfPage(1)"> <p>下一页</p> </li> </ul> import pdf from "vue-pdf"; export default { name: "inspectionPresentation", components: { pdf }, data() { return { currentPage: 0, // pdf文件页码 pageCount: 0, // pdf文件总页数 path: this.$route.params.path, scale: 100, //放大系数 idx: -1, clauseTitle: "", loadedRatio: 0 }; }, methods{ // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页 changePdfPage(val) { if(val === 0 && this.currentPage > 1) { this.currentPage--; } if(val === 1 && this.currentPage <this.pageCount) { this.currentPage++; } }, goBack() { this.$router.go(-1); }, // pdf加载时 loadPdfHandler(e) { this.currentPage = 1; // 加载的时候先加载第一页 }, //放大 scaleD() { this.scale += 5; // this.$refs.wrapper.$el.style.transform = "scale("+ this.scale + ")"; this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%"; }, //缩小 scaleX() { if(this.scale == 100) { return; } this.scale += -5; this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%"; // this.$refs.wrapper.$el.style.transform = "scale("+ this.scale + ")"; }, }
2、滚动加载、显示全部
这里写法注意点：
网上大部分写法是this.pdfSrc.then(），这种写法是不正确的，会报this.pdfSrc.then is not a function 错误
正确写法： this.pdfSrc = pdf.createLoadingTask(this.pdfSrc)
this.pdfSrc.promise.then(pdf => {
this.numPages = pdf.numPages
})<pdf v-for="i in numPages":key="i":src="pdfSrc":page="i"> </pdf>import pdf from 'vue-pdf' components: { pdf} previewPdf(url){ this.pdfSrc=url this.pdfSrc = pdf.createLoadingTask(this.pdfSrc) this.pdfSrc.promise.then(pdf => { this.numPages = pdf.numPages }) },