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

技术标签： Vue  1024程序员节

定义要打印的视图容器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是多少就分为多少页了。