页面打印的总结

1. jqprint()打印
a.首先需要引用jQuery和插件的js：

1. <script src="${ctx}/static/js/plugins/jqprint/jquery.jqprint-0.3.js"></script>

b.打印方式很简单，选择节点，执行方法就可以打印该节点里内容了：function preview(){
        $('#set0').jqprint({ importCSS: true});
}
c.使用时可能会出现错误：Cannot read property 'opera' of undefined，是juqery版本兼容问题，有两个办法解决：
一是可以引用迁移辅助插件jquery-migrate-1.0.0.js：

1. <script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>

二是在jqprint()方法执行前添加以下代码来解决兼容问题：
例：

1. function preview(){
2.                 jQuery.browser={};
3.                 (function(){
4.                         jQuery.browser.msie=false; 
5.                         jQuery.browser.version=0;
6.                         if(navigator.userAgent.match(/MSIE ([0-9]+)./)){ 
7.                                 jQuery.browser.msie=true;
8.                                 jQuery.browser.version=RegExp.$1;
9.                         }
10.                 })();
11.                 $('#set0').jqprint({ importCSS: true});
12.         }

2.打印iframe内容
承诺书等模板的打印，可以直接通过iframe引用模板的pdf等文件来直接打印，非常便捷。
首先就在页面加个隐藏的iframe，iframe引用项目中要打印的模板文件，然后在事件里添加打印方法即可：

1. HTML:
2. <iframe style="display:none" id="printIframe1" src="${ctx}/static/image/homePage_yc/pdf3.pdf"></iframe>
3. <input type="button"value="打印" class="loadbtn">
4. js:
5. function preview_new(flag){
6.       $("#printIframe1")[0].contentWindow.print(); 
7. }

3.打印样式
在CSS中可以在@media print 里编写打印专用的样式，在打印时会优先采用@media print 里样式，因此例如当页面展示的列表与打印时需要的样式不同时，就可以在@media print里写另一套只在打印时用的CSS。最多用的是在其中添加一个.noprint{ display: none;}，然后再页面中为不打算打印的内容添加该类就可以在打印中不显示该内容了，这个可以配合上面两种方法进行更加细节的打印控制，尤其是用iframe打印其他页面的列表时，可以将打印的页面的其他内容都隐藏。

1. @media print {
2.     .noprint{
3.         display: none;
4.     }
5.     .printpics{
6.         display:block;
7.     }
8.     .host-content{
9.         border:1px solid #000;
10.     }
11. 

     

转载于:https://www.cnblogs.com/min-yu/p/10927689.html