vue-print-nb怎么获取当前打印的第几页和打印总页数
时间: 2023-07-21 08:38:25 浏览: 1587
VUE页码控件
要获取当前打印的第几页和打印总页数,你可以使用vue-print-nb的回调函数。具体实现步骤如下:
1. 在打印按钮上绑定一个方法,用来触发打印功能:
```html
<el-button type="primary" @click="print">打印</el-button>
```
2. 在data中定义两个变量:currentPage和totalPage,分别用来存储当前页码和总页数。
```javascript
data() {
return {
currentPage: 0,
totalPage: 0
}
}
```
3. 在print方法中,使用vue-print-nb提供的beforePrint和afterPrint回调函数,来获取当前页码和总页数:
```javascript
methods: {
print() {
this.$print(this.$refs.print).then(() => {
// 打印完成后回调
}).catch(() => {
// 打印失败后回调
}).beforePrint(() => {
// 打印前回调
this.currentPage = 0
this.totalPage = 0
}).afterPrint(() => {
// 打印后回调
}).printPage(() => {
// 打印每一页时回调
this.currentPage++
}).printEnd(() => {
// 打印结束时回调
this.totalPage = this.currentPage
})
}
}
```
4. 在模板中,使用{{}}语法绑定currentPage和totalPage,来展示当前页码和总页数:
```html
<p>当前页码:{{currentPage}}</p>
<p>总页数:{{totalPage}}</p>
```
以上这些步骤,可以帮助你在vue-print-nb中获取当前打印的第几页和打印总页数。
阅读全文