浏览器js打印

最新推荐文章于 2022-08-23 10:46:09 发布

vivi沧海月明

最新推荐文章于 2022-08-23 10:46:09 发布

阅读量983

点赞数 1

分类专栏： JavaScript web前段技术

本文链接：https://blog.csdn.net/zwseaman/article/details/9133327

版权

JavaScript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

web前段技术

12 篇文章 0 订阅

订阅专栏

简要记录如下：

调用打印机，同Ctrl+P

window.print();

1 打印一个较大的table时，如果table包含<thead>且table里面的内容被分页到第二页，那么第二页会自动加上<thead>，即标题部分；如果table不包含<thead>则第二页不会自动加上标题；

2 可以将页面中需要打印的部分内容读取到iframe中进行打印，可用如下jquery插件实现，并修改对应的样式文件地址：

 
         // Create a jquery plugin that prints the given element. 
        
         jQuery.fn.print =  
         function  
         () { 
        
         // NOTE: We are trimming the jQuery collection down to the 
        
         // first element in the collection. 
        
         if  
         ( 
         this 
         .size() > 1) { 
        
         this 
         .eq(0).print(); 
        
         return 
         ; 
        
         }  
         else  
         if  
         (! 
         this 
         .size()) { 
        
         return 
         ; 
        
         } 
        
         // ASSERT: At this point, we know that the current jQuery 
        
         // collection (as defined by THIS), contains only one 
        
         // printable element. 
        
         // Create a random name for the print frame. 
        
         var  
         strFrameName = ( 
         "printer-"  
         + ( 
         new  
         Date()).getTime()); 
        
         // Create an iFrame with the new name. 
        
         var  
         jFrame = $( 
         "<iframe name='"  
         + strFrameName +  
         "'>" 
         ); 
        
         // Hide the frame (sort of) and attach to the body. 
        
         jFrame 
        
         .css( 
         "width" 
         ,  
         "1px" 
         ) 
        
         .css( 
         "height" 
         ,  
         "1px" 
         ) 
        
         .css( 
         "position" 
         ,  
         "absolute" 
         ) 
        
         .css( 
         "left" 
         ,  
         "-9999px" 
         ) 
        
         .appendTo($( 
         "body:first" 
         )) 
        
         ; 
        
         // Get a FRAMES reference to the new frame. 
        
         var  
         objFrame = window.frames[strFrameName]; 
        
         // Get a reference to the DOM in the new frame. 
        
         var  
         objDoc = objFrame.document; 
        
         // Grab all the style tags and copy to the new 
        
         // document so that we capture look and feel of 
        
         // the current document. 
        
         // Create a temp document DIV to hold the style tags. 
        
         // This is the only way I could find to get the style 
        
         // tags into IE. 
        
         var  
         jStyleDiv = $( 
         "<div>" 
         ).append( 
        
         $( 
         "style" 
         ).clone() 
        
         ); 
        
         // Write the HTML for the document. In this, we will 
        
         // write out the HTML of the current element. 
        
         objDoc.open(); 
        
         objDoc.write( 
         "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" 
         ); 
        
         objDoc.write( 
         "<html>" 
         ); 
        
         objDoc.write( 
         "<head>" 
         ); 
        
         objDoc.write( 
         "<title>" 
         ); 
        
         objDoc.write(document.title); 
        
         objDoc.write( 
         "</title>" 
         ); 
        
         objDoc.write( 
         "<link rel=\"stylesheet\" type=\"text/css\" href=\"/Style/Public-printer.css\" />" 
         ); 
        
         objDoc.write(jStyleDiv.html()); 
        
         objDoc.write( 
         "</head>" 
         ); 
        
         objDoc.write( 
         "<body>" 
         ); 
        
         objDoc.write( 
         "<div class='"  
         +  
         this 
         .attr( 
         "class" 
         ) +  
         "'>"  
         +  
         this 
         .html() +  
         "</div>" 
         ); 
        
         objDoc.write( 
         "</body>" 
         ); 
        
         objDoc.write( 
         "</html>" 
         ); 
        
         objDoc.close(); 
        
         // Print the document. 
        
         objFrame.focus(); 
        
         objFrame.print(); 
        
         // Have the frame remove itself in about a minute so that 
        
         // we don't build up too many of these frames. 
        
         setTimeout( 
        
         function  
         () { 
        
         jFrame.remove(); 
        
         }, 
        
         (60 * 1000) 
        
         ); 
        
         }