支持自定义打印区域的 jQuery 打印插件

    这是一款超棒的 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
   }
});
模板目录结构如下: