vue 打印插件 可以计算页码

可以使用 vue-print-nb 插件来实现 Vue 打印并计算页码的功能。

下面是使用 vue-print-nb 插件实现打印并计算页码的步骤：

1. 安装依赖：

npm install --save vue-print-nb

2. 在需要打印的组件中，使用 `<vue-print-nb>` 组件包裹需要打印的内容：

<template>
  <div>
    <vue-print-nb>
      <!-- 需要打印的内容 -->
    </vue-print-nb>
  </div>
</template>

3. 在需要计算页码的地方，使用 `$nextTick` 方法等待组件渲染完毕后再进行计算：

<template>
  <div>
    <vue-print-nb>
      <!-- 需要打印的内容 -->
    </vue-print-nb>
    <div>总页数：{{ pageCount }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageCount: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      const printContent = document.querySelector('.print-content')
      this.pageCount = Math.ceil(printContent.offsetHeight / this.$refs.print.nbOptions.printPageHeight)
    })
  }
}
</script>

在上面的代码中，我们使用 `$refs` 来获取打印组件实例，然后通过 `printPageHeight` 属性获取每页的高度，再通过 `offsetHeight` 获取打印内容的总高度，最后用总高度除以每页高度得到总页数。

以上就是使用 vue-print-nb 插件实现 Vue 打印并计算页码的方法，希望能对您有所帮助。