使用jQuery.print.js完成打印功能

刚刚入行，这个功能完成的够呛，再网上找了半天的资料，很多人写得不是很详细，具体有哪些坑只有自己趟过才能有深刻的体会。

现在放下载地址：https://github.com/DoersGuild/jQuery.print

现在讲述我的过程：

说实话，没怎么看这个插件，反正我是把所有的js都引进去了

    

        
Element 1
        

        Some random text.
        
        
        
        Print this (jQuery('#ele1').print())
        
    
    

        
Element 2
        

        Some other random text.
        
        
        Print this ($.print("#ele2")) and skip the button (.no-print)
        
    
    

        
Element 3
        

        Some more random text that is not to be printed.
        
        
        Print this (jQuery.print('#ele3'))
        
    
    

        
Element 4
        

        Some really random text.
        
        

        $("#ele4").find('button').on('click', function() {
            //Print ele4 with custom options
            $("#ele4").print({
                //Use Global styles
                globalStyles : false,
                //Add link with attrbute media=print
                mediaPrint : false,
                //Custom stylesheet
                stylesheet : "http://fonts.googleapis.com/css?family=Inconsolata",
                //Print in a hidden iframe
                iframe : false,
                //Don't print this
                noPrintSelector : ".avoid-this",
                //Add this at top
                prepend : "Hello World!!!<br/>",
                //Add this on bottom
                append : "<span><br/>Buh Bye!</span>",
                //Log to console when printing is done via a deffered callback
                deferred: $.Deferred().done(function() { console.log('Printing done', arguments); })
            });
        });
        
        
        Print this in a new window, without this button and the title
        
    
    

    
    Print page - jQuery.print()
    

这是demo里面的一部分，这个插件的使用十分简单，就是这种形式：

你要打印的内容

，用

限定你要打印的范围。
在这里我踩了一个坑，我把标签放在

标签外面，但是表格的内容放在

里面，从而导致一直打印不出内容。所以说正确的代码是：

 

     
         内容
     
 

然后还要有一个打印的按钮：

     
     	  打印报表
     

这里面的jQuery(’#ele1’).print()中的ele1和

中的ele1是对应的

最后按照demo加上了

最后打印出来的如下：

7-1更新：在引用js的时候引入js和jquery.js的顺序挺重要的，有时候引入路径正确但是点击没反应极有可能是引入的顺序不对