zoukankan      html  css  js  c++  java
  • JQPrint

    一个通过单击页面按钮,便实现页面打印的jQuery插件jqprint。

    请注意!很多朋友遇到 Cannot read property 'opera' of undefined错误问题是juqery版本兼容问题

    解决方法:加入迁移辅助插件jquery-migrate-1.0.0.js可解决版本问题

    <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>

    实现方法

    引用jquery和,jqprint到您的页面

    <script language="javascript" src="jquery-1.4.4.min.js"></script>
    <script language="javascript" src="jquery.jqprint-0.3.js"></script>

    js

    <script language="javascript">
    function  a(){
            $("#ddd").jqprint();
        }
    </script>

    html

    <div id="ddd">
        <table>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
    </div>
    <input type="button" onclick=" a()" value="打印"/>

    可以设置一个模版打印,只抽取页面上的几个数据,填入模版,进行打印

    相关参数 

    $("#printContainer").jqprint({      
    debug: false, //如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,可以再源码中调大),默认是false      
    importCSS: true, //true表示引进原来的页面的css,默认是true。(如果是true,先会找$("link[media=print]"),若没有会去找$("link")中的css文件)      
    printContainer: true, //表示如果原来选择的对象必须被纳入打印(注意:设置为false可能会打破你的CSS规则)。      
    operaSupport: true//表示如果插件也必须支持歌opera浏览器,在这种情况下,它提供了建立一个临时的打印选项卡。默认是true });

    例子

    <!DOCTYPE html>
    <html>    
        <head>        
        <meta charset="UTF-8"/>        
        <title>效果测试</title>        
        <link href="printShou.css" rel="stylesheet"type="text/css" media="print"/>                    
        <script type="text/javascript"src="jquery-1.7.1.js"></script>        
        <script type="text/javascript"src="jquery.jqprint-0.3.js"></script>        
        <script type="text/javascript">            
            $(function(){                
                $("#btn1").click(function(){                    
                    $("#visaReport").jqprint({});
                });
            });        
        </script>    
        </head>    
        <body>        
        <input type="button"id="btn1" value="打印"/>        
        <div class="visaReport" id="visaReport">            
            <div class="visa_head">                
                <divclass="visa_head_title">XX中心</div>                
                <divclass="visa_head_title">确认及收据</div>            
            </div>            
            <div class="visa_body">                
                <div>                    
                    <div class="visa_person">                         
                        <div class="visa_label">姓名:xiaoming</div>                         
                        <div class="visa_label">日期:2014/12/30</div>                    
                    </div>                    
                    <table class="visa_fee">                        
                        <tr>                            
                            <td></td><td>价格</td>                        
                        </tr>                        
                        <tr>                            
                            <td>服务费</td><td>119.00RMB</td>                        
                        </tr>                        
                        <tr>                            
                            <td>快递费</td><td>130.00R</td>                        
                        </tr>                    
                    </table>                    
                    <table class="visa_total_fee">                        
                        <tr>                            
                            <td style="207px;">Total/总计</td><td>240.00RMB</td>                                    </tr>                    
                    </table>                
                </div>                    
            </div>        
        </div>    
    </body>
    </html>

    注意事项

    chrome 打印选项 布局 彩色 纸张尺寸 边距 可选择去除页眉页脚 背景图形
    opera 布局 彩色 纸张尺寸 边距 可选择去除页眉页脚 背景图形
    firefox 布局 纸张尺寸
    safari 布局 纸张尺寸
    IE9 布局 纸张尺寸
    IE11 布局 纸张尺寸


    页面显示样式和打印的样式是有些区别的,提供了一个media的属性,指定其输出的方式为print,即media=print的这个属性,
    写了这个属性之后,所引入CSS的一些样式在打印的时候才会生效了,通过在打印的时候,我们可以通过样式去改变当前网页的显示内容,及显示的样式。
    <link href="printShou.css" rel="stylesheet"type="text/css" media="print"/>

    打印图片过多 setTimeout修改时间3000

  • 相关阅读:
    Software Solutions CACHE COHERENCE AND THE MESI PROTOCOL
    CACHE COHERENCE AND THE MESI PROTOCOL
    Multiprocessor Operating System Design Considerations SYMMETRIC MULTIPROCESSORS
    Organization SYMMETRIC MULTIPROCESSORS
    PARALLEL PROCESSING
    1分钟内发送差评邮件
    Secure Digital
    SYMMETRIC MULTIPROCESSORS
    A Taxonomy of Parallel Processor Architectures
    parallelism
  • 原文地址:https://www.cnblogs.com/xiaoSY-learning/p/5817325.html
Copyright © 2011-2022 走看看