html局部打印

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>

  

时间: 2024-10-13 07:39:55

html局部打印的相关文章

js利用window.print实现局部打印方法

一.局部打印,打印单独的一部分内容 方法:为要打印的内容设置单独的id名,新开窗口并打印. 举例如下: 1.html <div id="pulPrint"> 我是要打印的内容 </div> <div class="btn btn-primary print-btn">打印</div> 2.js $(".print-btn").on("click",function(){ prin

新的浏览器局部打印实现方法

背景 最近在做开发平台,其中涉及到局部打印的功能,将此功能做为开发平台的一个通用功能,从网上搜了一些解决方案和开源js组件,测试的结果都不满意,大多是将打印的内容放在一个iframe内,去打印iframe里面的内容,对性能影响比较大,特别是要打印的内容比较多的情况,而且效果有可能跟实际显示的不一样,干脆还是自己想办法实现吧,后来自己琢磨出了另一种实现方法,和大家一起分享下,谁有更好的解决方案欢迎交流 思路 思路说起来也比较简单,所谓局部打印就是只打印页面中的一部分(如果是打印整个页面就没问题了,

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) />&

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

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

jquery局部打印插件使用

基于jquery库的jquery.PrintArea.js插件源代码为: 1 (function ($) { 2 var printAreaCount = 0; 3 $.fn.printArea = function () { 4 var ele = $(this); 5 var idPrefix = "printArea_"; 6 removePrintArea(idPrefix + printAreaCount); 7 printAreaCount++; 8 var iframeI

js实现页面的局部打印

以前用的 $("#print_div_contractnumber4").jqprint(); 现在不知为何不能用了 只能用下面的方法实现局部打印了 //打印div function printDIV(){            bdhtml = window.document.body.innerHTML;            sprnstr = "<!--startprint-->";                eprnstr = "

jquery 网页局部打印总结

最近开发过程中遇到了js局部打印的功能,在网上找相关的资料,最终找到了juery.jqprint-0.3.js 和jquery.PrintArea.js两种. 最初使用的是jquery.jqprint-0.3.js,是在弹窗的情况下使用,即使出现滚动条也依然能够把所有内容成功打印出来.但是如果在当前页面div中出现滚动条(div内容过多,出现垂直滚动条)的话,则内容打印不全.所以最终选择的的是jquery.PrintArea.js.这是我现在发现的最明显的区别. 这两个都是打印指定div内的显示

Jquery局部打印插件

局部打印插件 jquery.PrintArea.js js代码 (function ($) {    var printAreaCount = 0;    $.fn.printArea = function () {        var ele = $(this);        var idPrefix = "printArea_";        removePrintArea(idPrefix + printAreaCount);        printAreaCount++

网页打印(局部打印)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="