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. GIT简易使用流程

    git是目前世界上最先进的分布式版本控制系统(摘自廖雪峰官网) 首先需要在系统上安装git: Windows系统在这下载: RHEL/Centos/Fedora用户可以用以下命令安装:yum -y i ...

  2. 7,C++ public, protected, private 继承的区别

    在某处看到一张图,简单明了的说明了三者的关系,很是佩服,遂记录下来. //公有继承 对象访问 成员访问 public --> public Y Y protected --> protec ...

  3. utf8格式源代码中的字符串,默认都会当作char来处理,除非用L""符号来修饰

    原先QString("mystrr"),现在都不认了,必须都要加上L才行 原先:m_conn->put_HttpProxyAuthMethod("Basic&quo ...

  4. Collection用法

    Queue接口与List.Set同一级别,都是继承了Collection接口.LinkedList实现了Queue接 口.在队列这种数据结构中,最先插入的元素将是最先被删除的元素:反之最后插入的元素将 ...

  5. Maven Jrebel 多模块热部署方案

    近期在构建maven多模块项目时,发现web module依赖的其它模块,每次都要clean install成一个jar包,然后运行web module才能加载. 本生jrebel是配置在了web m ...

  6. elk 搭建

    elk 平台搭建: ELK平台搭建 系统环境 System: Centos release 6.7 (Final) ElasticSearch: 2.1.0 Logstash: 2.1.1 Kiban ...

  7. OpenStack里对VPN的支持

    今天翻自己的笔记找到了点去年研究Cloudpipe的东西: 对于用VLAN隔开的项目内主机的访问,可以使用CloudPipe来进行VPN访问 其实就是把OpenStack和OpenVPN集成了一下,给 ...

  8. 在Update Panel 控件里面添加 File Upload 控件 上传文件

    Detail Information:http://www.codeproject.com/Articles/482800/FileplusUploadplusinplusUpdateplusPane ...

  9. Hadoop Error:Name node is in safe mode的解决方法

    Error:name node is in  safe mode 解决方法:hadoop dfsadmin -safemode leave(见图)

  10. ZOJ 3872 Beauty of Array DP 15年浙江省赛D题

    也是一道比赛时候没有写出来的题目,队友想到了解法不过最后匆匆忙忙没有 A 掉 What a pity... 题意:定义Beauty数是一个序列里所有不相同的数的和,求一个序列所有字序列的Beauty和 ...