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>

js打印的更多相关文章

  1. js 打印

    关于js打印很简单的一段代码 function doPrint() { var newWindow = window.open("打印窗口", "_blank" ...

  2. js打印html中的内容

    js打印方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. js打印Iframe中的内容，并且不需要预览。

    js打印Iframe中的内容,并且不需要预览 js代码如下: <script type="text/javascript" language="Javascript ...

  4. js打印保存用户输入的内容

    在用js打印局部页面时,遇到用户新输入的内容没能打印出来,经过观察,发现我采用的js打印方法是读取页面源代码,而用户输入的内容如果不将其写入到页面源代码中去,是打印不出来的,下面是我的解决方法: // ...

  5. 使用jquery.PrintArea.js打印网页的样式问题

    在使用jquery.PrintArea.js打印局部网页样式的时候,发现样式打印不出来,在网上找了好多资料,整理一下分享给大家 一.先看看css的引用文件方式 1.直接在内部的元素中使用”style” ...

  6. js打印页面指定区域，并去掉页眉上的时间和请求路径

    需要通过js打印指定页面的内容 <style media=print type="text/css"> .noprint{visibility:hidden} < ...

  7. 利用JS打印质数

    我爱撸码,撸码使我感到快乐!大家好,我是Counter,今天非常愉快,没有前几天的相对比较复杂的逻辑思维在里面,今天来写写,利用JS打印质数,基本上很多面试,会很经常的考到.那废话不多说,直接上代码: ...

  8. jquery.wordexport.js打印echarts.js画出的柱状图

    jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.worde ...

  9. 使用lodop.js打印控件打印table并分页等

    import {getLodop} from '@/utils/LodopFuncs.js' //打印表格 export default{ // num 打印还是打印预览 conData 对象形式 传 ...

随机推荐

  1. GSAP学习笔记

    GSAP(Green Sock Animation Platform)是一个十分好用的js动画库,据说是as的精简版 以下是学习GSAP的一些笔记:貌似中文的文档不是很多 GSAP notes: tl ...

  2. Xamarin.Android开发实践（三）

    原文:Xamarin.Android开发实践(三) 一.前言 用过Android手机的人一定会发现一种现象,当你把一个应用置于后台后,一段时间之后在打开就会发现应用重新打开了,但是之前的相关的数据却没 ...

  3. android中使用DisplayMetrics获取屏幕参数

    --关于Density int android.graphics.Bitmap.getDensity(),返回bitmap-density(密度).默认的density就是当前display-dens ...

  4. poj 2021 Relative Relatives(暴力)

    题目链接:http://poj.org/problem?id=2021 思路分析:由于数据较小,采用O(N^2)的暴力算法,算出所有后代的年龄,再排序输出. 代码分析: #include <io ...

  5. Hadoop Security Authentication Terminology --Kerberos

    Hadoop Security Authentication Terminology --Kerberos What is kinit? Kinit -  obtain and cache Kerbe ...

  6. 【Android 多媒体开发】 MediaPlayer 状态机 接口 方法 解析

    作者 : 韩曙亮 转载请著名出处 :  http://blog.csdn.net/shulianghan/article/details/38487967 一. MediaPlayer 状态机 介绍 ...

  7. 关于int.TryParse的使用

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. ETHERNET帧结构

    以太网帧http://blog.csdn.net/guoshaobei/article/details/4768514 Ethernet的帧格式 (转)  http://jiangqiaosun.bl ...

  9. django 时间计数

    value必须replace(tzinfo=None)变成datetime格式,否则格式不对不能相减.

  10. Pathchirp—有效的带宽估计方法（二）

    上一个blog介绍了有效带宽估计方法:pathload.http://blog.csdn.net/ice110956/article/details/11126491. 做一个小小的总结:pathlo ...