AngularJS中如何仅打印自定义复选框选中的表格？

你的思路完全可行，而且是AngularJS场景下非常贴合的实现方案！利用ng-class动态给未选中的表格添加no-print类，配合打印媒体查询的CSS规则，就能精准控制只打印选中状态对应的表格。下面是具体的落地步骤和细节优化：

1. 确保打印CSS规则生效 #

首先要保证你的打印样式里no-print类的规则足够明确，避免被其他样式覆盖：

@media print {
  .no-print {
    display: none !important;
  }
  /* 可选：隐藏打印按钮本身，避免打印时显示 */
  .print-btn {
    display: none !important;
  }
}

这里的!important是关键，能强制覆盖表格可能存在的默认display样式，确保未选中的表格在打印时完全隐藏。

2. 给表格绑定动态类 #

根据每个复选框的状态变量，给对应表格绑定ng-class：

<!-- 第一个表格：对应checkBoxPrint1变量 -->
<table ng-class="{'no-print': !checkBoxPrint1}">
  <!-- 表格内容 -->
</table>

<!-- 第二个表格：对应checkBoxPrint2变量 -->
<table ng-class="{'no-print': !checkBoxPrint2}">
  <!-- 表格内容 -->
</table>

逻辑很清晰：当复选框未选中（checkBoxPrintX为false）时，表格会被加上no-print类，打印时就会被隐藏；反之选中状态下（checkBoxPrintX为true），表格保持正常显示，会被打印。

3. 验证复选框状态同步 #

确保你的自定义复选框按钮确实能正确切换状态变量：

<!-- 第一个自定义复选框 -->
<button class="btn btn-lg btn-customPrint-md no-print" ng-click="checkBoxPrint1 = !checkBoxPrint1">
  <i class="fa fa-1x" ng-class="checkBoxPrint1 ? 'fa-square-o' : 'fa-check-square-o'"></i>
</button>

<!-- 第二个自定义复选框 -->
<button class="btn btn-lg btn-customPrint-md no-print" ng-click="checkBoxPrint2 = !checkBoxPrint2">
  <i class="fa fa-1x" ng-class="checkBoxPrint2 ? 'fa-square-o' : 'fa-check-square-o'"></i>
</button>

这里要注意ng-class的逻辑：当checkBoxPrintX为true时显示未选中图标（fa-square-o），反之显示选中图标（fa-check-square-o），和你之前的代码逻辑一致，确保状态变量和图标显示同步。

4. 优化打印按钮（可选） #

给打印按钮加上no-print类避免被打印，同时保持原有的打印逻辑：

<button class="btn btn-lg btn-custom-md pull-right no-print" ng-click="vm.$window.print()">
  <i class="fa fa-print fa-2x"></i>
</button>

测试建议 #

用浏览器的打印预览（Ctrl+P）功能测试，这样不需要实际打印就能快速验证效果，调整样式或逻辑。

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