js打印

js打印，其实是打印当前页面的内容，是调用 系统的js方法，来弹出 打印设置窗口，用法很简单。

window.print()就行，有的考虑到 浏览器兼容性问题，会用到document.execCommand("print")

function jsPrint(){  
if (typeof (getBrowerType().ie) != "undefined") {//浏览器判断
                document.execCommand('print');//弹出打印设置窗口
            } else {
                window.print();//弹出打印设置窗口
            }
        });

        function getBrowerType() {
            var sysType = {};
            var ua = navigator.userAgent.toLowerCase();
            var matchs;
            (matchs = ua.match(/msie ([\d.]+)/)) ? sysType.ie = matchs[1] :
            (matchs = ua.match(/trident\/([\d.]+)/)) ? sysType.ie = matchs[1] :
            (matchs = ua.match(/firefox\/([\d.]+)/)) ? sysType.firefox = matchs[1] :
            (matchs = ua.match(/chrome\/([\d.]+)/)) ? sysType.chrome = matchs[1] :
            (matchs = ua.match(/opera.([\d.]+)/)) ? sysType.opera = matchs[1] :
            (matchs = ua.match(/version\/([\d.]+).*safari/)) ? sysType.safari = matchs[1] : 0;
            return sysType;
        }

以上 就能够 弹出打印窗口，实现打印。那么如何选择性的 打印页面里的内容呢？

答案是，给不打印的内容 加上一个不显示的样式

<style media="print">//注意  要设置media="print"，意思是在打印时变现的样式
 .noPrint{//样式名字 随便取，你看得懂就好了
    display:none;//设置为打印的时候不显示
}
</style>

<div class=".noPrint">
这些不显示,可以把打印按钮放在这里
<input type="button" value="打印" onclick="jsPrint()"/>
这样，在打印的时候，这个div里面的内容就不会显示了。可以给多个元素设置noPrint样式
</div>

以下来个完整的例子：

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/js/jquery-ui-1.8.20.min.js"></script>
    <script type="text/javascript">
        function jsPrint() {        
            if (typeof (getBrowerType().ie) != "undefined") {
                document.execCommand('print');
            } else {
                window.print();
            }
        }

        function getBrowerType() {
            var sysType = {};
            var ua = navigator.userAgent.toLowerCase();
            var matchs;
            (matchs = ua.match(/msie ([\d.]+)/)) ? sysType.ie = matchs[1] :
            (matchs = ua.match(/trident\/([\d.]+)/)) ? sysType.ie = matchs[1] :
            (matchs = ua.match(/firefox\/([\d.]+)/)) ? sysType.firefox = matchs[1] :
            (matchs = ua.match(/chrome\/([\d.]+)/)) ? sysType.chrome = matchs[1] :
            (matchs = ua.match(/opera.([\d.]+)/)) ? sysType.opera = matchs[1] :
            (matchs = ua.match(/version\/([\d.]+).*safari/)) ? sysType.safari = matchs[1] : 0;
            return sysType;
        }
    </script>
    <style media="print">
        .noPrint {
        
            display:none;
        }

    </style>
</head>
<body>
    <div>
        <table>
            <thead>
                <tr>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期五</th>

                </tr>
            </thead>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>体育</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>体育</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>体育</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>体育</td>
            </tr>

        </table>
    </div>
    <div class="noPrint" style="border:solid 2px green">xxxxxx这些东西不要打印
        <input class="noPrint" type="button" value="打印" onclick="jsPrint()" />
    </div>
</body>
</html>

 

posted @ 2016-11-17 20:54  凌晨10点13分  阅读(349)  评论(0)  编辑  收藏  举报