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 ]