一、前言:

一款打印jQuery插件

1、特征

打印特定的和多个DOM元素
保留页面CSS /样式**或添加新CSS；世界是你的牡蛎！
保留表单条目
画布支持

2、插件下载地址：

https://download.csdn.net/download/qq_43753724/15850787?spm=1001.2014.3001.5503

二、用法：

1、所有配置:

$("#mySelector").printThis({debug: false,               //显示用于调试的iframe importCSS: true,         //导入父页面css importStyle: false,       //导入样式标签printContainer: true,      //打印外部容器loadCSS: "",               //其他CSS文件的路径-为多个pageTitle: "",             //为打印页面添加标题removeInline: false,       //从打印元素中删除嵌入式样式removeInlineSelector: "*", //用于过滤嵌入式样式的自定义选择器.removeInline必须为true printDelay: 333,          //可变打印延迟header: null,                // htmlfooter: null,                // html base: false,               //保留BASE标记或接受URL formValues: true,           //保留输入/表单值canvas: false,            //复制画布内容doctypeString: '...',       //为较早的标记输入不同的doctype removeScripts: false,       //从打印内容中删除脚本标签copyTagClasses: false,      //从html＆body标签中复制类beforePrintEvent: null,   //在打印之前在iframe中运行的功能。尚未在所有浏览器上验证此功能。beforePrint: null,         //填充iframe之前调用的函数afterPrint: null         //移除iframe之前调用的函数
});

三、示例代码：

1、jsp代码：

 <div class="ibox-content table-responsive"><table id="table" class="table" data-click-to-select="true"data-show-print="true"></table>

2、 js部分：

table的渲染部分不就不写了，主要展示的是打印功能

 //打印function printTable() {//获取当前时间let  date=new Date();let  newdate=date.toLocaleString('chinese', { hour12: false });   //获取24小时制，中国时间，打印出   2019/01/03/  08:40:32$('#table').printThis({debug:false,        //调试模式下打印文本的渲染状态importCSS:false,    //为打印文本引入外部样式importStyle:false,  //为打印把文本书写内部样式printContainer:true,    //设置为true,向文本中插入内容loadCSS:["opms/commons/jslib/hplus/css/bootstrap.min.css"],// 为打印文本引入外部样式--路径 ["/static/jquery/forieprint.css","",""]pageTitle:"油井月报表",  //为打印文本中添加<title>标签标签内容将在打印出的文件顶部显示，这里会和打印原有标题冲突，建议谨慎使用removeInline:false,  清除body的默认样式，包括内外边距，字体等，目的是为了让渲染文本和打印文本保持一致printDelay:333,     //布局完打印页面之后与真正执行打印功能中间的间隔header:"<h1>打印时间:"+newdate+"</h1>",        // 在打印文本的body中添加header标签，这里的内容将在打印出的文件顶部居左显示 "<header>测试header</header>"formValues:false,    //如果打印的目标源码中又表单内容就选择true，这里是为新的打印文本中的表单赋值doctypeString:  '<!DOCTYPE html>'  // 添加文档声明，使得渲染和打印保持一致});}

3、前端页面：

打印前：

点击打印按钮之后：

四、bug

1、设置的pageTitle属性无效

暂时为解决，改好后来补上。

printThis前端打印插件相关推荐

Lopod 前端打印插件基础用法
Lopod 前端打印插件一款前端打印插件,可实现各个前端打印功能,并且跨浏览器.官网:[http://www.lodop.net/index.html] (http://www.lodop.net/ ...
jQuery之浏览器打印插件
1.jQuery.print.js打印插件地址:https://github.com/DoersGuild/jQuery.print 该打印插件适用于局部打印基础使用方法 $(selector). ...
jq jqprint 设置页脚_jquery打印插件jqprint.js使用教程
最近的项目要使用web前端打印,本来在网上搜索了一下采用的js:window.print()局部打印网页的方法,但是经过实际测试发现兼容性不好,无奈只好再找其他方法,终于被我找到了一款基于jquery ...
bootstrapTable printThis打印插件中 printThis.js中的一个buge
printThis打印插件还有一个大坑,先看看,一定要注意: 如果你用的开发工具(HBuilder.exe)访问形式是ip的形式如:http://127.0.0.1:8020/TestBootStra ...
前端网页打印插件print.js
在前端开发中,想打印当前网页的指定区域内容,或将网页导出为多页的PDF,可以借助print.js实现,该插件轻量.简单.手动引入.不依赖其他库.示范项目github:https://github.co ...
class jqprint 失效_web的各种前端打印方法之jquery打印插件jqprint实现网页打印
web的打印方法具我自己懂得知道的有: 1.jquery插件jqprint实现 2.jqery打印插件printarea实现网页打印 3.css控制网页打印样式 jquery插件jqprint实现: ...
VUE使用lodop实现前端打印页面指定内容
最近做项目,遇到一个需要页面无需下载在线打印Word的功能,最初尝试直接打印页面,会导致将整个页面都打印出来,不符合要求.后期客户要求要使用lodop,这样打印与页面展示Word两个方面都是未知的东西 ...
Vue-Element-admin 框架上使用 Hiprint 打印插件一、项目介绍
因自己做的项目,需要自定义报表的功能,所以在网上找了一些打印插件,最后发现Hiprint的资料挺全的,就试着用了一下,发现还挺好用的网上的DEMO的源码地址:https://github.com/b ...
分享一个简单好看的html的表格table（个人简历的html表格），vue table，以及vue打印（简单好用的vue打印插件）
想写一个很普通的那种像word文档样式的table,发现网上很多都是什么教程,没有合适的,我只想要一个拿来就能用的html的table(非专业前端),没有什么别的依赖,而且样式要很普通的简单的表格.既 ...

printThis前端打印插件

文章目录

一、前言:

1、特征

2、插件下载地址：

二、用法：

1、所有配置:

三、示例代码：

1、jsp代码：

2、 js部分：

3、前端页面：

四、bug

1、设置的pageTitle属性无效

printThis前端打印插件相关推荐

最新文章

热门文章