html页面局部打印的小栗子

只要修改点击打印的按钮和打印的div区域的id就行啦

<!DOCTYPE html>

<html>

<head>

  <title>print test page</title>

  <meta charset="utf-8">

  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">

</script>

<script type="text/javascript">

//貌似要jq 1.6版本以上才支持prop函数

  $(document).ready(function(){

    var print_click = "print"; //打印的按钮的id

    $("#" + print_click).bind("click", function(){

      var print_id = "print_content"; //要打印的div的id

      var k = $("#" + print_id).prop("outerHTML");

      $("body *").hide();

      $("body").append(k);

      window.print();

      $("body *").show();

      $("body #" + print_id + ":last").remove()

    })

  })

</script>

</head>

<body>

<div>

  <div>不需要打印</div>

  <div id="print_content">打印的内容</div>

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

</div>

</body>

</html>

　　

html局部打印的更多相关文章

  1. Jquery局部打印插件

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

  2. js实现（可实现局部打印）

    1.js实现(可实现局部打印) <input id="btnPrint" type="button" value="打印" oncli ...

  3. jquery 网页局部打印总结

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

  4. Java局部打印的问题

    项目中遇到了做局部打印的情况,最开始用的bootstrap,可是实际显示的和打印的效果就不一样了,于是就只能换一种方式了. 打印是用的jqprint 这个插件,很简单好用的插件. 引入两个js就可以了 ...

  5. jquery局部打印插件使用

    基于jquery库的jquery.PrintArea.js插件源代码为: (function ($) { var printAreaCount = 0; $.fn.printArea = functi ...

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

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

  7. 利用js和CSS实现网页局部打印

    1 局部打印方法: 作用:将id为dayin的内容,新建页面并打印,可解决打印某页面中的部分内容的问题.使用方法:将要打印的内容通过 <span id="dayin"> ...

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

    方法一:直接用js的打印方法 <input id="btnPrint" type="button" value="打印" onclic ...

  9. web项目局部打印

    window.print()方法是打印整个body,若想打印局部区域,网上出现了各种解决办法,我觉得都挺好的.我最推荐jquery.PrintArea.js插件形式 点击上述链接首先下载下来,我的是版 ...

随机推荐

  1. storm学习

    一 storm 相关术语 . Nimbus storm 集群主节点,负责资源分配和任务调度.(相当于namenode) . supervisor storm集群工作节点,接受Nimbu分配任务,管理w ...

  2. ios开发证书

    文章写得很透彻 https://segmentfault.com/a/1190000004144556?f=tt&hmsr=toutiao.io

  3. Gulp: Getting Started

    https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md 1. Install gulp globally: $ npm i ...

  4. Android四大组件之Activity

    实验内容 了解Activity的四个状态 Activity的生命周期 启动另外一个Activity 实验要求 编码实现观察Activity的生命周期函数执行过程 编码实现启动另外一个Activity ...

  5. PC管理端与评委云打分配合步骤及疑难问题汇编,即如何使用PC管理端的云服务管理功能

    一.前期环境及数据准备 A.PC管理端主要流程 1.进入菜单 编辑/选项/服务器 界面,如下图所示,采用我官方所提供的云服务,不采用自己假设的AppWeb服务. 切记:AppWeb服务和云服务只能二选 ...

  6. ps commad

    要对系统中进程进行监测控制,查看状态,内存,CPU的使用情况,使用命令:/bin/ps (1)         ps :是显示瞬间进程的状态,并不动态连续: (2)         top:如果想对进 ...

  7. ubuntu安装libxml2--PC端

    莫名其妙的安装了libxml2,其实电脑本身就有的,不知道有木有影响 具体安装步骤:1.解压:$tar zxvf  libxml2-2.9.4.tar.gz  //解压在了/home/newday/下 ...

  8. ElasticSearch基本学习

    ES介绍 维基百科使用Elasticsearch来进行全文搜做并高亮显示关键词,以及提供search-as-you-type.did-you-mean等搜索建议功能. 英国卫报使用Elasticsea ...

  9. OpenCV 轮廓基本特征

     http://blog.csdn.net/tiemaxiaosu/article/details/51360499 OpenCV 轮廓基本特征 2016-05-10 10:26 556人阅读 评论( ...

  10. JSP中文乱码总结

    大家在JSP的开发过程中,经常出现中文乱码的问题,可能一至困扰着大家,现把JSP开发中遇到的中文乱码的问题及解决办法写出来供大家参考.首先了解一下Java中文问题的由来: Java的内核和class文 ...