这是一款超棒的 jQuery 打印插件,可让您为网页/应用程序添加打印页面功能,该插件可打印页面上的特定区域或特定的页面元素,可用于单独或者组合打印网页的图像、画布 canvas 和纯文本,以及(可选的)自定义页眉和页脚,此外,您还可以禁用页面中的 CSS 样式和 JavaScript。同时提供了超过高级选项的配置,如下所示。
主要功能
打印特定或者多个 DOM 元素
保留页面 CSS/样式或添加新的 CSS,一切尽在掌握!
保留表单条目
画布支持
可从打印文本中移除 JavaScript、内联样式和 CSS。
导入样式标签等等...
使用 jquery 打印网页部分的高级配置选项
以下是一些用于创建/自定义 PrintThis 插件(网页的 jQuery 打印部分)的高级配置选项。
选择 | 描述、默认、类型 |
---|---|
debug | 对于开发人员模式,它显示用于调试的 iframe。默认值:false,类型:Boolean。 $("#myText").printThis({ debug: false, }); |
importCSS | 导入页面样式表,使用CSS样式打印页面。默认值:true,类型:Boolean。 $("#myText").printThis({ importCSSL: true, }); |
importStyle | 在样式标记之间导入内联 CSS 样式。默认值:false,类型:Boolean。 $("#myText").printThis({ importStyle: false, }); |
printContainer | 抓取外部容器以及选择器的内容。默认值:true,类型:Boolean。 $("#myText").printThis({ printContainer: true, }); |
loadCSS | 此选项可用于添加额外的 css 文件 – 使用数组 [] 表示多个。默认值:“”,类型:字符串。 $("#myText").printThis({ loadCSS: "path/to/my.css", }); |
pageTitle | 定义标题并将其打印到页面顶部。默认值:“”,类型:字符串。 $("#myText").printThis({ pageTitle: "My Custom Title", }); |
removeInline | 此选项“从打印元素中删除所有内联样式”。默认值:false,类型:Boolean。 $("#myText").printThis({ removeInline: true, }); |
printDelay | 定义以毫秒为单位的打印延迟。默认值:333,类型:数字。 $("#myText").printThis({ printDelay: 1500, }); |
header & footer | 定义 HTML 页面的自定义页眉和页脚。默认值:null,类型:字符串。 $("#myText").printThis({ header: "Custom Page Header", footer: "Custom Page Footer", }); |
base | 保留 BASE 标记,或接受 URL 的字符串。默认值:false,类型:Boolean/String。 $("#myText").printThis({ base: "url here", }); |
formValues | 此外,在表单中打印用户输入值。默认值:true,类型:Boolean。 $("#myText").printThis({ formValues: true, }); |
canvas | 复制画布元素。默认值:false,类型:Boolean。 $("#myText").printThis({ canvas: false, }); |
doctypeString | 定义网页的文档类型。对于为旧标记添加文档类型很有用。默认值:“”,类型:字符串。 $("#myText").printThis({ doctypeString: "", }); |
hasModal | 从打印内容中删除脚本标签。默认值:false,类型:Boolean。 $("#myText").printThis({ removeScripts: false, }); |
copyTagClasses | 此选项对于从 html & body 标签复制类很有用。默认值:false,类型:Boolean。 $("#myText").printThis({ copyTagClasses: false, }); |
回调函数
PrintThis 插件提供了三个自定义回调函数,可以执行这些函数以将其完全配置到您的项目中。默认情况下,这些选项在类型函数中为 null。
1. iframe 中的回调函数。printEvent
$("#myText").printThis({ beforePrintEvent: function(){ //your code to execute } });
2. 在填充 iframe 之前调用的函数。
$("#myText").printThis({ beforePrint: function(){ //your code to execute } });
3. 删除 iframe 之前调用的函数。
$("#myText").printThis({ afterPrint: function(){ //your code to execute } });