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. 第2章 Python基础语法 -- 数据类型

    2.2数据类型 变量存储在内存中的值.这就意味着在创建变量时会在内存中开辟一个空间.基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中. 2.2.1 标准数据类型 在内存中存储 ...

  2. Python学习之路——类

    类: 类是将抽象的实物进行的划分. 在现实世界中如果我们将: 人类包含:男人.女人.孩子.老人等动物类包含:小猫.小狗.小兔子等 在代码世界中我也可以分类,例如将相同功能的代码放到一起,这就是分类. ...

  3. [LeetCode]题解（python）：063-Unique Paths II

    题目来源: https://leetcode.com/problems/unique-paths-ii/ 题意分析: 这题的规则和上一题一样.给一个m×n的矩阵0,1矩阵.0代表可以经过,1代表不可以 ...

  4. CQRS架构设计及其实现

    CQRS架构设计及其实现 一.为什么要实践领域驱动? 近一年时间我一直在思考一个问题:“如何设计一个松耦合.高伸缩性.易于维护的架构?”.之所以有这样的想法是因为我接触的不少项目都是以数据库脚本来实现 ...

  5. IT第三天 - 数据类型、转换、Scanner使用

    IT第三天 上午 变量类型 1.6种数值类型:byte.short.int.long.float.double:其中byte是8个字节,short是16字节,int是32字节.long是64字节:日常 ...

  6. (step6.3.5)hdu 1281(棋盘游戏——二分图的完美匹配)

    题目大意:本体是中文题.读者可以直接在OJ上看 解题思路: 1)完美匹配:所有的端点都是匹配点 2)对于二分图的完美匹配,我们需要用一个数组来存储匹配点.(而二分图的其他问题(我们则可以直接使用变量来 ...

  7. POJ 3518 Prime Gap（素数题）

    [题意简述]:输入一个数,假设这个数是素数就输出0,假设不是素数就输出离它近期的两个素数的差值,叫做Prime Gap. [分析]:这题过得非常险.由于我是打的素数表. 由于最大的素数是1299709 ...

  8. 如何使用notepad++搭配MinGW配置编译C/C++

    最经开始学C++了,平时学习不喜欢用IDE,一直以来都喜欢使用sublimetext写代码.所以在网上找了一下如何配置sublimetext编译C/C++.不过简单配置之后,只有输出,要想进行输出操作 ...

  9. if else配对问题

    else语句总是与离它最近的if语句配对,所以在if语句的嵌套中一定要注意else语句与哪个if语句匹配 #include <iostream> using namespace std; ...

  10. [转][Swust OJ 24]--Max Area(画图分析)

    转载自:http://www.cnblogs.com/hate13/p/4160751.html Max Area 题目描述:(链接:http://acm.swust.edu.cn/problem/2 ...