前言：解决那些打印难题？
Web Html 分页打印
内容、图片、表格跨页断裂，封边
table并行、并列双边、重边
自动计算页码（总数及每一页），样式、位置、形式完全个性化
页眉页脚，去除浏览默认，自定义内容、样式、位置
保持页脚在页面底部，而非紧接正文内容
保持原文CSS样式
便捷自定义设置工具条
调用、语法简单，便捷
成果展示
提示：以下是为实践demo 调整后
自定义设置工具条
打印结果
原文打印结果
文章目录
前言：解决那些打印难题？
成果展示
一、现有主流打印插件
1.printThis
2.jQuery.print
3.Lodop
4.其它各种Web打印控件
二、好戏开始
1.技术要点
1.1 分页（HTML）
1.2 防止内容跨页断裂（CSS）
1.3 去掉默认的页边距、页眉、页脚（CSS）
1.4 header 页眉、footer 页脚（HTML）
1.5 让页眉、页脚出现在每一页（CSS）
1.6 解决表格重边，并行rowspan的地方变粗的问题（CSS）
1.7 表格跨页断裂封边处理（CSS）
1.8 计算并添加页码（JS、HTML）
2.实现思路
3.用例（Usage）
4.完整代码
三、Q&A
四、总结
一、现有主流打印插件
1.printThis
printThis 【官网】
打印特定的和多个DOM元素；
保留页面CSS /样式或添加新CSS
保留表单条目
画布支持
代码如下（示例）：
$("#mySelector").printThis({
debug: false, // show the iframe for debugging
importCSS: true, // import parent page css
importStyle: false, // import style tags
printContainer: true, // print outer container/$.selector
loadCSS: "", // path to additional css file - use an array [] for multiple
pageTitle: "", // add title to print page
removeInline: false, // remove inline styles from print elements
removeInlineSelector: "*", // selectors to filter inline styles. removeInline must be true
printDelay: 333, // variable print delay
header: null, // prefix to html
footer: null, // postfix to html
base: false, // preserve the BASE tag or accept a string for the URL
formValues: true, // preserve input/form values
canvas: false, // copy canvas content
doctypeString: '...', // enter a different doctype for older markup
removeScripts: false, // remove script tags from print content
copyTagClasses: false, // copy classes from the html & body tag
beforePrintEvent: null, // function for printEvent in iframe
beforePrint: null, // function called before iframe is filled
afterPrint: null // function called before iframe is removed
});
2.jQuery.print
jQuery.print 【GitHub】
和printThis类似，提供丰富的配置参数
使用方便，熟悉的语法及调用模式
Usage（用例）： 引入:
使用:
$("#myElementId").print(/*options*/);
或者
$.print("#myElementId" /*, options*/);
小结：printThis、jQuery.print是属于类似的js(jQuery)打印插件， 基本功能可以满足，细节和个性化的需求实现困难 比如页眉、页脚、页码的设置，自定义边居等
可配置的一些参数:
$("#myElementId").print({
globalStyles: true,
mediaPrint: false,
stylesheet: null,
noPrintSelector: ".no-print",
iframe: true,
append: null,
prepend: null,
manuallyCopyFormValues: true,
deferred: $.Deferred(),
timeout: 750,
title: null,
doctype: ''
});
3.Lodop
Lodop【官网】
↑劳道谱，挺全面，功能强大，一款优秀的Web打印控件；
↑支持打印预览、打印设计、打印维护
↑套打很方便
↓语法相对复杂，页面控制类似画
↓需要安装启动服务
↓运行效率略低
嵌入方式
通常情况下,在页面中嵌入Lodop如下引用代码，然后用一个全局对象变量来使用控件： ·在head或body中加入：