前言:解决那些打印难题?
- Web Html 分页打印
- 内容、图片、表格跨页断裂,封边
- table并行、并列双边、重边
- 自动计算页码(总数及每一页),样式、位置、形式完全个性化
- 页眉页脚,去除浏览默认,自定义内容、样式、位置
- 保持页脚在页面底部,而非紧接正文内容
- 保持原文CSS样式
- 便捷自定义设置工具条
- 调用、语法简单,便捷
成果展示
提示:以下是为实践demo
调整后
自定义设置工具条
打印结果
原文打印结果
一、现有主流打印插件
1.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
- 和printThis类似,提供丰富的配置参数
- 使用方便,熟悉的语法及调用模式
Usage(用例):
引入:
<script type="text/JavaScript" src="/jquery.print.js"></script>
使用:
$("#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: '<!doctype html>'
});
3.Lodop
- ↑劳道谱,挺全面,功能强大,一款优秀的Web打印控件;
- ↑支持打印预览、打印设计、打印维护
- ↑套打很方便
- ↓语法相对复杂,页面控制类似画
- ↓需要安装启动服务
- ↓运行效率略低
嵌入方式
通常情况下,在页面中嵌入Lodop如下引用代码,然后用一个全局对象变量来使用控件:
·在head或body中加入:
<script src="LodopFuncs.js"></script>
<object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width