基于jquery库的jquery.PrintArea.js插件源代码为：

 (function ($) {

     var printAreaCount = 0;

     $.fn.printArea = function () {

         var ele = $(this);

         var idPrefix = "printArea_";

         removePrintArea(idPrefix + printAreaCount);

         printAreaCount++;

         var iframeId = idPrefix + printAreaCount;

         var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';

         iframe = document.createElement('IFRAME');

         $(iframe).attr({

             style: iframeStyle,

             id: iframeId

         });

         document.body.appendChild(iframe);

         var doc = iframe.contentWindow.document;

         $(document).find("link").filter(function () {

             return $(this).attr("rel").toLowerCase() == "stylesheet";

         }).each(

                 function () {

                     doc.write('<link type="text/css" rel="stylesheet" href="'

                             + $(this).attr("href") + '" >');

                 });

         doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html()

                 + '</div>');

         doc.close();

         var frameWindow = iframe.contentWindow;

         frameWindow.close();

         frameWindow.focus();

         frameWindow.print();

     }

     var removePrintArea = function (id) {

         $("iframe#" + id).remove();

     };

 })(jQuery);

插件使用方法：

 <!DOCTYPE html>

 <html lang="zh">

     <head>

         <meta charset="UTF-8" />

         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

         <meta http-equiv="X-UA-Compatible" content="ie=edge" />

         <title>jquery.PrintArea.js 插件使用</title>

     </head>

     <body>

         <div>

             <button id="print">打印</button>

         </div>

         <div id="printContent">

             局部打印

         </div>

         <!--需要引入jquery库-->

         <script src="../jquery/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>

         <script src="jquery.PrintArea.js" type="text/javascript" charset="utf-8"></script>

         <script type="text/javascript">

             $('#print').click(function() {

                 $("#printContent").printArea();

             });

         </script>

     </body>

 </html>

效果：

jquery局部打印插件使用的更多相关文章

  1. Jquery局部打印插件

    局部打印插件 jquery.PrintArea.js js代码 (function ($) {     var printAreaCount = 0;     $.fn.printArea = fun ...

  2. jq局部打印插件jQuery.print.js（兼容IE8）

    /* @license * jQuery.print, version 1.5.1 * (c) Sathvik Ponangi, Doers' Guild * Licence: CC-By (http ...

  3. 局部打印插件 jquery.PrintArea.js

    (function ($) { var printAreaCount = 0; $.fn.printArea = function () { var ele = $(this); var idPref ...

  4. 运用jquery做打印和导出操作

    我最近接手的项目中经常让做出打印和导出统计图和表格 首先说打印,打印如果用echarts做出来的图表,打印的时候,要借助jquery的打印插件. 打印插件: <script src=" ...

  5. jquery 网页局部打印总结

    最近开发过程中遇到了js局部打印的功能,在网上找相关的资料,最终找到了juery.jqprint-0.3.js 和jquery.PrintArea.js两种. 最初使用的是jquery.jqprint ...

  6. jQuery简单易用的网页内容打印插件

    简要教程 jQuery.print是一款简单易容且功能强大的网页内容打印jQuery插件.该网页打印插件可以打印指定区域的网页元素,可以指定跳过不打印某些元素,还可以打印整个页面内容.并且提供了丰富的 ...

  7. asp.net 实现在线打印功能，jQuery打印插件PrintArea实现自动分页

    使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下. 使用方法略过,这里将介绍如何实现打印多页是可以分页. 现在提供两种方法思路: 1.根据特定的打印机型号和使用的纸张类型,然后 ...

  8. jQuery-jqprint.js打印插件使用高版本jQuery时问题

    使用jqprint打印插件的网页demo代码: <!doctype html> <html> <head> <meta charset="utf-8 ...

  9. js或jquery实现页面打印(局部打印)

    首先定义css样式:  复制代码代码如下: @media print { .noprint { display: none;color:green } }  对于不想打印的内容只用在标签中加上 cla ...

随机推荐

  1. 关于Vue的一些小技巧

    前言 用Vue开发一个网页并不难,但是也经常会遇到一些问题,其实大部分的问题都在文档中有所提及,再不然我们通过谷歌也能成功搜索到问题的答案,为了帮助小伙伴们提前踩坑,在遇到问题的时候,心里大概有个谱知 ...

  2. 不用软件快速拥有几百个QQ群并都是管理员

    不用软件快速拥有几百个QQ群并都是管理员!快速拥有有几十万精准数据库的方法 !和快速收集上亿邮箱的思维方法(附上5种赚钱方法).pdf_免费高速下载|百度云 网盘-分享无限制 http://pan.b ...

  3. ztree插件的使用及列表项拖拽的实现（jQuery）+异步加载节点数据

    为了实现如图所示的树状结构图,并使列表项可拖动到盒子里,研究了ztree这个插件的使用,并仔细研究了列表项的拖动事件.完成了预期需求,对jQuery的运用得到了提高.这个插件的功能非常强大,除了基本的 ...

  4. symbol(s) not found for architecture armv7

    Undefined symbols for architecture i386: “_OBJC_CLASS_$_XXX”, referenced from: objc-class-ref in XXX ...

  5. [17] 楼梯(Stairs)图形的生成算法

    感觉这图形怎么看怎么像搓衣板. 顶点数据的生成 bool YfBuildStairsVertices ( Yreal width, Yreal length, Yreal height, Yuint ...

  6. Android Studio体验(二)--创建项目和Genymotion试用

    上周日已经体验了一把Android Studio顺便没事点了点其他功能,不过还是从自己创建项目开始说吧,首先我们要熟悉Android Studio中的Project 和 Module 两个概念.And ...

  7. 【用jQuery来判断浏览器的类型】及【javascript获取用户ip地址】

    用jQuery来判断浏览器的类型,主要是使用$.browser这个工具类,使用方法: $.browser.['浏览器关键字'] //谷歌浏览器.360浏览器等其他一些浏览器,没有专门的判断 funct ...

  8. 职场菜鸟初窥Ant

    对于新入职的新人来说,学校的那一套东西于实际的工作根本不够.诸多的技术知识还得自己去慢慢掌握和理解.对于项目的发布笔者以前也就仅仅使用开发工具集成的发布功能,并未使用过Ant进行项目的发布.因此需要做 ...

  9. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  10. Inside GDALAllRegister之二: 自动加载驱动

    代码    GetGDALDriverManager()->AutoLoadDrivers(); 包含了两部分: 首先获得GDALDriverManager的singleton对象的指针,这点之 ...