求助：如何通过JavaScript实现循环生成的所有表格一键批量打印

我来帮你搞定这个问题～你现在只能打印一个表格的原因很简单：所有表格都用了同一个id="table"，而document.getElementById()只会返回页面中第一个匹配该id的元素，所以自然只能打印第一个表格啦。

下面是具体的修改步骤和完整代码：

步骤1：把表格的id改为class #

因为id在页面中必须唯一，而class可以重复使用，我们把每个表格的id="table"替换成class="print-table"：

@foreach (var item in Model) {
 <div class=" bg-white mb-5">
 <table class="table table-bordered border-dark print-table" style="font-size:14px" dir="rtl">
 <!-- 表格内容保持不变 -->
 </table>
 </div>
}

步骤2：修改打印函数，获取所有表格并拼接HTML #

把printDiv函数移到循环外面（避免重复定义函数），然后获取所有带print-table类的表格，把它们的HTML都拼到打印内容里：

<input type="submit" value="چاپ فیش" onclick="printDiv()" class="btn btn-outline-info">

<!-- 循环生成表格的代码放在这里 -->
@foreach (var item in Model) {
 <div class=" bg-white mb-5">
 <table class="table table-bordered border-dark print-table" style="font-size:14px" dir="rtl">
 <tr>
 <td colspan="2"><img src="~/img/vira.png" height="75px" width="80px" />
 </td>
 <td colspan="2" style="font-size:14px">فیش حقوقی و تسویه حساب پرسنل <br /> @item.projectName</td>
 <td colspan="2">فیش حقوقی @item.month ماه @item.yeur </td>
 </tr>
 <tbody class="bg-white ">
 <tr>
 <td colspan="2" class="table-borderless" style="font-size:12px">نام و نام خانوادگی : @item.PersonName @item.PersonFamily</td>
 <td colspan="2" class="">کد پرسنلی : @item.PersonleCode</td>
 <td colspan="2" class="ml-3">کد ملی : @item.PersonCode</td>
 </tr>
 <tr class=" table-warning">
 <td>اطلاعات پایه</td>
 <td>کارکرد</td>
 <td>حقوق مزایا</td>
 <td>مبلغ (ریال)</td>
 <td>کسورات</td>
 <td>مبلغ (ریال)</td>
 </tr>
 <tr>
 </tr>
 <tr class="table-secondary text-center">
 <td colspan="1">جمع پرداختی</td>
 <td colspan="2">@item.TotalPayment.ToString(numSpace) (ریال)</td>
 <td colspan="1">جمع کسورات</td>
 <td colspan="2">@item.TotalKosorat.ToString(numSpace) (ریال)</td>
 </tr>
 <tr>
 <td colspan="3"> خالص پرداختی</td>
 <td colspan="3">@item.TotalPayable.ToString(numSpace) (ریال)</td>
 </tr>
 </tbody>
 </table>
 </div>
}

<!-- 打印函数放在循环外面 -->
<script>
 function printDiv() {
 // 获取所有需要打印的表格
 var tablesToPrint = document.querySelectorAll('.print-table');
 var htmlToPrint = '' + '<style type="text/css">' + 
 'table th, table td {' + 
 'font-family:vazir;' + 
 'border:1px solid #000;' + 
 'text-align:center;' + 
 'padding:0.5em;' + 
 '}' + 
 'table {' + 
 'margin-bottom: 30px;' + // 给每个表格加底部间距，打印时分开显示
 'width: 100%;' + 
 '}' + 
 '</style>';

 // 遍历所有表格，把它们的HTML拼起来
 tablesToPrint.forEach(table => {
 htmlToPrint += table.outerHTML;
 });

 newWin = window.open("");
 newWin.document.write(htmlToPrint);
 newWin.print();
 newWin.close();
 }
</script>

关键说明： #

• document.querySelectorAll('.print-table')会返回页面中所有带print-table类的表格元素，这样就能获取到所有循环生成的表格了。
• 在样式里给表格加margin-bottom: 30px，是为了让每个表格在打印预览里保持独立，不会挤在一起。
• 把script标签移到循环外面，避免每次循环都重新定义printDiv函数，造成不必要的重复和潜在问题。

这样修改后，点击按钮就能一次性打印所有生成的表格啦！

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