jQuery打印插件PrintArea实现jQuery打印插件PrintArea实现

合集下载

jQuery 插件开发详解

jQuery 插件开发详解

JavaScript jQuery 插件开发jQuery 插件开发其实很简单jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件经常有人询问一些技巧,因此干脆写这么一篇文章给各位jQuery爱好者,算是抛砖引玉吧。

【基础】a)样式很多人会认为样式是个很复杂的东西,需要沉着冷静的心态加上非凡的审美观才能设计出赏心悦目的UI,抛开图片设计不说,其实css也就是那么些属性:position,margin,paddi ng,width,height,left,top,float,border,background...UI设计的漂亮与否在很大程度上依赖于设计人员对配色的把握和整体效果的协调。

举个简单的例子,一个简单的页面,马虎的人:复制代码代码如下:<html xmlns="/1999/xhtml"><head><title>Test Page</title></head><body>jQuery是一个框架!压缩后有30多k吧。

</body></html>细心的人:复制代码代码如下:<html xmlns="/1999/xhtml"><head><title>Test Page</title><style type="text/css">body{font-family:'宋体';font-size:12px;}</style></head><body>jQuery是一个框架!压缩后有30多k吧。

</body></html>专心的人:[Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 我们对比一下三者的UI效果:一目了然,或许很多的站点失去关注正是因为这不起眼的font-family,font-size。

jqx的练习题直接打印

jqx的练习题直接打印

jqx的练习题直接打印jqx是一款功能强大的JavaScript框架,广泛应用于前端开发中。

它提供了丰富的组件和功能,使开发者能够轻松构建出令人惊叹的用户界面。

在使用jqx时,我们经常需要练习题来检验自己的理解和应用能力。

本文将探讨一种直接打印jqx练习题的方法,让我们能够更有效地进行学习和练习。

首先,我们需要准备一个具有打印功能的HTML页面。

在页面中引入jqx框架和所需的练习题代码。

接下来,我们可以使用jqx提供的组件和方法来创建一个动态的练习题页面。

比如,我们可以使用jqxGrid组件来展示题目和选项,并添加相应的事件处理函数来实现题目的选择和答案的判断。

在练习题页面中,我们可以使用jqxGrid的列和行定义来创建题目和选项的布局。

通过设置列的宽度和数据类型,我们可以灵活地控制每个选项的显示效果。

同时,jqxGrid还提供了丰富的主题和样式设置,可以使我们的练习题页面更加美观和易读。

为了让练习题页面更具互动性,我们可以使用jqxButton组件来添加“提交”按钮。

当用户选择了答案并点击“提交”按钮时,我们可以使用jqxGrid的事件处理函数来获取用户选择的答案,并进行正确与否的判断。

同时,我们还可以在页面中添加计时器来限制用户的答题时间,以提高练习的难度和有效性。

当用户完成练习后,我们可以使用jqxPrint组件来实现直接打印的功能。

jqxPrint是一个用于生成打印页面的强大工具,它可以将练习题页面的内容实时转换为打印格式,并自动调整页面布局和字体样式,以适应打印机的要求。

通过简单的调用jqxPrint的打印方法,我们就可以将练习题直接打印出来,方便我们进行纸质备份或分享给他人。

除了直接打印,jqx还提供了其他很多有用的功能。

比如,我们可以使用jqxDataExport组件将练习题数据导出为Excel或PDF文件,方便我们进行统计和分析。

同时,jqx还提供了丰富的图表组件和数据可视化工具,可以帮助我们更好地呈现和解读练习题的结果。

jqprint用例 -回复

jqprint用例 -回复

jqprint用例-回复如何使用jqprint 插件进行网页打印。

jqprint 是一个jQuery 插件,用于在网页中实现可控制和个性化的打印功能。

它提供了一种简单而灵活的方式,使用户能够在不离开网页的情况下将其内容打印出来。

下面将介绍如何使用jqprint 插件进行网页打印。

第一步:下载jqprint 插件并引入到网页中首先,我们需要下载jqprint 插件,并将其引入到我们的网页中。

可以从插件的官方网站上下载最新版的jqprint.js 文件。

在下载文件后,将其复制到项目的文件夹中,并使用以下代码在html 文件中引入插件:html<script src="path/to/jqprint.js"></script>确保将"path/to/jqprint.js" 替换为实际路径。

第二步:为打印按钮添加点击事件接下来,我们需要为打印按钮添加点击事件,并在事件处理函数中调用jqprint 插件。

在您的html 文件中找到打印按钮的元素,并添加一个id 属性,用于选择这个按钮。

然后,在JavaScript 文件中使用以下代码为按钮添加事件处理函数:javascript('printButton').click(function() {('.print').jqprint();});上面的代码假设您为打印按钮指定了"printButton" 作为其id 属性,并为要打印的内容添加了"print" 类。

第三步:配置打印选项(可选)jqprint 插件还提供了一些可选的打印选项,以便您可以根据您的需求进行配置。

例如,您可以设置打印内容的标题、页眉或页脚。

以下是一些常用的配置选项示例:javascript('.print').jqprint({addTitle: true, 是否添加打印标题pageTitle: 'My Web Page', 标题内容header: 'My Custom Header', 页眉内容footer: 'My Custom Footer' 页脚内容});上面的代码将打印标题设置为页面的标题,并在打印内容的页眉和页脚中添加自定义文本。

jQuery插件汇总(待添加)

jQuery插件汇总(待添加)

本文由我司收集整编,推荐下载,如有疑问,请与我司联系jQuery 插件汇总(待添加)2013/10/08 0 jQuery 插件jQuery Spin Button 自定义文本框数自增或自减jQuery 插件JQuery Pager 分页器实现javascript 分页功能jQuery 插件FontSizer 实现Javascript 自定义动态调整网页文字大小jQuery 插件Magnify 放大镜实现javascript 图片放大功能jQuery 插件tooltip 提示条实现Javascript 动态文字或图片提示效果jQuery 插件Step Carousel Viewer 实现Javascript 图片滑动旋转效果jQuery 插件accordion 折叠菜单实现Javascript 展开收缩菜单功能jQuery 插件ImageFlyout 弹出图片实现javascript 放大图片功能jQuery 插件SmoothNavigationalMenu 导航菜单实现Javascript 下拉多级菜单功能jQuery 插件PiroBox 弹出图片盒实现Javascript 新窗口全屏图片展示功能jQuery 插件CalendarWidget 日历工具实现Javascript 简单日历功能jQuery 插件Datepicker 日期选择器实现Javascript 自定义日期时间选择功能jQuery 插件TableSearch 表搜索实现Javascript 搜索表内容功能jQuery 插件floatbox 浮动层实现javascript 弹出浮动窗口功能jQuery 插件timers 定时器实现javascrip 定时或按钮控制功能jQuery 插件absolutizePrototypePort 实现Javascript 绝对定位jQuery 插件$.event.special.drag 拖动实现javascript 随意定制拖动功能jQuery 插件smartFocus 实现javascript 文本框blur 焦点显示或隐藏默认效果jQuery 插件AjaxFileUpload 文件上传实现Javascript 多文件上传功能jQuery 插件AjaxManager 实现Javascript 自定义ajax 请求和响应时间功能jQuery 插件AjaxQueue 队列实现Javascript 队列或同步请求功能jQuery 插件ajaxContent 实现javascript 通过ajax 获取任意内容jQuery 插件Add2Cart 添加到购物车实现javascript 动态提示添加到购物车效果jQuery 插件animateToClass 实现javascript 自定义动画效果jQuery 插件Lightweight Rich Text Editor 轻量级编辑器jQuery 插件Adjacent 实现动态获取相邻元素增加自定义效果jQuery 插件ColorBox 彩盒实现javascript 自定义灯箱效果jQuery 插件James 实现javascript 自动完成提示功能jQuery 插件Validate 验证表单实现javascript 表单验证功能jQuery 插件Validation 验证表单实现javascript 表单智能验证功能jQuery 插件QuickPaginate 快速分页实现javascript 分页功能jQuery 插。

jQuery常用插件大全

jQuery常用插件大全

Horizontal accordion: jQuery基于jQuery开发,非常简单的水平方向折叠控件。

Horizontal accordion: jQueryjQuery-Horizontal Accordion具有XBOX360 blade界面风格的水平方向Accordion。

jQuery-Horizontal AccordionAutoComplete-JQueryjQuery插件易于集成到现在的表单中(Form)。

AutoComplete-JQueryFacebook like Autocomplete基于jQuery开发,类似于FaceBoox提供的AutoCompleter。

Facebook like AutocompletejQuery Autocomplete ModjQuery Autcomplete插件。

能够限制下拉菜单显示的结果数。

jQuery Autocomplete Modjqac基于Jquery开发的Autocomplete插件。

具有易于使用,配置简单,既可以利用Ajax读取数据也可以直接从本地获取数据。

jqacjQuery Tag Suggestion类似于提供的tag suggesting功能。

jQuery Tag SuggestionAutocomplete-jQuery ajax利用jQuery(Ajax),PHP和MySQL开发的AutoCompleter。

Autocomplete-jQuery ajaxjQuery.Suggest跨浏览器支持,基于jQuery开发的Autocomplete library。

jQuery.SuggestAutocomplete- jQuery plugin一个jQuery Autocompleter,提供缓存选项来限制对服务器的请求。

Autocomplete- jQuery pluginjquery-aop为JavaScript增加面向方面编程特性的jQuery插件。

jq print 方法

jq print 方法

jq print 方法摘要:1.简介jq print方法2.用法示例3.配置和优化4.注意事项5.总结正文:【简介】jq print方法是一种用于在网页上打印特定内容的实用工具。

它允许用户自定义打印内容、样式和布局,使得打印出来的文档更加美观实用。

通过jq print方法,我们可以轻松地将网页上的部分内容转化为打印友好型文档,满足用户打印需求。

【用法示例】要在网页上使用jq print方法,首先需要引入jQuery库。

然后,可以使用以下语法来实现打印功能:```javascript$("selector").print();```其中,`selector`表示需要打印的元素。

例如,如果我们想要打印一个id 为`content`的div内容,可以这样写:```javascript$("#content").print();```【配置和优化】jq print方法提供了许多配置选项,以满足不同需求。

以下是一些常用配置:1.设置打印内容:通过`printElement`函数,可以自定义打印的元素。

```javascript$("#content").print({printElement: $(".print-element")});```2.设置打印样式:通过`printSettings`函数,可以自定义打印时的样式。

```javascript$("#content").print({printSettings: {style: "default", // 打印样式printButton: true, // 是否显示打印按钮printBody: true, // 是否打印整个身体base64: true, // 是否使用base64编码图片image: true, // 是否打印图片cssFile: "path/to/css/file.css" // 自定义样式文件}});```3.设置打印对话框:通过`printDialogSettings`函数,可以自定义打印对话框的配置。

jQuery打印指定区域Html页面并自动分页

jQuery打印指定区域Html页面并自动分页

jQuery打印指定区域Html页面并自动分页项目中需要用到打印HTML页面,需要指定区域打印,使用jquery.PrintArea.js 插件实现分页,需要的朋友可以参考下最近项目中需要用到打印HTML页面,需要指定区域打印,使用jquery.PrintArea.js 插件用法:$("div#printmain").printArea();但还是会打印DIV后面的内容,这里可以使用CSS控制打印分页<div style="page-break-after: always;"></div>有时用CSS控制分页了但还是会连续打印页面,这里就可以用上PrintArea 插件中的属性参数。

PrintArea部分源码:var modes = { iframe : "iframe", popup : "popup" };var defaults = { mode : modes.iframe,popHt : 800,popWd : 800,popX : 200,popY : 200,popTitle : '',popClose : false ,twoDiv : '', //自已扩展的属性,为满足变态需求pageTitle: ''};//自已扩展的属性,为满足变态需求可以看出插件中定义的属性格式为JSON,下面介绍部分属性modes定义了两个属性,指定popup时会打开新窗口,可以视为打印预览页面,默认为ifra me。

@popClose | [boolean] | (false),true 打印完成后是否开闭预览页面,默认为false(不关闭)。

$("div#printmain").printArea({mode:"popup",popClose:true});这样就可以指定DIV打印了。

web的各种前端打印方法之jquery打印插件jqprint实现网页打印

web的各种前端打印方法之jquery打印插件jqprint实现网页打印

web的各种前端打印⽅法之jquery打印插件jqprint实现⽹页打印web的打印⽅法具我⾃⼰懂得知道的有:1、JQuery插件Jqprint实现2、JQery打印插件PrintArea实现⽹页打印3、CSS控制⽹页打印样式:⾸先要导⼊js⽂件:jquery.jqprint.js下载复制代码代码如下:<script language="javascript" src="jquery-1.7.1.min.js"></script><script language="javascript" src="jquery.jqprint.js"></script>html代码:复制代码代码如下:<div class="my_show">这个打印时是显⽰的</div><div class="my_hidden">这个打印时是隐藏的。

</div><input type="button" id="print"/>:复制代码代码如下:<script type="text/javascript">$(document).ready(function() {$("#print").click(function(){$(".my_show").jqprint();})});</script>该插件还提供了⼀些参数可配置:debug: false,//如果是true则可以显⽰iframe查看效果(iframe默认⾼和宽都很⼩,可以再源码中调⼤),默认是false importCSS: true, //true表⽰引进原来的页⾯的css,默认是true。

JQuery开发工具和插件

JQuery开发工具和插件

Query开发工具和插件1.Dreamweaver相信大家对Dreamweaver再熟悉不过了,Dreamweaver是建立 Web 站点和应用程序的专业工具。

它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

从对基于 CSS 的设计的领先支持到手工编码功能,Dreamweaver 提供了专业人员在一个集成、高效的环境中所需的工具。

开发人员可以使用 Dreamweaver 及所选择的服务器技术来创建功能强大的Internet 应用程序,从而使用户能连接到数据库、Web 服务和旧式系统。

如果要使Dreamweaver支持jQuery自动提示代码功能,方法非常简单,我们只需要下载一个插件即可。

在/dreamweaver/jquery下载一个名为jQuery_API.mxp 的插件。

在Dreamweaver中选择:命令→扩展管理→安装扩展→jQuery_API.mxp后,就会自动安装了。

如果效果如图1-18所示,就表明安装成功。

jQuery代码,会发现已经能自动提示了,效果如图1-19所示。

注:(1)如果用户的Dreamweaver没有扩展管理功能,可以去/cn/exchange/下载相应软件即可。

(2)在本书出版之前,此插件自动提示的内容是jQuery1.2.1的API,所以jQuery1.2.1以后新增的方法没有提示。

2.AptanaAptana是一个非常强大、开源和专注于JavaScript的Ajax开发IDE。

它的特性如下所示。

提供JavaScript、JavaScript函数、HTML和CSS语言的Code Assist功能。

显示JavaScript、HTML和CSS的代码结构。

支持JavaScript、HTML和CSS代码提示,包括JavaScript自定函数。

代码语法错误提示。

支持Aptana UI自定义和扩展。

javascript打印大全(打印页面设置打印预览代码)

javascript打印大全(打印页面设置打印预览代码)

javascript打印⼤全(打印页⾯设置打印预览代码)复制代码代码如下:<HTML><HEAD><TITLE>javascript打印-打印页⾯设置-打印预览代码</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312" /><SCRIPT language=javascript> function printsetup(){ // 打印页⾯设置 wb.execwb(8,1); } function printpreview(){ // 打印页⾯预览 wb.execwb(7,1); } function printit() { if (confirm('确定打印吗?')) { wb.execwb(6,6) } } </SCRIPT></HEAD><BODY><DIV align=center><OBJECT id=wb height=0 width=0classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb></OBJECT><INPUT onclick=javascript:printit() type=button value=打印 name=button_print /><INPUT onclick=javascript:printsetup(); type=button value=打印页⾯设置 name=button_setup /><INPUT onclick=javascript:printpreview(); type=button value=打印预览 name=button_show /></DIV></BODY></HTML>(1)复制代码代码如下:<script. defer>function SetPrintSettings() { // -- advanced features factory.printing.SetMarginMeasure(2) // measure margins in inches factory.SetPageRange(false, 1, 3) // need pages from 1 to 3 factory.printing.printer = "HP DeskJet 870C" factory.printing.copies = 2 factory.printing.collate = true factory.printing.paperSize = "A4" factory.printing.paperSource = "Manual feed" // -- basic features factory.printing.header = "This is MeadCo" factory.printing.footer = "Advanced Printing by ScriptX" factory.printing.portrait = false factory.printing.leftMargin = 1.0 factory.printing.topMargin = 1.0 factory.printing.rightMargin = 1.0 factory.printing.bottomMargin = 1.0}</script>(2)复制代码代码如下:<script. language="javascript"> function printsetup(){ // 打印页⾯设置 wb.execwb(8,1); } function printpreview(){ // 打印页⾯预览 wb.execwb(7,1); } function printit() { if (confirm('确定打印吗?')) { wb.execwb(6,6) } } </script></head><body><OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"height=0 id=wb name=wb width=0></OBJECT><input type=button name=button_print value="打印"onclick="javascript.:printit()"><input type=button name=button_setup value="打印页⾯设置"onclick="javascript.:printsetup();"><input type=button name=button_show value="打印预览"onclick="javascript.:printpreview();"><input type=button name=button_fh value="关闭"onclick="javascript.:window.close();">------------------------------------------------:WebBrowser.ExecWB(1,1) 打开Web.ExecWB(2,1) 关闭现在所有的IE窗⼝,并打开⼀个新窗⼝Web.ExecWB(4,1) 保存⽹页Web.ExecWB(6,1) 打印Web.ExecWB(7,1) 打印预览Web.ExecWB(8,1) 打印页⾯设置Web.ExecWB(10,1) 查看页⾯属性Web.ExecWB(15,1) 好像是撤销,有待确认Web.ExecWB(17,1) 全选Web.ExecWB(22,1) 刷新Web.ExecWB(45,1) 关闭窗体⽆提⽰复制代码代码如下:<HTML><HEAD><STYLE> P {page-break-after: always}</STYLE></HEAD><BODY><%while not rs.eof%><P><%=rs(0)%></P><%rs.movenext%><%wend%></BODY></HTML>(1)ie的⽂件-〉页⾯设置-〉讲⾥⾯的页眉和页脚⾥⾯的东西都去掉,打印就不出来了。

jquery打印html表格自动分页

jquery打印html表格自动分页

竭诚为您提供优质文档/双击可除jquery打印html表格自动分页篇一:html表格及分页html表格及分页1.htmltransitional//en""/tR/xhtml1/dtd/x html1-transitional.dtd">系统事件操作进行中,请耐心等待...■系统事件--%>事件类型:所有事件--%>系统事件操作日志事件事件描述:时间范围:~"onclick="queryclick()"class="mbtn"/> "onclick="exoprtascsv(histevent)"class="mbtn"/>时间事件类型事件描述总共0条第/0页"onclick="pagerjump()"class="pagerctrl"id="jumpbtn" />"onclick="pagerfirst()"class="pagerctrl"id="firstbt n"/>"onclick="pagerperv()"class="pagerctrl"id="prevbtn" />"onclick="pagernext()"class="pagerctrl"id="nextbtn" />"onclick="pagerlast()"class="pagerctrl"id="lastbtn"/>$(".timepicker").datetimepicker().attr("readonly"," readonly");$(".pagerctrl").attr("disabled","disable d");$("#waiting").hide();daystring();2..histeventpage.js///vareventtype="";vardescription="";varstarttime="";varendtime="";//查询按钮,查询分页信息并查出第一页内容functionqueryclick(){//获取查询条件eventtype=$("#eventtype").val();description=$("#description").val();篇二:使用php和jquery制作分页和表格使用php和jquery制作分页和表格如果您已经下载了本站提供的baseproject项目源码,后台中列表页面均可作为示例,其中文章列表页面的功能最为丰富。

printthis参数

printthis参数

printthis参数你好,printThis 是一个 jQuery 打印插件,其部分参数如下:- debug:是否显示用于调试。

- importCSS:是否导入父页面 CSS。

- importStyle:是否导入样式标记。

- printContainer:是否打印 outer container。

- loadCSS:其他 CSS 文件的路径。

- pageTitle:为打印页面添加标题。

- removeInline:是否从打印元素中删除内联样式。

- removeInlineSelector:用于过滤内联样式的自定义选择器,removeInline 必须为true。

- printDelay:变量 print delay。

- header:前缀为 HTML。

- footer: postfix to HTML。

- base:是否保留 BASE 标记,或接受 URL。

- formValues:是否保留输入/表单值。

- canvas:是否复制画布内容。

- doctypeString:为旧版本输入不同的 doctype markup。

- removeScripts:是否从打印内容中删除脚本标签。

- copyTagClasses:是否从 HTML 和 body 标签中复制类。

- beforePrintEvent:用于 iframe 中的 beforPrint。

- afterPrint:在 iframe 被删除之前调用的函数。

printThis.js 的组成部分及说明如下:- 入口配置文件:各项参数说明。

- 成员函数 printThis:printThis()方法是 jQuery 类的扩展“成员方法”,该成员方法按照执行顺序可拆解为检测 document.domain、填充 iframe、打印三个部分。

Jquery插件大全

Jquery插件大全

Jquery插件大全1、导航类1)基于jQuery开发,非常简单的水平方向折叠控件。

2>具有XBOX360 blade界面风格的水平方向Accordion。

3>用于创建折叠菜单的jQuery插件4>基于jQuery开发的可折叠菜单。

5>模仿ext的tab选项卡TabPanel(选项卡组件>参数说明renderTo<渲染到某容器string | jQuery object | NULL>将选项卡组件渲染到某容器,参数类型可以为字符串,也可以为jQuery所加载的对象,如果为声明该参数,组件默认的承载容器为BODY。

b5E2RGbCAPitems<选项卡元素集合array>选项卡组件渲染后就会显示的选项卡元素集合,具体参数请查看选项卡元素。

width<宽度string | number>选项卡组件的总宽度,默认400px。

height<高度string | number>选项卡组件中页面显示层的高度,默认300px。

border<是否显示边框string>嵌套显示选项卡时,会出现重复边框的情况,影响美观,将border 设置为”none”,则可以避免,默认显示边框,不接受除”none”之外的参数值。

p1EanqFDPwactive<渲染后默认激活哪个选项卡元素number>下标以0为开始,默认为0。

maxLength<最多显示几个选项卡元素number>-1为无限,默认为-1。

tabs<获得选项卡组件所有的选项卡元素return array>可根据需要获得选项卡组件的所有选项卡元素。

公共方法addTab(添加一个选项卡元素object>动态向选项卡组件中添加一个选项卡元素。

flush(刷新选项卡元素的内容string | number>将选项卡元素的内容刷新,参数可以为选项卡元素的ID或下标。

利用jqprint插件打印页面内容的实现方法

利用jqprint插件打印页面内容的实现方法

利⽤jqprint插件打印页⾯内容的实现⽅法业务场景客户需要在页⾯有⼀个打印按钮,点击之后可以打印Echarts图表的内容以及⽂字提⽰信息,经⾕歌搜索发现,实现⽅法⼤概有三种之多,其他两种不太熟悉,⽽采⽤的这种打印⽅式是⼀个在jQuery的基本上开发的⼀个print插件,因此可以使⽤jQuery 的⽅式查找元素,因此决定采⽤这种⽅式。

先看⼀下实现的效果图,如下:实现效果图引⼊js⽂件<script type="text/javascript" src="__JS__/jquery-migrate-1.2.1.min.js"></script><script type="text/javascript" src="__JS__/jqprint-0.3.js"></script>注意:这⾥是先引⼊的jQuery⽂件,如果没有引⼊第⼀个js⽂件的话,会出现兼容性问题,导致使⽤jqprint打印时报错。

html页⾯这⾥⾯的html标签很多的<div class="wrap-content container" id="container"><table border="0" cellpadding="0" cellspacing="0" class="store-joinin baseinfo"><thead><tr><th colspan="40">⽤户信息</th></tr></thead><tbody><tr style="background: rgb(255, 255, 255);"><th>姓名:</th><td colspan="40">180********</td></tr><tr style="background: rgb(255, 255, 255);"><th>性别:</th><td colspan="40">男</td></tr><tr style="background: rgb(255, 255, 255);"><th>年龄:</th><td colspan="40">41</td></tr><tr style="background: rgb(255, 255, 255);"><th>⾝份证:</th><td colspan="40">522724************</td></tr><tr style="background: rgb(255, 255, 255);"><th>所属机构:</th><td colspan="40">上海市政法委</td></tr></tbody></table>......<button class="btn btn-danger printBtn1" onclick="btnPrintClick()" type="button">打印</button>当然下⾯还有很多的html标签,在这⾥就不展⽰了。

js或jquery实现页面打印可局部打印

js或jquery实现页面打印可局部打印

js或jquery实现页面打印可局部打印js或jquery实现页面打印(局部打印)1、js实现(可实现局部打印)复制代码代码如下:<html><title>js打印</title><head></head><body><input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" /><input id="btnPrint" type="button" value="打印预览" onclick=preview(1) /><style type="text/css" media=print>.noprint{display : none }</style><p class="noprint">不需要打印的地方</p><script>function preview(oper){if (oper < 10){bdhtml=window.document.body.innerHTML;//获取当前页的html代码sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取htmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取htmlwindow.document.body.innerHTML=prnhtml;window.print();window.document.body.innerHTML=bdhtml;} else {window.print();}}</script><p>XXXXX</p><!--startprint1-->要打印的内容<!--endprint1--></body></html>2、调用windows底层打印,报安全警告,不建议使用(不支持局部打印)复制代码代码如下:<HTML><HEAD><TITLE>javascript打印-打印页面设置-打印预览代码</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312" /><SCRIPT language=javascript>function printsetup(){// 打印页面设置wb.execwb(8,1);}function printpreview(){// 打印页面预览wb.execwb(7,1);}function printit(){if (confirm('确定打印吗?')) {wb.execwb(6,6);}}</SCRIPT></HEAD><BODY><DIV align=center><OBJECT id=wb height=0 width=0classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb></OBJECT><INPUT onclick=javascript:printit() type=button value=打印name=button_print /><INPUT onclick=javascript:printsetup(); type=button value=打印页面设置 name=button_setup /><INPUT onclick=javascript:printpreview(); type=button value=打印预览 name=button_show />一按开始的减肥了卡时间段</DIV></BODY></HTML>3、jQuery实现(支持局部打印)复制代码代码如下:<html><head><script type="text/javascript" src="jquery-1.6.4.js"></script> <script>$(function(){$("input#biuuu_button").click(function(){$("div#myPrintArea").printArea();});</script></head><body><input id="biuuu_button" type="button" value="打印"></input><div id="myPrintArea">.....文本打印部分.....</div> <div class="quote_title">引用</div><div class="quote_div"></div> </body></html>。

jqueryprint属性设置

jqueryprint属性设置

jqueryprint属性设置
⼀,需求背景
项⽬中遇到打印功能,想实现完美的打印功能,对元素进⾏操作等,可以使⽤jquery print 插件。

⼆,依赖⽂件
1,jquery
2,jquery.print-preview.js
3,jQuery.print.js
三,使⽤和配置
$("#myElementId").print({
globalStyles:true,//是否包含⽗⽂档的样式,默认为true
mediaPrint:false,//是否包含media='print'的链接标签。

会被globalStyles选项覆盖,默认为false
stylesheet:null,//外部样式表的URL地址,默认为null
noPrintSelector:".no-print",//不想打印的元素的jQuery选择器,默认为".no-print"
iframe:true,//是否使⽤⼀个iframe来替代打印表单的弹出窗⼝,true为在本页⾯进⾏打印,false就是说新开⼀个页⾯打印,默认为true append:null,//将内容添加到打印内容的后⾯
prepend:null,//将内容添加到打印内容的前⾯,可以⽤来作为要打印内容
deferred: $.Deferred()//回调函数
});
使⽤感想
⾮常简单易⽤,适合各种应⽤场景的打印,预览。

jquery.jqprint-0.3.js打印功能以及页眉页脚设置显示与否

jquery.jqprint-0.3.js打印功能以及页眉页脚设置显示与否

jquery.jqprint-0.3.js打印功能以及页眉页脚设置显⽰与否项⽬中需要打印搜索使⽤了jquery.jqprint-0.3.js遇到⼀些样式问题,现在已经解决,记录下来供⼤家参考。

下⾯图显⽰为我页⾯中的样式:满⾜需要根据设备名称输⼊的多少⾃动适应打印页⾯项⽬引⼊<script type="text/javascript" src="<c:url value="/jquery.jqprint-0.3.js"/>"></script>下⾯的引⼊显⽰在页⾯<link rel="stylesheet" type="text/css" href="<c:url value="/jquery-print.css"/>"></link>下⾯的引⼊需要设置media="print" 这样只显⽰在打印的时候<link rel="stylesheet" type="text/css" media="print" href="<c:url value="/jquery-print.css"/>"></link>下⾯的样式只在页⾯显⽰打印不显⽰<style>.prints{ font-size:13px;}.prints h5{ font-size:16px;}</style>布局适应设备名称的jsvar max=0,max1=0,max2=0,max3=0,max4=0;$(".prints ul li").each(function(){$(this).height("auto").css("lineHeight","30px");if($(this).children("div")[0]){$(this).children("div").css("marginTop","0");}});$(".prints ul:nth-child(2) li").each(function(){if($(this).height()>max){max=$(this).height();}});$(".prints ul:nth-child(2) li").each(function(){$(this).height(max).css("lineHeight",max+"px");if($(this).children("div")[0]){var h_=$(this).children("div").height();$(this).children("div").css("marginTop",(max-h_)/2);}});$(".prints ul:nth-child(3) li").each(function(){if($(this).height()>max1){max1=$(this).height();}});$(".prints ul:nth-child(3) li").each(function(){$(this).height(max1).css("lineHeight",max1+"px");if($(this).children("div")[0]){var h_=$(this).children("div").height();$(this).children("div").css("marginTop",(max1-h_)/2);}});$(".prints ul:nth-child(4) li").each(function(){if($(this).height()>max2){max2=$(this).height();}});$(".prints ul:nth-child(4) li").each(function(){ $(this).height(max2).css("lineHeight",max2+"px"); if($(this).children("div")[0]){var h_=$(this).children("div").height(); $(this).children("div").css("marginTop",(max2-h_)/2); }});$(".prints ul:nth-child(5) li").each(function(){if($(this).height()>max3){max3=$(this).height();}});$(".prints ul:nth-child(5) li").each(function(){ $(this).height(max3).css("lineHeight",max3+"px"); if($(this).children("div")[0]){var h_=$(this).children("div").height(); $(this).children("div").css("marginTop",(max3-h_)/2); }});$(".prints ul:nth-child(6) li").each(function(){if($(this).height()>max4){max4=$(this).height();}});$(".prints ul:nth-child(6) li").each(function(){ $(this).height(max4).css("lineHeight",max4+"px"); if($(this).children("div")[0]){var h_=$(this).children("div").height(); $(this).children("div").css("marginTop",(max4-h_)/2); }});打印代码$("#showPrint-table").jqprint({});jquery-print.css的样式*{box-sizing:border-box;}.prints{font-size:16px;background-color: #84cdf7;color:#000;border:1px solid #000;}.prints ul{overflow:hidden;padding:0;margin:0;}.prints ul li{line-height:30px;float:left;list-style: none;}.prints h5{font-size:18px;text-align:center;line-height:46px;margin:0;}.prints ul li:nth-child(1){width:20%;text-align:justify;text-justify:distribute-all-lines;text-align-last:justify;-moz-text-align-last:justify;-webkit-text-align-last:justify;padding:0 10px;border-top:1px solid #000;}.prints ul li:nth-child(2){width:30%;text-align:center;border-left:1px solid #000;border-top:1px solid #000;padding:0 10px;background:#fff;}.prints ul li:nth-child(3){width:20%;text-align:justify;text-justify:distribute-all-lines;text-align-last:justify;-moz-text-align-last:justify;-webkit-text-align-last:justify;padding:0 10px;border-left:1px solid #000;border-top:1px solid #000;}.prints ul li:nth-child(4){width:30%;text-align:center;border-top:1px solid #000;border-left:1px solid #000;padding:0 10px;background:#fff;}.prints ul li.danwei{width:80%;padding:0 10px;background-color: #84cdf7;}.prints ul li div{word-wrap:break-word;line-height:30px !important;}jquery.jqprint-0.3.js代码(function($) {var opt;$.fn.jqprint = function (options) {opt = $.extend({}, $.fn.jqprint.defaults, options);var $element = (this instanceof jQuery) ? this : $(this);if (opt.operaSupport && $.browser.opera){var tab = window.open("","jqPrint-preview");tab.document.open();var doc = tab.document;}else{var $iframe = $("<iframe />");if (!opt.debug) { $iframe.css({ position: "absolute", width: "0px", height: "0px", left: "-600px", top: "-600px" }); } $iframe.appendTo("body");var doc = $iframe[0].contentWindow.document;}if (opt.importCSS){if ($("link[media=print]").length > 0){$("link[media=print]").each( function() {doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />");});}else{$("link").each( function() {doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />");});}}if (opt.printContainer) { doc.write($element.outer()); }else { $element.each( function() { doc.write($(this).html()); }); }doc.close();(opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).focus();setTimeout( function() { (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).print(); if (tab) { tab.close(); } }, 1000); }$.fn.jqprint.defaults = {debug: false,importCSS: true,printContainer: true,operaSupport: true};下⾯为⾕歌显⽰的打印效果,可以勾除页眉页脚设置⽕狐浏览器需要这样设置页眉页脚打印--》页⾯设置设置完以后打印效果⼀样。

JQuery使用预览打印方法

JQuery使用预览打印方法

JQuery使⽤预览打印⽅法代码如下,调⽤toPrintView()⽅法即可/* 打印预览 */function toPrintView(){execPrint('div-print-body','Preview');}/*打印或预览print--打印,Preview--预览*/function execPrint(myDiv,type){var isCanPreview = (!-[1,]);if(isCanPreview){ /*这个条件满⾜说明可以打印预览*/document.all.WebBrowser.ExecWB(7,1);}else{ var newstr = document.getElementById(myDiv).innerHTML; var oldstr = document.body.innerHTML; document.body.innerHTML = newstr; window.print(); document.body.innerHTML = oldstr;return false;}}如果使⽤layer(我是只⽤layer弹出打印页⾯),在点取消打印返回到layer致使点击事件失效的话,我⽤以下⽅法进⾏解决的$(document).delegate使⽤documen绑定点击事件,即使返回layer也不会出现点击事件失效若想使⼀些标签不打印,如下:<style type="text/css" media="print">.noprint { display:none;}</style>重点在必须使⽤media="print",然后在标签内加⼊不显⽰的样式即可。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

实现javascript打印功能,打印整个页面就很简单,但如果指定打印某一个区域就有点难点,这里有一个jQuery插件PrintArea可实现打印页面某区域功能。

使用说明
需要使用jQuery库文件和PrintArea库文件
使用方法
一,包含文件部分
1.<script type="text/javascript" src="jquery.js"></script>
2.<script type="text/javascript" src="jquery.PrintArea.js"></script>
二,html部分
1.<div id="biuuu_button">打印</div>
2.<div id="myPrintArea">
3......文本打印部分.....
4.</div>
三,javascript部分
1.$("div#biuuu_button").click(function(){
2.$("div#myPrintArea").printArea();
3.});
jQuery插件PrintArea完整方法如下:
1.(function($) {
2.var printAreaCount = 0;
3.$.fn.printArea = function()
4.{
5.var ele = $(this);
6.var idPrefix = "printArea_";
7.removePrintArea( idPrefix + printAreaCount );
8.printAreaCount++;
9.var iframeId = idPrefix + printAreaCount;
10.var iframeStyle =
'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';
11.iframe = document.createElement('IFRAME');
12.$(iframe).attr({ style : iframeStyle,
13.id : iframeId
14.});
15.document.body.appendChild(iframe);
16.var doc = iframe.contentWindow.document;
17.$(document).find("link")
18..filter(function(){
19.return $(this).attr("rel").toLowerCase() == "stylesheet";
20.})
21..each(function(){
22.doc.write('<link type="text/css" rel="stylesheet" href="' +
23.$(this).attr("href") + '" >');
24.});
25.doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html() +
'</div>');
26.doc.close();
27.var frameWindow = iframe.contentWindow;
28.frameWindow.close();
29.frameWindow.focus();
30.frameWindow.print();
31.}
32.var removePrintArea = function(id)
33.{
34.$( "iframe#" + id ).remove();
35.};
36.})(jQuery);
jQuery插件PrintArea的库代码非常简单,轻松实现javascript打印页面某区域功能。

相关文档
最新文档