window.print()批量打印

最新推荐文章于 2025-06-06 16:21:36 发布

原创最新推荐文章于 2025-06-06 16:21:36 发布 · 8.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#window.print() #打印 #批量打印

本文介绍了一个使用JavaScript实现批量打印的方案，通过window.print()函数结合复选框选择内容。主要内容包括在页面上创建隐藏div，根据复选框状态动态添加或删除打印内容到div中，并利用page-break-after属性控制每条数据单独一页。在打印时，临时替换body内容，打印完成后恢复原页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一个通过复选框勾选获取内容批量打印的例子：

1、在页面上添加一个<div id="js_print_content" style="display：none"></div>的div标签，这是用来存放打印的所有内容；

2、点击勾选复选框时，获取该条打印的内容，然后$("#js_print_content").append('<div style="page-break-after:always;">'+内容+'</div>')；

(获取内容时，我这里是在原本别人代码上弄的，所以可能有点麻烦，你们根据自己需求弄比较好)

2.1 获取该条打印的内容：
      (1) 勾选复选框时，在页面上添加<iframe name="" src=""></iframe>标签，请求该条打印的内容，iframe load完，把内容添加进$("#js_print_content")对象里，这里是同过iframe的name值来区分各自的iframe。
      (2)不勾选复选框时，把$("#js_print_content")对象里的对应<div>和页面上对应的iframe删除
      (3)全选和反选时的操作原理同上

注释：page-break-after:always 在每条数据后面加翻页，即每条数据一页，当然如果它本身超过一页，会自然翻页，不用管。

3、打印，先存储当前的页面内容，获取需要打印的内容放到body上，打印后再把之前页面内容还原；

例如：var newstr = $("#js_print_content").html();
var oldstr = $("body").prop("outerHTML");
$("body").html(newstr);
window.print();

$("body").html(oldstr);