使用Mustache将每30个QR码分组到div实现打印模板分页

方案1：纯CSS打印分页（无需修改现有DOM/模板） #

你已经标记了第30n个元素，直接配置打印样式即可实现自动分页：

@media print {
  /* 全局打印盒模型重置，避免边距溢出 */
  * {
    box-sizing: border-box;
  }
  /* 禁止单个二维码被拆分到两页 */
  .qr-item {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* 第30个元素后强制分页，如果你已经有自定义的第30n元素类名，直接替换下方选择器 */
  .qr-item:nth-child(30n) {
    page-break-after: always;
    break-after: page;
  }
  /* 适配打印模板尺寸，按需修改 */
  @page {
    size: A4;
    margin: 15mm;
  }
}

方案2：JS预分组渲染（兼容性更好，可控性更高） #

如果部分浏览器对CSS伪类分页支持异常，可以提前将数据按每页30个分组后再渲染：

步骤1：数据分组处理 #

const QR_PER_PAGE = 30
// 原始二维码数据数组
const rawQrData = [/* 你的350条二维码数据 */]
// 按页分组
const pagedQrData = rawQrData.reduce((res, item, idx) => {
  const pageIdx = Math.floor(idx / QR_PER_PAGE)
  res[pageIdx] ? res[pageIdx].push(item) : res[pageIdx] = [item]
  return res
}, [])

步骤2：修改Mustache模板 #

{{#pagedQrData}}
<div class="print-page">
  {{#.}}
  <div class="qr-item">
    <!-- 原有二维码渲染逻辑 -->
    <img src="{{qrUrl}}" alt="QR码">
    <p>{{qrDesc}}</p>
  </div>
  {{/.}}
</div>
{{/pagedQrData}}

步骤3：配套CSS #

@media print {
  .print-page {
    page-break-after: always;
    break-after: page;
    min-height: 100vh;
    /* 页内二维码排版，按需调整列数和间距 */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  /* 最后一页不需要强制分页，避免多余空白页 */
  .print-page:last-child {
    page-break-after: avoid;
    break-after: avoid;
  }
  .qr-item {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  @page {
    size: A4;
    margin: 15mm;
  }
}

常见问题排查 #

• 打印时出现元素偏移：检查屏幕样式和打印样式的边距、字体大小差异，可在@media print内单独重置相关属性
• 单页二维码数量超过30：调整grid列数、单个qr-item的尺寸或者@page的边距，确保单页容器可放下30个二维码

内容的提问来源于stack exchange，提问作者SWare