Vue.js打印页面：修复row元素分页异常及自定义分页需求

一、禁止卡片跨页拆分 #

直接用CSS打印媒体查询中的page-break-inside（兼容旧浏览器）和break-inside（现代标准）属性，强制浏览器避免在学生卡片内部分页：

@media print {
  /* 替换成你的学生卡片实际类名 */
  .student-card {
    page-break-inside: avoid;
    break-inside: avoid;
    /* 确保元素为块级，部分浏览器需此设置生效 */
    display: block;
  }
}

这个设置会让浏览器尽可能将整个卡片放在同一页；若单张卡片高度超过一页，仍会分页，但正常场景下不会拆分单张卡片。

二、在第12个卡片后强制分页 #

提供两种实现方式，可根据你的DOM结构选择：

方式1：纯CSS选择器控制 #

利用nth-child选择器定位第12、24...个卡片，设置强制分页：

@media print {
  /* 若卡片嵌套在列元素内，需调整选择器为.row .col:nth-child(12n) */
  .student-card:nth-child(12n) {
    page-break-after: always;
    break-after: page;
  }
}

方式2：Vue模板动态插入分页标记 #

如果需要更精准的索引控制（比如循环从0开始的场景），在Vue循环中插入分页元素：

<template>
  <div class="row">
    <div 
      class="student-card col-md-3" 
      v-for="(student, index) in studentList" 
      :key="student.id"
    >
      <!-- 学生卡片内容 -->
      <h3>{{ student.name }}</h3>
      <p>{{ student.class }}</p>
    </div>
    <!-- 第12个卡片后插入分页（index从0开始，(index+1)%12===0对应第12、24...个） -->
    <div class="print-page-break" v-if="(index + 1) % 12 === 0"></div>
  </div>
</template>

<style>
/* 屏幕上隐藏分页元素 */
.print-page-break {
  display: none;
}

@media print {
  .print-page-break {
    display: block;
    page-break-after: always;
    break-after: page;
    height: 0;
    visibility: hidden;
  }
}
</style>

额外注意事项 #

• 确保父容器（如.row）未设置overflow: hidden，否则分页属性可能失效
• 若使用Flex/Grid布局，可在打印媒体查询中临时将父容器改为块级布局，避免布局挤压导致分页异常：

@media print {
  .row {
    display: block;
  }
  .student-card {
    display: block;
    margin-bottom: 1rem;
    page-break-inside: avoid;
  }
}

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