jQuery之浏览器打印插件_printthis插件

作者：小小林熬夜学编程 | 2024-03-01 05:42:01

踩

printthis插件

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"> @page{ size:A4 landscape;/打印纸张 A4 横向打印/ margin:0mm; /纸张页边距/ } </style>
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"> @page{ size:A4 landscape;/打印纸张 A4 横向打印/ margin:0mm; /纸张页边距/ } </style>
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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/171367