如何实现每个row div单独打印/导出PDF为A4页并隐藏无关元素

实现方案 #

你只需要在现有CSS基础上新增打印媒体查询规则即可满足所有需求，完整修改后的代码如下：

/* 原有屏幕端样式保留 */
body{
  background-color: #f1f1f1;
}
.main-page {
  width: 21cm;
  min-height: 29.7cm;
  margin: 1cm auto;
  background: white;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
  padding-left: 1.5cm;
  padding-top: 2cm;
  padding-right: .5cm;
}
.sub-page {
  height: 237mm;
}

/* 新增打印专属样式 */
@media print {
  /* 重置打印页基础属性，去掉灰色背景 */
  body {
    background: #fff !important;
    padding: 0;
    margin: 0;
  }
  /* 隐藏所有非打印区域元素，包括菜单、页脚等 */
  body > *:not(.main-page) {
    display: none !important;
  }

  .main-page {
    /* 取消屏幕端的边距和阴影效果 */
    margin: 0 !important;
    box-shadow: none !important;
    /* 强制每个页面容器单独占一页，避免内容被拆分 */
    page-break-after: always;
    page-break-inside: avoid;
    /* 保证背景色正常渲染，不被浏览器默认优化覆盖 */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 最后一页取消额外分页，避免导出PDF多出空白页 */
  .main-page:last-of-type {
    page-break-after: avoid;
  }
}

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