安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
支持自定义打印区域的 jQuery 打印插件
编号:自定义打印

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

大小 423 KB
总文件 12 个
发布 2024-07-01
更新 2026-01-17
架构 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
   }
});

模板目录结构

    免责声明

    • 如非特殊说明,本站对本文提供的代码或者素材不拥有任何权利,其版权归原著者拥有。
    • 以上提供的代码或者素材均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。
    • 如有侵犯你版权的,请来信(邮箱:tongzhewangluo@163.com)指出,核实后本站将立即改正。
    • 如有链接无法下载、失效或广告,请通过网站提供的微信联系作者!
    • 以上资源售价只是赞助,不代表代码或者素材本身价格,收取费用仅维持本站的服务器开销。
    • 所有代码素材效果均为演示打包,最终效果请参考演示效果,本站不提供任何技术支持和服务。
    • 代码素材均为虚拟物品,演示和描述无错的情况下,无法进行退换服务。

    最新资源

    外卖点餐 PWA 移动端 HTML 模板 | 适合餐厅、外卖平台、云厨房快速搭建类 App 体验的手机网站

    原麦外

    外卖点餐 PWA 移动端 HTML 模板 | 适合餐厅、外卖平台、云厨房快速搭建类 App 体验的手机网站
    AI 图文与视频生成专用 HTML 响应式仪表盘风格网站模板

    艾青晖

    AI 图文与视频生成专用 HTML 响应式仪表盘风格网站模板
    宠物护理 HTML 响应式网站模板,适用于宠物美容、动物医院与宠物服务机构的专业建站方案

    爬爬奇

    宠物护理 HTML 响应式网站模板,适用于宠物美容、动物医院与宠物服务机构的专业建站方案
    室内设计 HTML5 响应式网站模板,支持 360° 全景展示的沉浸式空间呈现方案

    派斯特

    室内设计 HTML5 响应式网站模板,支持 360° 全景展示的沉浸式空间呈现方案
    殡葬服务行业专用 HTML 响应式网站模板,适用于殡仪机构及纪念平台的专业建站方案

    桑浮生

    殡葬服务行业专用 HTML 响应式网站模板,适用于殡仪机构及纪念平台的专业建站方案
    个人作品集简历 HTML 响应式模板,适合求职者、自由职业者与创意人士的专业个人网站建站方案

    戴斯微

    个人作品集简历 HTML 响应式模板,适合求职者、自由职业者与创意人士的专业个人网站建站方案