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

最新推荐文章于 2026-03-23 19:51:14 发布

原创最新推荐文章于 2026-03-23 19:51:14 发布 · 1.6k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#1024程序员节

Vue 专栏收录该内容

7 篇文章

订阅专栏

这篇博客详细介绍了如何使用JavaScript动态构建HTML内容并实现分页打印。首先定义了一个包含收货单位和装货日期等信息的视图容器id='printDetailDiv'，然后通过遍历数据列表，动态生成表格内容并插入到tbody中。每个表格行包含产品名称和类型等信息。在完成所有数据的渲染后，利用`window.print()`调用浏览器打印功能，并通过设置`page-break-after: always`确保分页效果。最后，将生成的HTML内容替换`window.document.body.innerHTML`并延迟500毫秒后执行打印操作，实现按数据量分页打印。

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