vue-print-nb 获取页码

vue-print-nb 是一个 Vue.js 插件，用于将 Vue 组件或 HTML 元素转换为可打印的 PDF 或图片格式。它提供了一些配置项，可以通过设置 `pageNum` 来获取页码。

在使用 vue-print-nb 插件时，可以在 `print` 方法的参数中设置 `pageNum` ，例如：

this.$print(this.$refs.print, {
  pageNum: true
})

这样设置之后，生成的 PDF 或图片中会显示页码信息。如果要自定义页码的样式，可以在组件中通过 CSS 样式来实现。

相关问题

vue-print-nb怎么获取当前打印的第几页和打印总页数

要获取当前打印的第几页和打印总页数，你可以使用vue-print-nb的回调函数。具体实现步骤如下：

1. 在打印按钮上绑定一个方法，用来触发打印功能：

<el-button type="primary" @click="print">打印</el-button>

2. 在data中定义两个变量：currentPage和totalPage，分别用来存储当前页码和总页数。

data() {
  return {
    currentPage: 0,
    totalPage: 0
  }
}

3. 在print方法中，使用vue-print-nb提供的beforePrint和afterPrint回调函数，来获取当前页码和总页数：

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，来展示当前页码和总页数：

<p>当前页码：{{currentPage}}</p>
<p>总页数：{{totalPage}}</p>

以上这些步骤，可以帮助你在vue-print-nb中获取当前打印的第几页和打印总页数。

vue-print-nb 页码

vue-print-nb插件默认显示的页码是从网页内容的第一页开始递增的。如果你想自定义页码，你可以通过原生JavaScript代码来实现。下面是一个示例代码，展示如何使用vue-print-nb插件来自定义页码：

首先，在vue的main.js文件中，引入并注册vue-print-nb插件：

import Print from 'vue-print-nb'
Vue.use(Print);

然后，在你需要打印的组件中，添加v-print属性，值为一个对象，包含自定义页码的逻辑：

v-print="{
  id: 'printTest',  // 要打印的id名，无#号
  extraHead: '<style>@page { @bottom-right { content: "Page " counter(page) " of " counter(pages); } }</style>',  // 添加额外的CSS样式，用于定义页码格式
}"

这样，你就可以在打印预览中看到自定义的页码了。

请注意，上述代码中的extraHead属性值是一个包含CSS样式的字符串。在这个字符串中，我们使用了CSS的@page规则来定义页码的位置和格式。具体的样式可以根据需求进行自定义。

希望这个解答对你有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue中使用vue-print.js实现多页打印](https://download.csdn.net/download/weixin_38520046/13132971)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue-print-nb的使用与常见问题](https://blog.csdn.net/tang31415926/article/details/120863224)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]