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

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

  1. function jsPrint(){
  2. if (typeof (getBrowerType().ie) != "undefined") {//浏览器判断
  3.                 document.execCommand('print');//弹出打印设置窗口
  4.             } else {
  5.                 window.print();//弹出打印设置窗口
  6.             }
  7.         });
  8.  
  9.         function getBrowerType() {
  10.             var sysType = {};
  11.             var ua = navigator.userAgent.toLowerCase();
  12.             var matchs;
  13.             (matchs = ua.match(/msie ([\d.]+)/)) ? sysType.ie = matchs[1] :
  14.             (matchs = ua.match(/trident\/([\d.]+)/)) ? sysType.ie = matchs[1] :
  15.             (matchs = ua.match(/firefox\/([\d.]+)/)) ? sysType.firefox = matchs[1] :
  16.             (matchs = ua.match(/chrome\/([\d.]+)/)) ? sysType.chrome = matchs[1] :
  17.             (matchs = ua.match(/opera.([\d.]+)/)) ? sysType.opera = matchs[1] :
  18.             (matchs = ua.match(/version\/([\d.]+).*safari/)) ? sysType.safari = matchs[1] : 0;
  19.             return sysType;
  20.         }

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

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

  1. <style media="print">//注意  要设置media="print"，意思是在打印时变现的样式
  2.  .noPrint{//样式名字 随便取，你看得懂就好了
  3.     display:none;//设置为打印的时候不显示
  4. }
  5. </style>
  6.  
  7. <div class=".noPrint">
  8. 这些不显示,可以把打印按钮放在这里
  9. <input type="button" value="打印" onclick="jsPrint()"/>
  10. 这样，在打印的时候，这个div里面的内容就不会显示了。可以给多个元素设置noPrint样式
  11. </div>

以下来个完整的例子：

  1. <html>
  2. <head>
  3.     <meta name="viewport" content="width=device-width" />
  4.     <title>Index</title>
  5.     <script src="~/js/jquery-ui-1.8.20.min.js"></script>
  6.     <script type="text/javascript">
  7.         function jsPrint() {
  8.             if (typeof (getBrowerType().ie) != "undefined") {
  9.                 document.execCommand('print');
  10.             } else {
  11.                 window.print();
  12.             }
  13.         }
  14.  
  15.         function getBrowerType() {
  16.             var sysType = {};
  17.             var ua = navigator.userAgent.toLowerCase();
  18.             var matchs;
  19.             (matchs = ua.match(/msie ([\d.]+)/)) ? sysType.ie = matchs[1] :
  20.             (matchs = ua.match(/trident\/([\d.]+)/)) ? sysType.ie = matchs[1] :
  21.             (matchs = ua.match(/firefox\/([\d.]+)/)) ? sysType.firefox = matchs[1] :
  22.             (matchs = ua.match(/chrome\/([\d.]+)/)) ? sysType.chrome = matchs[1] :
  23.             (matchs = ua.match(/opera.([\d.]+)/)) ? sysType.opera = matchs[1] :
  24.             (matchs = ua.match(/version\/([\d.]+).*safari/)) ? sysType.safari = matchs[1] : 0;
  25.             return sysType;
  26.         }
  27.     </script>
  28.     <style media="print">
  29.         .noPrint {
  30.  
  31.             display:none;
  32.         }
  33.  
  34.     </style>
  35. </head>
  36. <body>
  37.     <div>
  38.         <table>
  39.             <thead>
  40.                 <tr>
  41.                     <th>星期一</th>
  42.                     <th>星期二</th>
  43.                     <th>星期三</th>
  44.                     <th>星期五</th>
  45.  
  46.                 </tr>
  47.             </thead>
  48.             <tr>
  49.                 <td>语文</td>
  50.                 <td>数学</td>
  51.                 <td>英语</td>
  52.                 <td>体育</td>
  53.             </tr>
  54.             <tr>
  55.                 <td>语文</td>
  56.                 <td>数学</td>
  57.                 <td>英语</td>
  58.                 <td>体育</td>
  59.             </tr>
  60.             <tr>
  61.                 <td>语文</td>
  62.                 <td>数学</td>
  63.                 <td>英语</td>
  64.                 <td>体育</td>
  65.             </tr>
  66.             <tr>
  67.                 <td>语文</td>
  68.                 <td>数学</td>
  69.                 <td>英语</td>
  70.                 <td>体育</td>
  71.             </tr>
  72.  
  73.         </table>
  74.     </div>
  75.     <div class="noPrint" style="border:solid 2px green">xxxxxx这些东西不要打印
  76.         <input class="noPrint" type="button" value="打印" onclick="jsPrint()" />
  77.     </div>
  78. </body>
  79. </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. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  2. poj 1430 第二类斯特林数

    1 #include <iostream> #include <cmath> #include <algorithm> using namespace std; i ...

  3. Ants (POJ 1852)

    题目描述: Description An army of ants walk on a horizontal pole of length l cm, each with a constant spe ...

  4. MongoDB入门（1）--安装配置

    第一步:下载安装 首先当然是找到官方网站http://www.mongodb.org/ 进入下载页面 可以看到,当前最新版本是2.4.5,我的电脑是64位的win7,所以要下载第一个(说明一下,第二个 ...

  5. 转:按需加载html 图片 css js

    按需加载是前端性能优化中的一项重要措施,按需加载是如何定义的呢?顾名思义,指的是当用户触发了动作时才加载对应的功能.触发的动作,是要看具体的业务场景而言,包括但不限于以下几个情况:鼠标点击.输入文字. ...

  6. cocos2dx进阶学习之CCNode

    继承关系 CCNode  -> CCObject CCNode在cocos2dx中抽象舞台对象,需要渲染的对象都是从CCNode派生,包括CCScene,CCLayer,CCSprite等等 C ...

  7. BZOJ 1828

    program bzoj1828; ; check=; type node=record l,r,s,a:longint; end; ..maxn*] of node; a,b,c:..maxn] o ...

  8. 【Hibernate】Remember that ordinal parameters are 1-based!

    此错误的官方解释:1.当hql中不需要参数,而传递了参数导致,2.set参数时没有从0开始. 但此问题不属这两种. 检查导入的libraries无错误. 最后在网络搜索到:http://qihaihu ...

  9. java实现文件夹（包括其中的子文件夹、子文件）的复制——递归

    这是学校java课的一道实验题,题目如下:编程,根据指定的源和目标位置,完成指定文件或文件夹(包括其中的子文件夹.子文件)的复制. 以下是我的实现,使用了递归: package com.simon.m ...

  10. PyQt中弹出对话框操作

    经常有初学者搞不清楚如何在PyQt中弹出对话框,以及如何处理返回值.这篇文章会举例说明,界面采用手工编写. 我们一般说的对话框指的是模态对话框(Modal Dialogue Box),一旦弹出,就不能 ...