安装和导入
npm install --save vue-pdf
导入模块
import pdf from "vue-pdf";
导入pdf组件
components: {
pdf,
},
HTML
<div #="pdf">
<div class="pdf-tab">
<div
class="btn-def btn-pre"
@click.stop="prePage">上一页</div>
<div
class="btn-def btn-next"
@click.stop="nextPage">下一页</div>
<div
class="btn-def"
@click.stop="clock">顺时针</div>
<div
class="btn-def"
@click.stop="counterClock">逆时针</div>
<div
class="btn-def"
@click.stop="pdfPrintAll">全部打印</div>
<div
class="btn-def"
@click.stop="pdfPrint">部分打印</div>
</div>
<div>{{pageNum}}/{{pageTotalNum}}</div>
<div>进度:{{loadedRatio}}</div>
<div>页面加载成功: {{curPageNum}}</div>
<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>
data变量
pdfUrl:"xxx.pdf",//pdf地址
pageNum:1,
pageTotalNum:1,
pageRotate:0,
// 加载进度
loadedRatio:0,
curPageNum:0,
}
js
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
},
password(updatePassword, reason) {
updatePassword(prompt('password is "123456"'))
console.log('...reason...')
console.log(reason)
console.log('...reason...')
},
pageLoaded(e){
this.curPageNum = e
},
pdfError(error){
console.error(error)
},
pdfPrintAll(){
this.$refs.pdf.print()
},
pdfPrint(){
this.$refs.pdf.print(100,[1,2])
},