Window.print()方法用于在浏览器中打印当前窗口的内容,如果想要打印当前窗口中指定部分的内容的话需要其他的一些特殊的处理;

Demo:

  <html>

    <head>

      <title>页面标题</title>

      <style type=”text/css” media=”print”>

        #button{ //隐藏网页中的打印按钮

          display:none;

        }

      </style>

      <script type=”javscript”>

        function qrprint(){

          Window.print(); //打印当前页面

          Window.close(); //关闭当前页面

        }

      </script>

    </head>

    <body>

      <button id=”button” onclick="qrprint();">打印</button>

      <table  id=”tab_1”>

        <tr>

          <td><img src=”” title=””/></td>

          <td><img src=”” title=””/></td>

          <td><img src=”” title=””/></td>

        </tr>

        <tr>

          <td><img src=”” title=””/></td>

          <td><img src=”” title=””/></td>

          <td><img src=”” title=””/></td>

        </tr>

      </table>

      <table  id=”tab_2”>

        <tr>

          <td><img src=”” title=””/></td>

          <td><img src=”” title=””/></td>

          <td><img src=”” title=””/></td>

        </tr>

        <tr>

          <td><img src=”” title=””/></td>

          <td><img src=”” title=””/></td>

          <td><img src=”” title=””/></td>

        </tr>

      </table>

    </body>

  </html>

注意:

  点击打印按钮之后调用qrprint方法打印当前页面,然后呢在CSS 中#button {  display:none;  }的作用是在打印时隐藏button按钮, 否则的话会在打印时将打印按钮同时打印出来(在购物网站上的 打印订单可以查看到这一部分的前台代码);还有一个值得注意的 是浏览器在打印的时候会有页眉和页脚,这个在浏览器中是可以设置的;

IE浏览器:

  IE浏览器在第一次进行打印的时候需要进行设置:

    

  在如图所示的地方进行打印设置,点击打开页面设置,如图:

    

 需要在这一步勾选上”打印背景颜色和图像”,否则的话打印图片时会打印出一个叉号或者是空白,其他浏览器无需进行此项设置

页面尺寸设置:

  在特定情况下我们要打印的东西一般会要求适应指定的纸张大小,例如A4纸的尺寸或者是A3等,这个时候需要对table表格进行设置,规定每一个table表格的像素以保证打印出来的效果不会出现一张图片被两张纸割裂的情况.像素设置参考网页:http://www.doc88.com/p-7854217363912.html

使用window.print实现网页打印的更多相关文章

  1. js实现网页打印分页打印

    web打印思路:html页面本身带有打印功能window.print() 但是在打印时又不能word模板的要求来打印不能满足打印需求.同时我们打印的数据有时候是动态变化的需要按模板来打印我的处理方式是 ...

  2. JS 网页打印解决方案

    这些日子真是太忙了,项目太多了公司总是加班,而且这些项目中好多都用到的打印,所以学习了一段时间js的打印. 其实原来只是用到了简单的功能,现在要深入的了解才发现原来ie的网页打印也是如此的强大. 以下 ...

  3. 用window.print()打印指定div里面的内容(转载的)

    用window.print()打印指定div里面的内容 今天客户让添加个打印证照功能,直接用window.print()打印的是整个页面,而用以下方法就可以只打印证明了 <!--window.p ...

  4. window.print打印指定div

    window.print可以打印网页,但有时候我们只希望打印特定控件或内容,怎么办呢? 首先我们可以把要打印的内容放在div中,然后用下面的代码进行打印. <html> <head& ...

  5. window.print打印指定div实例代码

    window.print可以打印网页,但有时候我们只希望打印特定控件或内容,怎么办呢,请看下面的例子 首先我们可以把要打印的内容放在div中,然后用下面的代码进行打印. 复制代码代码如下: <h ...

  6. 用window.print()打印指定div里面的内容

    用window.print()打印指定div里面的内容 今天客户让添加个打印证照功能,直接用window.print()打印的是整个页面,而用以下方法就可以只打印证明了 <!--window.p ...

  7. window.print()打印页面指定内容(使用iframe保证原页面不失效)

    使用window.print()时会出现两个问题: (1)直接使用window.print() 打印的是整页内容-->无法实现打印指定区域 (2)打印时替换body中的内容,打印完成后再替换回来 ...

  8. window.print() 打印页面部分内容的方法

    用 JavaScript 实现页面数据的打印 : 主要是用到了一个 print() 函数 , 该函数将会打印整个 web 页面 body 内的所有 html 数据 ! 使用方法为 window.pri ...

  9. window.print实现打印特定控件或内容

    window.print打印指定div 首先我们可以把要打印的内容放在div中,然后用下面的代码进行打印. <html> <head> <script language= ...

随机推荐

  1. BZOJ-2561-最小生成树 题解(最小割)

    2561: 最小生成树(题解) Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1628  Solved: 786 传送门:http://www.lyd ...

  2. SweetAlert-js超酷消息警告框插件

    简要教程 SweetAlert是一款神奇的javascript弹出消息警告框插件. 来通过一张gif图片看看SweetAlert的效果: 使用方法 要使用该插件,首先要在html的header中引入以 ...

  3. $Ajax简单理解

    关于web开发的可能我们不能或缺的利器就是$Ajax,我们这里就不具体的将里面的原理(如果大家有时间的话可以好好的看看javascript里面的权威指南)里面讲的比较详细了 这里就在不说了.今天我们就 ...

  4. SQLite一些函数用法

    --格林威治日期时间,比北京时间晚8小时 select datetime('now'); --格林威治日期 select date('now'); --本地时间 select time('now',' ...

  5. md语法之行内代码和代码片续集

    md语法之行内代码和代码片 一行之内嵌入一小段代码, 简称行内代码. 其方法为: 用撇号把代码围起来. 比如: import numpy as ny就可以了. 代码片的方法: 三个连续的撇号+pyth ...

  6. 区分LocalStorage和偏好数据

    偏好数据类似于web.config或者session,cookie之类的值,一般用于保存一些状态值,不推荐大量的数据通过此方式存储 Local Storage不仅可以寸字符串,还可以寸JSON对象

  7. PAT 1020. 月饼 (25)

    月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量.总售价.以及市场的最大需求量,请你计算可以获得的最大收益是多少. 注意:销售时允许取出一部分库存.样 ...

  8. laravel redis

    安装配置redis服务器 $ wget http://download.redis.io/releases/redis-3.0.5.tar.gz $ tar xzf redis-.tar.gz $ c ...

  9. list 内部方法

    代码 #list内部方法 l=['a','9','c','a','3','7'] print(dir(l)) l.append('v') print(l)#append(self, p_object) ...

  10. ios基础篇(一)——UIView控件基本属性与常见用法

    1.frame 控件的位置和尺寸(以父控件的左上角为坐标原点(0,0)) 2.center 控件的中点(以父控件的左上角为坐标原点) 3.bounds 控件的位置和尺寸(以自己的左上角为坐标原点(0, ...