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>

js打印的更多相关文章

js 打印
关于js打印很简单的一段代码 function doPrint() { var newWindow = window.open("打印窗口", "_blank" ...
js打印html中的内容
js打印方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
js打印Iframe中的内容，并且不需要预览。
js打印Iframe中的内容,并且不需要预览 js代码如下: <script type="text/javascript" language="Javascript ...
js打印保存用户输入的内容
在用js打印局部页面时,遇到用户新输入的内容没能打印出来,经过观察,发现我采用的js打印方法是读取页面源代码,而用户输入的内容如果不将其写入到页面源代码中去,是打印不出来的,下面是我的解决方法: // ...
使用jquery.PrintArea.js打印网页的样式问题
在使用jquery.PrintArea.js打印局部网页样式的时候,发现样式打印不出来,在网上找了好多资料,整理一下分享给大家一.先看看css的引用文件方式 1.直接在内部的元素中使用”style” ...
js打印页面指定区域，并去掉页眉上的时间和请求路径
需要通过js打印指定页面的内容 <style media=print type="text/css"> .noprint{visibility:hidden} < ...
利用JS打印质数
我爱撸码,撸码使我感到快乐!大家好,我是Counter,今天非常愉快,没有前几天的相对比较复杂的逻辑思维在里面,今天来写写,利用JS打印质数,基本上很多面试,会很经常的考到.那废话不多说,直接上代码: ...
jquery.wordexport.js打印echarts.js画出的柱状图
jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.worde ...
使用lodop.js打印控件打印table并分页等
import {getLodop} from '@/utils/LodopFuncs.js' //打印表格 export default{ // num 打印还是打印预览 conData 对象形式传 ...

随机推荐

python2.7_1.13_编写一个SNTP客户端
1.pip install ntplib 2.思路:先创建一个NTPClient实例,然后在这个实例上调用request()方法,把NTP服务器的地址传入方法,向NTP服务器发起一个NTP请求,响应使 ...
poj 2096
/** 程序员调bug思路: 一共有四种情况,1. 1个原有的bug 在原有的分类中2. 1个原有的bug 在新的分类中3. 1个新的bug 在原有的分类中4. 1个新bug 在新的分类中 **/ # ...
（IOS）CoreLocation 和 MapKit 的应用
CoreLocation是控制GPS硬件获取地理坐标信息的系统类库,而MapKit是系统地图的工具包,将两者结合使用可以实现不同的地图功能. 1.CoreLocation 在CoreLocation中 ...
转：触屏中的js事件
一.触摸事件 ontouchstartontouchmoveontouchendontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们 ...
QT学习之文本文件读写
上一章我们介绍了有关二进制文件的读写.二进制文件比较小巧,却不是人可读的格式.而文本文件是一种人可读的文件.为了操作这种文件,我们需要使用QTextStream类.QTextStream和QDataS ...
stl源代码剖析：编译器的提前定义位置集设置
眼下我的工作环境还是win.全部演示也用VS或者cygwin这些环境作为基础. 1.配置项目的附加include目,添加提前定义位置集设置,编译器会把它添加include路径,比方在某个目录中定义一个 ...
测试css2.1选择器IE6/7/8支持情况,属性选择器/子元素/相邻
环境 xp ie 8 , ietester <!doctype html> <html> <head> <meta charset="utf-8&q ...
Dreamer2.1 发布新增将Bean解析成xml和json
一个上午,增加两个功能 1.直接将对象解析成XML 2.将对象解析成JSON 对象可以是数组,可以是集合,也可以是单个对象源码和jar下载地址:http://pan.baidu.com/share/ ...
Oracle 数据的导入和导出（SID service.msc）
一:版本号说明: (1)(Oracle11 32位系统)Oracle - OraDb11g_home1: (2)成功安装后显演示样例如以下:第一个图是管理工具.创建连接.创建表:第二个是数据库创建工 ...
windows下以指定用户访问SMB服务器进行读写
需求:最近要开发某系统前端界面,但是该系统是部署在linux服务器上,前端是用php开发,实时调试运行需要linux下系统环境支持, 每次修改都需要手动传到服务器上,尤其是debug阶段,每修改一点就 ...

js打印

js打印的更多相关文章

随机推荐

热门专题