VUE Print.js 配置页脚 第几页/共几页

Vue Print.js 是一个用于在浏览器上生成预览和打印 PDF 的库，它允许您自定义打印的内容，包括页眉和页脚。在配置页面范围信息时，通常会在 `printJS` 对象的 `headerTemplate` 和 `footerTemplate` 属性中设置。页脚部分通常包含诸如“第 {page} / {totalPages} 页”的文本，表示当前页码和总页数。

例如，在 Vue 中，你可以这样做：

<template>
  <!-- ... -->
</template>

<script>
import PrintJS from 'print-js';

export default {
  data() {
    return {
      printConfig: {
        headerTemplate: '<span>我的头部信息</span>',
        footerTemplate: '<div>第 {{ $page }} / {{ totalPages }}</div>', // 使用 Vue 的计算属性 totalPrice
        pageRange: true,
        type: 'pdf', // 或者其他支持的类型如 'html'、'canvas'
      },
    };
  },
  methods: {
    async printDocument() {
      const doc = await PrintJS.getDoc(this.printConfig.type, this.getDocumentData()); // 获取你的文档数据
      await doc.print({ config: this.printConfig });
    },
    // ...其他方法
  },
};
</script>

在这个例子中，`$page` 是 Vue 自带的内置指令，会自动更新为当前页码，`totalPages` 可以通过计算总页数来设置。记得替换 `this.getDocumentData()` 为实际获取文档内容的函数。