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. defered,promise回顾

    defered,promise回顾 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_o ...

  2. IOS开发基础知识--碎片26

    1:UICollectionView如果在数据不够一屏时上下滚动 当数据不多,collectionView.contentSize小于collectionView.frame.size的时候,UICo ...

  3. C#学习笔记-图像处理篇(一)绘制公章

    上个月免费帮别人做事,就一直在服务员和程序员中来回切换,所以好多事情都弄得乱糟糟的,家里也是乱七八糟的,所以学习这一块也放了一段时间. 刚刚开始当服务员的时间看到了形形色色的人,觉得很好玩,他们每个人 ...

  4. HYSBZ 2002 分块

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2002 题意:中文题面 思路:考虑分块,每个位置维护一个跳出该块需要的步数cnt[],和跳出 ...

  5. js 判断IOS版本号

    先来观察 iOS 的 User-Agent 串: Phone 4.3.2 系统:Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; e ...

  6. Java中常量小知识

    常量分类:常量分为静态常量,非静态常量(全局常量),局部常量 静态常量:要么定义的时候赋初值,要么在静态代码块中赋值 非静态常量:要么在定义的时候赋初值,要么在代码块中赋值 局部常量:可以在定义时赋初 ...

  7. fiddler使用教程

    转载地址:写得很不错的fildder教程   http://kb.cnblogs.com/page/130367/ Fiddler的基本介绍 Fiddler的官方网站:  www.fiddler2.c ...

  8. Struts学习总结-04 上传文件

    1. upload.jsp <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  9. PS网页设计教程XXVII——设计一个大胆和充满活力的作品集

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  10. editplus格式化xml文档

    使用editplus打开xml文档,发现文件内容没有格式化,非常难看,使用IE9打开这个xml文档是格式化的,但是IE9打开不能编辑. 在网上找了一些资料发现能够通过一个小插件来是editplus格式 ...