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. sp_executesql

    execute相信大家都用的用熟了,简写为exec,除了用来执行存储过程,一般都用来执行动态Sql  sp_executesql,sql2005中引入的新的系统存储过程,也是用来处理动态sql的, 如 ...

  2. C中的一些经常会用到的函数

    1.sscanf 函数原型: int sscanf(const char *,const char *,...); int sscanf(const char *buffer,const char * ...

  3. C语言-06复杂数据类型-03指针

    指针变量的定义 变量类型 *变量名; #include <stdio.h> int main() { // 指针就一个作用:能够根据一个地址值,访问对应的存储空间 // 指针变量p前面的i ...

  4. JavaScript开发规范

    作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以 及执行效率上的问题.本人在开发工作中就曾与不按规范来开发 ...

  5. jquery 部分效果

    $(selector).hide()            隐藏被选元素 $(selector).show()           显示被选元素 $(selector).toggle()        ...

  6. AngularJS2环境配置

    所使用到的文件目录结构如下所示: 1.      创建配置文件: 1.1.  创建目录: mkdir angular-quickstart cd angular-quickstart 1.2.  载入 ...

  7. Jquery 选择器 特殊字符 转义字符

    1.Jquery   选择器 id包含特殊字符,加双斜线 \\ 例 <input type="text" id="dbo_HouseInfo.HouseResour ...

  8. 【arc073f】Many Moves(动态规划,线段树)

    [arc073f]Many Moves(动态规划,线段树) 题面 atcoder 洛谷 题解 设\(f[i][j]\)表示第一个棋子在\(i\),第二个棋子在\(j\)的最小移动代价. 发现在一次移动 ...

  9. vue+canvas踩坑之旅

    let img=new Image(); if(img.complete) { console.log('dd'); } img.src="http://localhost:8888/sta ...

  10. Vue2.0学习笔记

    环境搭建 vue-cli@3    vue-cli@2.X npm i -g @vue/cli 模板语法 文本 <span>Message: {{ msg }}</span> ...