jQueryPrint 的简单使用

一、为什么要使用 jQueryPrint？ 

　　1、当然是方便的要死尼，相比于其他的方法。

　　2、打印整个页面或者局部页面都是非常的可以的，使用很方便。

　　3、如果要导出页面为 PDF 都是很好的。

　　4、jQuery 的打印插件很多，你可以任意选，但是要注意 jQuery 的版本以及浏览器的兼容性。

二、jQueryPrint 的简单使用

　　1、到 jQuery 插件官网进行下载插件。

　　　　jQuery 插件官网地址：http://www.jq22.com/，你可以搜索你想要的插件，应该差不多基本都能搜的到吧。

　　2、下载插件，放入项目中，如图：

　　　　

　　　3、index.jsp 页面代码：

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html>

 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->

 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->

 <!--[if gt IE 8]><!-->

 <html class="no-js">

 <!--<![endif]-->

 <head>

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <title>jQuery.Print 的用法</title>

 <meta name="description" content="jQuery.print is a plugin for printing specific parts of a page">

 <meta name="viewport" content="width=device-width">

 <link rel="stylesheet" href="${pageContext.request.contextPath}/jQueryPrint/css/normalize.min.css">

 <style type='text/css'>

 .a {

     background: black;

     color: white;

 }

 .b {

     color: #aaa;

 }

 </style>

 <!--[if lt IE 9]>

         <script src="${pageContext.request.contextPath}/jQueryPrint/js/vendor/html5-3.6-respond-1.1.0.min.js"></script>

         <![endif]-->

 <script src="${pageContext.request.contextPath}/js/jquery-2.2.4.min.js"></script>

 <script

     src="${pageContext.request.contextPath}/jQueryPrint/jQuery.print.js"></script>

 </head>

 <body>

     <h3 style="text-align: center;">

         <span> jQuery.print</span>

     </h3>

     <div id="content_holder">

         <div id="ele1" class="a">

             <h3>段落一</h3>

             <p>

                 这是第一个段落，文本输入框的内容也会被打印出来，不信你试试看！！！ <input type="text" placeholder="输入框..." />

             </p>

             <p class="no-print">这段文字是不会被打印的，因为它的属性 class 的值中有“no-print”，嘿嘿！！！ </p>

             <button class="print-link no-print" onclick="jQuery('#ele1').print()">点击这个按钮进行打印</button>

         </div>

         <div id="ele2" class="b">

             <h3 class='avoid-this'>段落二</h3>

             <p>Some really random text.</p>

             <pre>

                 <code>

                 $("#ele2").find('button').on('click', function() {

                     //Print ele2 with custom options

                     $("#ele2").print({

                         //Use Global styles

                         globalStyles : false,

                         //Add link with attrbute media=print

                         mediaPrint : false,

                         //Custom stylesheet

                         stylesheet : "http://fonts.googleapis.com/css?family=Inconsolata",

                         //Print in a hidden iframe

                         iframe : false,

                         //Don't print this

                         noPrintSelector : ".avoid-this",

                         //Add this at top

                         prepend : "Hello World!!!<br />",

                         //Add this on bottom

                         append : "<br />Buh Bye!",

                         //Log to console when printing is done via a deffered callback

                         deferred: $.Deferred().done(function() { console.log('Printing done', arguments); })

                     });

                 });

                 </code>

             </pre>

             <button class="print-link avoid-this">在新窗口打开</button>

         </div>

         <br />

         <button class="print-link" onclick="jQuery.print()">点击这个按钮进行打印整个页面</button>

     </div>

     <script type='text/javascript'>

         //<![CDATA[

         jQuery(function($) {

             $("#ele2").find('.print-link').on('click', function() {

                 //Print ele2 with default options

                 $.print("#ele2");

             });

             $("#ele2").find('button').on('click', function() {

                 //Print ele2 with custom options

                 $("#ele2").print({

                     //Use Global styles

                     globalStyles : false,

                     //Add link with attrbute media=print

                     mediaPrint : false,

                     //Print in a hidden iframe

                     iframe : false,

                     //Don't print this

                     noPrintSelector : ".avoid-this",

                     //Add this at top

                     prepend : "Hello World!!!<br/>",

                     //Add this on bottom

                     append : "<br/>Buh Bye!",

                     //Log to console when printing is done via a deffered callback

                     deferred : $.Deferred().done(function() {

                         console.log('Printing done', arguments);

                     })

                 });

             });

         });

         //]]>

     </script>

 </body>

 </html>

　　4、运行结果

点击段落一中的按钮

jQueryPrint 的简单使用的更多相关文章

  1. 【造轮子】打造一个简单的万能Excel读写工具

    大家工作或者平时是不是经常遇到要读写一些简单格式的Excel? shit!~很蛋疼,因为之前吹牛,就搞了个这东西,还算是挺实用,和大家分享下. 厌烦了每次搞简单类型的Excel读写?不怕~来,喜欢流式 ...

  2. Fabio 安装和简单使用

    Fabio(Go 语言):https://github.com/eBay/fabio Fabio 是一个快速.现代.zero-conf 负载均衡 HTTP(S) 路由器,用于部署 Consul 管理的 ...

  3. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  4. 哪种缓存效果高？开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  5. 在Openfire上弄一个简单的推送系统

    推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...

  6. 我的MYSQL学习心得（一） 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  7. 使用 Nodejs 搭建简单的Web服务器

    使用Nodejs搭建Web服务器是学习Node.js比较全面的入门教程,因为要完成一个简单的Web服务器,你需要学习Nodejs中几个比较重要的模块,比如:http协议模块.文件系统.url解析模块. ...

  8. ASP.NET Aries 入门开发教程2：配置出一个简单的列表页面

    前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...

  9. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

随机推荐

  1. 【Python学习笔记】调整matplotlib的图例legend的位置

    有时默认的图例位置不符合我们的需要,那么我们可以使用下面的代码对legend位置进行调整. plt.legend(loc='String or Number', bbox_to_anchor=(num ...

  2. 织梦dedeCMS数据库结构字段说明-简略说明

    dede_addonarticle 附加文章表 aid int(11) 文章编号typeid int(11) 分类栏目编号body mediumtext 文章内容dede_addonflash 附加F ...

  3. 转载：分布式文件系统 - FastDFS 在 CentOS 下配置安装部署（2）

    原文:http://blog.mayongfa.cn/193.html 一.安装 Nginx 和 fastdfs-nginx-module 安装 Nginx 请看:从零开始学 Java - CentO ...

  4. Python-JS中的事件详解

    目录 fdf!! fefd 一.JS中的事件二.JS中的事件分类: 1.事件初级: 2.事件参数 Event 3.鼠标事件 4.键盘事件 *** 5.表单事件 *** 6.文档事件 * 7.图片事件 ...

  5. 2017-05~06 温故而知新--NodeJs书摘(一)

    前言: 毕业到入职腾讯已经差不多一年的时光了,接触了很多项目,也积累了很多实践经验,在处理问题的方式方法上有很大的提升.随着时间的增加,愈加发现基础知识的重要性,很多开发过程中遇到的问题都是由最基础的 ...

  6. java StringTokenizer

    在java引入正则表达式和Scanner类之前分割字符串的唯一方法是使用StringTokenizer来分词,不过现在有了正则表达式和Scanner类我们可以使用更加简单更加简洁的方式来完成同样的工作 ...

  7. python易错题之作用域

    name = "lzl" def f1(): print(name) def f2(): name = "eric" f1() f2() //结果为 lzl 记 ...

  8. 扩展欧几里得，解线性同余方程 逆元 poj1845

    定理:对于任意整数a,b存在一堆整数x,y,满足ax+by=gcd(a,b) int exgcd(int a,int b,int &x,int &y){ ){x=,y=;return ...

  9. python+selenium+Jenkins构建自动化测试

    环境准备 本次使用JDK:1.8.tomcat:8.5.Jenkins:2.127 安装jdk 官方下载地址 安装教程参考 安装tomcat 和jenkins tomcat官方下载地址 jenkins ...

  10. Jmeter录制浏览器并回放

    确认证书 1.查看证书 进入Jmeter安装目录下的bin,找到ApacheJMeterTemporaryRootCA.crt 证书文件(如jmeter在安装目录中未找到,可尝试先执行下面的开始录制步 ...