前端打印添加当前页和总页数

Question

项目上有一个需求，需要在打印的时候加上当前页和总页数，本人用的打印插件是vue-print-nb,打印模板主要是表头一些内容以及表格明细行，，但是行高和宽度都不是固定的，并且还有批量打印的功能，请问这种情况怎么计算页码和总页数啊，附上打印模板：

Answer 1

引自免费微信小程序：皆我百晓生

为了实现 Vue.js 项目中打印时显示当前页和总页数，你需要在打印模板上动态计算并插入这些信息。由于你提到使用了vue-print-nb插件，并且表格行高和宽度不固定，批量打印时需要预先进行分页处理。这里提供一种思路，但请注意由于没有实际运行环境和完整代码参考，以下方案可能需要根据你的实际情况调整：

首先，确保你的数据列表（tableData）在分页后能正确反映每一页的内容。然后，在打印预览时可以利用浏览器的打印事件来模拟分页并获取总页数。

1. 针对每一项内容，计算其在页面中的实际高度，结合页面的高度（例如：A4纸默认为 297mm 或 11.69in），判断是否超过一页。通过 CSS 的媒体查询（@media print）设置合适的样式以适应打印格式。

@media print {
  body {
    margin: 0;
    padding: 0;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  /* 其他针对打印优化的样式 */
}

1. 在 Vue 组件中监听打印事件，利用 JavaScript 计算实际分页：

export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 0,
      // 假设这是你的数据源
      tableData: [...],
      pageSize: // 页面可容纳的最大行数（根据实际情况计算）
    };
  },
  methods: {
    async calculatePages() {
      const pageHeight = 11.69 * 96; // 将A4纸高度转换为像素
      let currentHeight = 0;
      
      this.totalPages = Math.ceil(this.tableData.length / this.pageSize);
      
      for (let i = 0; i < this.tableData.length; i++) {
        // 这里假设 getRowHeight 是一个函数，用于计算单行内容在打印时的实际高度
        const rowHeight = await this.getRowHeight(this.tableData[i]);
        if ((currentHeight + rowHeight) > pageHeight) {
          this.currentPage++;
          currentHeight = rowHeight;
          // 如果已到达最大页数，则跳出循环
          if (this.currentPage > this.totalPages) break;
        } else {
          currentHeight += rowHeight;
        }
      }
    },
    
    onBeforePrint() {
      this.calculatePages();
      // 动态插入页码到DOM
      const pageInfo = document.createElement('div');
      pageInfo.textContent = `第 ${this.currentPage} 页 / 共 ${this.totalPages} 页`;
      document.body.appendChild(pageInfo);
    },
    
    onAfterPrint() {
      // 打印完成后移除临时插入的页码信息
      const pageInfo = document.querySelector('div.page-info');
      if (pageInfo) pageInfo.remove();
    },
  },
  mounted() {
    window.addEventListener('beforeprint', this.onBeforePrint);
    window.addEventListener('afterprint', this.onAfterPrint);
  },
  beforeDestroy() {
    window.removeEventListener('beforeprint', this.onBeforePrint);
    window.removeEventListener('afterprint', this.onAfterPrint);
  },
};

1. 在你的打印模板中预留位置放置页码信息，如 <div class="page-info"></div>。

2. 根据以上代码逻辑，当触发打印时会自动计算并插入当前页和总页数。但需要注意的是，由于不同浏览器对于打印预览的高度计算可能存在差异，这种方法可能需要进一步调试和完善。

最后，由于vue-print-nb插件的具体用法未在问题中提及，若该插件提供了自定义打印模板或类似功能，请查阅其文档以了解如何更好地整合上述方案。