js构建表单使用window.print()分页批量打印

定义要打印的视图容器id='printDetailDiv'

首先，添加要展示的标签和一个容器body，我这里body用来展示表格

<label class="form-label custom-col">收货单位：</label>
            <label class="form-label custom-col" id="id_customer"></label>
            <label class="form-label custom-rcol" id="id_loadDate"></label>
<label class="form-label custom-rcol">装货日期：</label>
<tbody id="id_body">
</tbody>

拼接要渲染的html

var printHtml = "";
//  打印的每页的数据
for (i = 0; i < selectList.length; i++) {
                    $("#id_customer").text(selectList[i].customer);
                    $("#id_loadDate").text(this.dateFormat(selectList[i].loadDate));
                    ...
                    var body = document.getElementById("id_body")
                    body.innerHTML = "";  // 重置body内容
                    //  每页中表格的数据
                    for (j = 0; j < selectList[i].productList.length+1; j++) {
                            var tr = document.createElement("tr");
                            var td1 = document.createElement("td");
                            td1.innerHTML = "<p>" + '&nbsp;' + selectList[i].productList[j].productName + "</p>"
                            var td2 = document.createElement("td");
                            td2.innerHTML = "<p>" + '&nbsp;' + selectList[i].productList[j].type + "</p>"
                            ...
                            tr.appendChild(td1);
                            tr.appendChild(td2);
                            ...
                            body.appendChild(tr);
                    }
                    printHtml = printHtml + $("#printDetailDiv").prop("outerHTML");
                    printHtml = printHtml + "<div id='page1' style='height：300px;page-break-after:always'></div>";
                }

渲染到页面后，即可通过window.print()方法使用浏览器的打印功能，page-break-after:always属性是重要的用来始终进行分页行为。

    window.document.body.innerHTML = printHtml;
                setTimeout(function(){
                    window.print();
                }, 500);

至此，打印后selectList.length是多少就分为多少页了。