jQuery之浏览器打印插件

最新推荐文章于 2022-07-21 19:20:00 发布
最新推荐文章于 2022-07-21 19:20:00 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liwan09/article/details/112705659
版权

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>'
	});

参数说明

参数名称类型默认值说明备注
globalStylesbooleantrue是否应包括父文档中的样式

1.设置为true时，打印预览样式为自定义设置的print样式，比如：

    <style media="print">
        @page{
            size:A4 landscape;/*打印纸张 A4 横向打印*/
            margin:0mm;  /*纸张页边距*/
        }
    </style>

mediaPrintbooleanfalse是否包含media='print'的链接标签。会被globalStyles选项覆盖 
stylesheetstringnull外部样式表的URL地址 
noPrintSelectorstring".no-print"不想打印的元素（css样式或者某个元素） 
iframebooleantrue是否弹出预览打印窗口 
appendstringnull在打印的元素内部结尾添加html文本或者或者某个元素相当于$(selector).append(content)
prependstringnull在打印的元素内部开头添加html文本或者或者某个元素相当于$(selector).prepend(content)
manuallyCopyFormValuesbooleantrue打印时是否显示form/input表单 
deferred jQuery.Deferred$.Deferred()调用print函数后解析的延迟对象 
timeoutnumber750打印预览窗口弹出的延迟时间单位：毫秒
titlestringnull更改打印标题 
doctypestring'<!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
});

 参数说明

参数名类型默认值说明备注
debugbooleanfalsedebug时是否显示打印预览弹窗 
importCSSbooleantrue是否导入父级页面样式 
importStylebooleanfalse是否使用默认设置的打印样式

1.设置为true时，打印预览样式为自定义设置的print样式，比如：

    <style media="print">
        @page{
            size:A4 landscape;/*打印纸张 A4 横向打印*/
            margin:0mm;  /*纸张页边距*/
        }
    </style>

printContainerbooleantrue打印时是否包含选择元素的最外层 
loadCSSstring/arrary" "添加外部css样式文件地址 - 多个使用 array []数组 
pageTitlestring" "打印页面添加标题 
removeInlinebooleanfalse删除打印元素的内联样式如果form表单中input元素border原来设置为none,设置为true时；border的none样式无效
removeInlineSelectorstring"*"用于筛选内联样式的自定义选择器. removeInline 必须为true 才有效PS:removeInline 设置为true时，设置选择器后，打印没看出太大变化
printDelaynumber333打印(打印预览弹窗显示)延迟时间 单位：毫秒
headerstringnull在打印的元素内部开头添加html文本相当于$(selector).prepend(content)
footerstringnull在打印的元素内部结尾添加html文本相当于$(selector).append(content)
basebooleanfalse保留基本标记或接受URL的字符串 
formValuesbooleantrue打印时是否显示 input/form 表单 
canvasbooleanfalse是否复制canvas内容 
doctypeStringstring'<!DOCTYPE html>'设置 doctype 替换原有的doctype标记如果输入值不是有效的doctype标记，那么会在首页的左上角显示设置的字符串，比如为doctype，那么首页的左上角显示会显示doctype一串文字
removeScriptsbooleanfalse是否从打印内容中删除script脚本标记 
copyTagClassesbooleanfalse是否从 html 和 body 复制样式 
beforePrintEventfunctionnull打印预览弹窗中打印事件需要执行的事件方法如果此处设置了 function函数，那么在打印预览弹窗弹出后，预览显示会很卡，不建议使用，并且测试发现 在关闭关闭打印预览弹窗后也会执行该方法
beforePrintfunctionnull打印预览弹窗弹出之前需要执行的事件方法 
afterPrintfunctionnull打印完成或者点击取消关闭打印预览弹窗后需要执行的事件方法 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

兼容的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

 

蓝晶之心
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery.print插件实现浏览器打印功能
yogyoho的博客
05-28 1355
最近客户希望能直接打印页面中表格数据，不想导到Excel中再打印，以减少操作步骤，提高效率，直接调用的浏览器的打印功能显示满足不了客户需求，后来找到了一个jquery的打印插件jQuery.print.js。 代码如下： // 注入公共打印按钮，可以打印当前页面中表格数据 function printDataBtn() { var columnNameArray, dict, tbl_data, tblStore = $("#" + CURR_CONTAINER).DataDisplayTab
批量打印之jquery局部打印
总有一天，你的日积月累，会成为别人的望尘莫及
10-12 2330
上个月弄了个批量打印的功能，觉得以后可能用得着，就写个博客记一下，免得忘记了。说这个之前，先来说一下我用过的两个打印插件，一个是Jquery打印插件（这次开始用的），一个是smsx.cab控件的打印插件。这里先说jQuery的局部打印功能（个人觉得jqprint和PrintArea就打印功能这块大同小异，所以就说简单点的PrintArea）   1、导Jquery库：想用Jquery的功能...
一款很好用的Jquery 打印插件——jQuery.print.js
热门推荐
JodenHe的博客
04-21 5万+
在进行网页开发中不可避免会使用到打印功能，下面就来学习一下一款简单易用的插件吧！ 登录网址https://github.com/DoersGuild/jQuery.print，下载js文件，进行简单的配置即可使用啦！ 配置参数 你可以在调用打印方法时传入一些参数： $("#myElementId").print({     global
基于Jquery的浏览器打印插件
flash_love的博客
12-12 468
最近工作中需要做到打印功能，为了简单起见就直接使用插件调用浏览器的打印功能。然后发现jquery.PrintArea.js这个插件蛮好用的。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> <scrip
php打印预览jquery,JS实现浏览器打印、打印预览
weixin_33070823的博客
03-09 340
目前正在做浏览器端采用JS方式实现打印这么一个功能，JS打印实现的方法很多，但是兼容各个浏览器实现打印预览的功能有些棘手，现将实现的内容及遇到的问题记录下来，希望有大牛看到所提的问题后可以给予解答，在此感谢啦。1.JS实现打印的方式方式一：window.print()window.print();会弹出打印对话框，打印的是window.document.body.innerHTML中的内容，下面是...
jQuery打印插件JQPrint
zhangqifeng专栏
12-27 4091
jqPrint是jQuery的一个打印插件，是jPrintArea的加强版（官网是这么说的，具体可以看下面引自官网的一段话），可以打印选定的区域，没有页眉和页脚，还是非常好用滴！要能运行这个打印插件当然要先引进相关js了，jquery当然是不可少的，还需要引进的就是jqPrint的js。 jquery.jqprint-0.3.js function a(){ $("#ddd
Jquery 调用 浏览器打印机
jonssonyan
12-09 1207
先引入jQuery和jqprint插件，为了处理jQuery和jqprint插件的版本不兼容问题，在引入jquery-migrate 文件 https://download.csdn.net/download/y1534414425/13609110 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co
原生JS打印插件之jQuery.EasyPrint.js使用文档
liu_chenglong的博客
07-21 2368
原生JS打印插件之jQuery.EasyPrint.js使用文档 调用浏览器自带打印功能，使用JavaScript的 window.print(); 方法。 使用JS实现打印功能；JavaScript 实现打印操作；javascript打印大全；通用；js实现打印的方式；JS怎么实现页面打印呢？JavaScript 实现打印,打印预览,打印设置；JS打印和报表输出；原生js打印插件Print.js；js控制分页打印、打印分页示例；js 打印插件；js使用window.print()实现打印功能；代码仅5kb
简单易用的JQuery网页内容打印插件——jQuery.print.js
zgphacker2010的专栏
08-19 1433
1.官方网址 下载jQuery.print.js、配置参数介绍、官方Demo 2. 简介： jQuery.print是一款简单易容且功能强大的网页内容打印jQuery插件。该网页打印插件可以打印指定区域的网页元素，可以指定跳过不打印某些元素，还可以打印整个页面内容。并且提供了丰富的打印参数设置。 3. 浏览器兼容性： Google Chrome - v 20, 26, 48, 55 ...
jquery 调用浏览器打印功能
12-09
而“jQuery 调用浏览器打印功能”是利用 jQuery 实现的一种方法，允许用户通过点击按钮或执行特定操作来触发浏览器的打印功能，从而打印网页内容。在描述中提到了 jqPrint 插件，这是一个专门用于打印 jQuery 对象...
jQuery打印插件jqprint，内包含使用示例
04-24
jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 ...
jQuery打印插件及示例.rar
04-18
jQuery打印插件jqPrint是开发者在网页中实现打印功能的一个便捷工具。该插件主要针对那些需要局部打印的场景，比如打印某个div、表格或者图片等特定内容，避免了整个页面一起被打印的麻烦。jqPrint插件的核心优点...
网页打印插件jQuery.PrintArea
06-24
网页打印插件jQuery.PrintArea是前端开发者常用的工具之一，它主要针对的是网页内容的打印需求。在现代网页设计中，用户可能需要打印网页中的特定部分，而不是整个页面，这就需要一个能够实现局部打印功能的插件。...
jQuery打印插件jqprint特效代码
03-20
jQuery打印插件jqprint是网页开发中非常实用的一个工具，尤其在那些需要用户打印特定页面内容的场景下。jqprint特效代码使得打印功能的实现变得简单快捷，无需复杂的JavaScript或CSS调整，只需引入jQuery库和jqprint...
2024浙江省行政区划矢量图层-省市县乡镇四级行政区划数据下载-带python代码
最新发布
08-02
2024最新浙江省行政区划矢量图层数据，包含省、市、县、乡镇四级行政区划数据下载，附带shp转geojson的python代码
年度销售计划表.xlsx.xlsx
08-01
销售统计，调查问卷，库存明细，跟进表，业绩统计表，差异分析 ，产品清单 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
蓝牙BLE 4.0开发课程
08-01
蓝牙BLE 4.0课程
每日销售情况统计表.xls
08-01
销售统计，调查问卷，库存明细，跟进表，业绩统计表，差异分析 ，产品清单 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
jquery 打印例子 下载
07-10
### 回答1： 要下载 jQuery 打印例子，您可以按照以下步骤进行操作： 1. 首先，打开您的浏览器，然后进入 jQuery 官方网站（https://jquery.com）。 2. 在官方网站的首页上，您可以看到一个下载按钮，点击这个按钮以下载 jQuery 的最新版本。下载完成后，您会得到一个压缩文件（通常是以 .zip 或 .tar.gz 结尾的文件）。 3. 解压缩下载的文件。使用您喜欢的解压缩工具打开文件，并选择一个解压的位置。解压完成后，您将获得一个包含所有 jQuery 文件的文件夹。 4. 在文件夹中，您将找到一个名为 "examples" 的子文件夹。点击进入该文件夹，您将看到一些 jQuery 示例代码的文件。 5. 在 "examples" 文件夹中，您可以找到一个名为 "print" 的子文件夹。这个子文件夹包含了与打印相关的 jQuery 示例代码。 6. 进入 "print" 文件夹，您将看到一些示例文件，其中可能包含 HTML、CSS 和 JavaScript 代码。选择您感兴趣的示例文件，点击打开。 7. 通过打开示例文件，您可以查看 jQuery 如何实现打印功能的示例代码。您可以在浏览器中直接运行这些代码，或者将它们复制到您自己的项目中使用。 请注意，这只是一个大致的步骤指南，实际的下载和查看过程可能会有所不同，具体取决于您使用的浏览器和操作系统。如果您在下载或查看 jQuery 打印例子时遇到任何问题，建议您查阅更详细的官方文档或寻求网络上的相关教程和资源。 ### 回答2： 要打印jQuery的示例代码，您可以按照以下步骤进行下载： 1. 打开您的浏览器，并在地址栏中输入jQuery的官方网站（https://jquery.com/）。 2. 在网站页面的右上角，您将看到一个绿色的“Download”按钮，点击该按钮。 3. 在弹出的下载页面中，您可以选择下载的版本。jQuery有两种版本，即“Production”和“Development”版本。如果您只是想使用jQuery的功能而不需要进行调试和开发，选择“Production”版本即可。 4. 选择您需要的版本后，点击下载按钮。 5. 根据您的浏览器设置，可能会自动开始下载文件，或者会弹出一个保存对话框供您选择保存位置。 6. 在下载完成后，找到您保存的文件，并解压缩它。您将得到一个名为“jquery.js”的文件。 7. 现在，您可以将该文件复制到您的项目文件夹中，并在HTML文件中引用它，以便在您的代码中使用jQuery。 请注意，jQuery还有许多其他的资源和插件可供下载和使用。您可以在官方网站的其他页面上找到这些资源，并按照类似的步骤进行下载和安装。 ### 回答3： 你可以通过以下步骤来使用jQuery打印一个例子并下载： 1. 首先，在你的HTML文件中引入jQuery库。你可以通过使用以下代码将其下载并引入到你的项目中： ```html <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ``` 2. 接下来，创建一个按钮并给它一个ID，以便我们在后面使用它来触发打印功能。例如： ```html <button id="print-btn">打印</button> ``` 3. 然后，使用jQuery选择器将按钮绑定到一个点击事件上。当按钮被点击时，将触发打印功能。例如： ```javascript $(document).ready(function(){ $('#print-btn').click(function(){ window.print(); }); }); ``` 这里我们使用了`window.print()`函数来触发浏览器的打印功能。 4. 最后，你可以根据你的需要自定义打印的内容。你可以在按钮点击事件的函数中添加更多的代码来构建你想打印的内容。 ```javascript $(document).ready(function(){ $('#print-btn').click(function(){ // 构建你的打印内容 var content = '<h1>打印的例子</h1>'; content += '<p>这是要打印的内容。</p>'; // 创建一个隐藏的iframe并将内容写入其中 var iframe = $('<iframe>', { style: 'display:none', src: 'about:blank' }).appendTo('body').contents().find('body').html(content); // 打印iframe内容 iframe[0].contentWindow.print(); // 移除iframe setTimeout(function(){ iframe.remove(); }, 1000); }); }); ``` 以上是一个简单的使用jQuery实现打印并下载的例子。你可以根据自己的项目需求进行更多的定制和调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值