局部打印插件 jquery.PrintArea.js

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); 
 

 

使用示例：

   <input type= 
  " 
  button 
  " id= 
  " 
  btnPrint 
  " value= 
  " 
  打印 
  "/> 
  
<div id= 
  " 
  printContent 
  ">要打印的内容区域<div> 
  
 
  
<script type= 
  " 
  text/javascript 
  "> 
  
$(function(){ 
  
        $( 
  "# 
  btnPrint 
  ").click(function(){ $( 
  "# 
  printContent 
  ").printArea(); }); 
  
}); 
  
</script>