1、jQuery.print.js打印插件
地址:https://github.com/DoersGuild/jQuery.print
该打印插件适用于局部打印
基础使用方法
$(selector).print();
或者
$("#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>'
});
参数说明
参数名称 | 类型 | 默认值 | 说明 | 备注 |
globalStyles | boolean | true | 是否应包括父文档中的样式 | 1.设置为true时,打印预览样式为自定义设置的print样式,比如: <style media="print"> |
mediaPrint | boolean | false | 是否包含media='print'的链接标签。会被globalStyles选项覆盖 | |
stylesheet | string | null | 外部样式表的URL地址 | |
noPrintSelector | string | ".no-print" | 不想打印的元素(css样式或者某个元素) | |
iframe | boolean | true | 是否弹出预览打印窗口 | |
append | string | null | 在打印的元素内部结尾添加html文本或者或者某个元素 | 相当于$(selector).append(content) |
prepend | string | null | 在打印的元素内部开头添加html文本或者或者某个元素 | 相当于$(selector).prepend(content) |
manuallyCopyFormValues | boolean | true | 打印时是否显示form/input表单 | |
deferred | jQuery.Deferred | $.Deferred() | 调用print函数后解析的延迟对象 | |
timeout | number | 750 | 打印预览窗口弹出的延迟时间 | 单位:毫秒 |
title | string | null | 更改打印标题 | |
doctype | string | '<!doctype html>' | 有效的doctype字符串 |
兼容的jQuery版本
- jQuery v. 1.7.2
- jQuery v. 1.9.1
- jQuery v. 2.2.0
- jQuery v. 3.1.1
兼容的浏览器
- Google Chrome - v 20, 26, 48, 55
- Internet Explorer - v 10, 11
- Firefox - v 35
注:如果打印的内容,包含table且跨页显示,table表头会重复出现
2、printThis.js插件
地址:https://github.com/jasonday/printThis
该打印插件适用于局部打印
基础使用方法
$(selector).printThis()
或者
$("#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: "*", // custom 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
});
参数说明
参数名 | 类型 | 默认值 | 说明 | 备注 |
debug | boolean | false | debug时是否显示打印预览弹窗 | |
importCSS | boolean | true | 是否导入父级页面样式 | |
importStyle | boolean | false | 是否使用默认设置的打印样式 | 1.设置为true时,打印预览样式为自定义设置的print样式,比如: <style media="print"> |
printContainer | boolean | true | 打印时是否包含选择元素的最外层 | |
loadCSS | string/arrary | " " | 添加外部css样式文件地址 - 多个使用 array []数组 | |
pageTitle | string | " " | 打印页面添加标题 | |
removeInline | boolean | false | 删除打印元素的内联样式 | 如果form表单中input元素border原来设置为none,设置为true时;border的none样式无效 |
removeInlineSelector | string | "*" | 用于筛选内联样式的自定义选择器. removeInline 必须为true 才有效 | PS:removeInline 设置为true时,设置选择器后,打印没看出太大变化 |
printDelay | number | 333 | 打印(打印预览弹窗显示)延迟时间 | 单位:毫秒 |
header | string | null | 在打印的元素内部开头添加html文本 | 相当于$(selector).prepend(content) |
footer | string | null | 在打印的元素内部结尾添加html文本 | 相当于$(selector).append(content) |
base | boolean | false | 保留基本标记或接受URL的字符串 | |
formValues | boolean | true | 打印时是否显示 input/form 表单 | |
canvas | boolean | false | 是否复制canvas内容 | |
doctypeString | string | '<!DOCTYPE html>' | 设置 doctype 替换原有的doctype标记 | 如果输入值不是有效的doctype标记,那么会在首页的左上角显示设置的字符串,比如为doctype,那么首页的左上角显示会显示doctype一串文字 |
removeScripts | boolean | false | 是否从打印内容中删除script脚本标记 | |
copyTagClasses | boolean | false | 是否从 html 和 body 复制样式 | |
beforePrintEvent | function | null | 打印预览弹窗中打印事件需要执行的事件方法 | 如果此处设置了 function函数,那么在打印预览弹窗弹出后,预览显示会很卡,不建议使用,并且测试发现 在关闭关闭打印预览弹窗后也会执行该方法 |
beforePrint | function | null | 打印预览弹窗弹出之前需要执行的事件方法 | |
afterPrint | function | null | 打印完成或者点击取消关闭打印预览弹窗后需要执行的事件方法 |
兼容的jQuery版本
- jQuery v. 1.7.2
- jQuery v. 1.9.1
- jQuery v. 2.2.0
- jQuery v. 3.1.1
兼容的浏览器版本
- Google Chrome - v 20, 26, 48, 55
- Internet Explorer - v 10, 11
- Firefox - v 35
注:打印元素可以选择多个,比如
$('#kitty-one, #kitty-two, #kitty-three').printThis({
importCSS: false,
loadCSS: "path/to/new/CSS/file",
header: "<h1>Look at all of my kitties!</h1>"
});
3、jquery.print-preview.js
地址:https://github.com/etimbo/jquery-print-preview-plugin
该打印插件适用于整个页面打印和局部打印
该插件使用比较简单,请参照地址中的demo