jQuery实现区域打印功能代码详解

使用CSS控制打印样式，需要设置样式media="print"，并且将页面中不需要打印的元素的样式display属性设置为none。如DEMO中，我将页头页脚及其他不需要打印的元素的样式设置如下：

<style type="text/css" media="print">
#header,.top_title,#jqprint,#footer,#cssprint h3{display:none}
</style>

用jQuery打印插件printArea.js

$(function(){
$("#print_btn").click(function(){
$("#my_area").printArea();
});
});

DEMO中有这样一段代码：

<p><a href="#" id="print_btn">点击这里打印>></a></p>
<div id="my_area">
...打印区域...<br/>
</div>

当单击打印按钮时，调用件printArea.js插件。该插件还提供了一些参数可配置，使用方法：$(element).printArea(option)。

参数设置：

1、mode：模式，当点击打印按钮时触发模式，默认为iframe，当设置为popup则会新开一个窗口页面打印。

2、popTitle：设置新开窗口的标题，默认为空。

3、popClose：完成打印后是否关闭窗口，默认为false。

PS：IE浏览器打印页面取出页眉页脚网址的方法：文件->页面设置，将页面和页脚的输入框清空即可。

以上所述是小编给大家介绍的jQuery实现区域打印功能代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 基于jQuery实现网页打印功能

    基于jQuery实现网页打印功能

    直接上代码 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>index</title> </head> <body> <div style="text-align:cent

  • jquery PrintArea 实现票据的套打功能(代码)

    jquery PrintArea 实现票据的套打功能(代码)

    套打就是指不打印表单上的表结构和固定的文言,只把会变化的数据打印出来,下面的例子就是不把name和name2打印出来,只把aaa和bbb打印出来. 1.代码 <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src=&qu

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

    js或jquery实现页面打印(局部打印) 1.js实现(可实现局部打印) 复制代码 代码如下: <html> <title>js打印</title> <head></head><body> <input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();&quo

  • jQuery实现区域打印功能代码详解

    使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO中,我将页头页脚及其他不需要打印的元素的样式设置如下: <style type="text/css" media="print"> #header,.top_title,#jqprint,#footer,#cssprint h3{display:none} </style> 用jQu

  • ActiveX控件的使用-js实现打印超市小票功能代码详解

    ·应客户的需求= = ,要在网页端实现打印小票的功能 ·先来一张打印出的小票效果图(合计明显不对,因为有修改订单功能,请各位忽略) 用什么方法实现呢: 我想应该是有三种吧 1.用第三方的浏览器控件(这个好似比较方便,我的老师也是这样建议我)向大家推荐一个 Lodop打印控件 2.用CSS写好模板,然后直接用页面打印的方法(应该是这样吧) 以上两种还没有尝试,这两天陆续尝试) 3.用微软自己的ActiveX控件(ActiveX控件可以实现调用本地的文件等操作(之前试过调用cmd,实现shutdow

  • jquery实现搜索框功能实例详解

    搜索框实现搜索一个ul列表中的指定关键词的li. html代码: <ul class="todo-content"> <li class="todo-ltem"> <div class="todo-tip"> <p>fhasjfas</p> </div> <div class="todo-btnlist"> <button class=&

  • Java实现搜索功能代码详解

    首先,我们要清楚搜索框中根据关键字进行条件搜索发送的是Get请求,并且是向当前页面发送Get请求 //示例代码 请求路径为当前页面路径 "/product" <!-- 搜索框 get请求 根据商品名称的关键字进行搜索--> <form action="/product" class="form-inline pull-left" > <input type="text" name="pr

  • Java中SSM框架实现增删改查功能代码详解

    记录一下自己第一次整合smm框架的步骤. 参考博客和网站有:我没有三颗心脏 How2J学习网站 1.数据库使用的是mySql,首先创建数据库ssm1,并创建表student create database ssm1; use ssm1; CREATE TABLE student( id int(11) NOT NULL AUTO_INCREMENT, student_id int(11) NOT NULL UNIQUE, name varchar(255) NOT NULL, age int(1

  • Android使用Realm数据库实现App中的收藏功能(代码详解)

    Android使用Realm数据库实现App中的收藏功能(代码详解)

    前 言 App数据持久化功能是每个App必不可少的功能,而Android最常用的数据持久化方式主要有以下的五种方式: 使用SharedPreferences存储数据: 文件存储数据: SQLite数据库存储数据: 使用ContentProvider存储数据: 网络存储数据. 其中前四种都是缓存数据到本地,这篇主要讲的是使用第三种方式来实现App中的收藏功能,不过不用Android原生自带SQLite数据库来存储数据,而是使用第三方的Realm数据库来来存储数据. Realm 本质上是一个嵌入式数

  • 自己动手实现jQuery Callbacks完整功能代码详解

    用法和$.Callbacks完全一致 , 但是只是实现了add , remove , fire , empty, has和带参数的构造函数功能,  $.Callbacks 还有disable,disabled, fireWith , fired , lock, locked 方法 代码如下: 复制代码 代码如下: String.prototype.trim = function ()        {            return this.replace( /^\s+|\s+$/g, '

  • js实现全选反选不选功能代码详解

    js实现全选反选不选功能代码详解

    本文实例为大家分享了js实现全选反选不选功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <meta charset='utf-8' /> <body> <input type='checkbox' name='id' />哈哈<br/> <input type='checkbox' name='id' />哈哈<br/> <input type='checkbox'

  • python实现秒杀商品的微信自动提醒功能(代码详解)

    技术实现原理:获取京东的具体的商品信息,然后再使用微信发送提醒 工具:需要两个微信号,这两个微信号互为好友 1.收集自己想要的商品url 我们就以京东来举例,获取京东的秒杀商品信息: 首先,我们在网页上打开京东,搜索我们想要的商品,这边我就以我最近买的东西为例子: 我们需要找到它的商品信息,需要打开浏览器的开发者模式,之后我们需要选择自己的配送地址,这个时候里面就发送一些接口请求: 我们选择一个有用的商品信息接口: 找到自己想要商品的信息接口,来判断它是否有货: 一般规则是:如果这个接口书籍里面

  • vue项目支付功能代码详解

    vue项目支付功能代码详解

    1.支付宝方式: 支付宝方式:点击支付宝支付, 调用后台接口(携带订单号),后台返回一个form表单(HTML字符串结构), 提交form就可以调用支付宝支付 代码: // alipayWap: 后台接口返回的form 片段 <div v-html="alipayWap" ref="alipayWap"></div> methods: { toAlipay () { this.$axios.get('xxx').then (res = >

随机推荐