使用window.print实现网页打印

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

时间: 08-27

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

js利用window.print实现局部打印方法

一.局部打印,打印单独的一部分内容 方法:为要打印的内容设置单独的id名,新开窗口并打印. 举例如下: 1.html <div id="pulPrint"> 我是要打印的内容 </div> <div class="btn btn-primary print-btn">打印</div> 2.js $(".print-btn").on("click",function(){ prin

js实现网页打印分页打印

web打印思路:html页面本身带有打印功能window.print() 但是在打印时又不能word模板的要求来打印不能满足打印需求.同时我们打印的数据有时候是动态变化的需要按模板来打印我的处理方式是:1.按照word模板设计一个html页面模板,html页面包含了你所要输出的标签 例如:{名字}{时间} 打印区域,不打印区域,分页标签等 2.编写一个公用的打印类,传入参数使按照模板生成相应的数据,生成一个html页并显示. 3.打印 第一种方法:指定不打印区域比如页面的打印按钮等 使用CSS,

关于页面打印window.print()的样式问题

当我们打印网页的时候.有时候会发现.打印出来的.跟网页上看到的样式的差别有点大.这其中可能有的问题是.样式问题. 当调用打印(window.print())方法时.打印机会在网页的样式中查找 @media print{}的样式,并适应到要打印的网页中. 所以 如果要打印的页面符合看到的页面效果,最好在写套 样式 <style type="text/css"> /* @media print 为打印时适应的样式表*/ @media print { body { font-si

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

使用window.print()时会出现两个问题: (1)直接使用window.print() 打印的是整页内容-->无法实现打印指定区域 (2)打印时替换body中的内容,打印完成后再替换回来-->这样会导致原来页面事件失效 使用iframe即可打印指定内容,也可保证页面不失效,具体方法如下: 1.将打印的内容独立出来为一个print.html文件,并为页面添加打印事件 <!DOCTYPE html> <html> <head> ... </head

Web window.print() 打印

web打印 window.print() 我只给出比较有效的,方便的打印方法,有些WEB打印是调用ActiveX控件的,这样就需要用户去修改自己IE浏览器的Internet选项里的安全里的ActiveX,将它们全部启用,有些麻烦,翻了下网络, 下面的方法是可以直接打印,而不会去修改IE的Internet选项. window.print来打印页面,页面上别的元素也会被打印处理,页头页尾的格式也不好控制.• 常用方法:大部分情况会把查询的结果绑定到DataGrid上来,然后打印DataGrid.这种

网页打印A4纸-----表格在跨页时自动换页打印的实现 (转)

在最近所做的一个项目中,需要通过网页来打印不少的表单,但是又不想每个打印页签各占用一个页面,这样就需要生存很多不同的冗余页面,为了减少冗余,所有的表单通过jquery的页签tab来实现的. 一 :基本打印的实现: 1:tab页签在切换时的change事件中,记住每个页签的index, 2:在点击打印按钮时,根据所记住的index,由页签的id("tab名+index"组成),获取当前tab页签下所有的html; 3: 将获取到的需要打印页签的html赋值给document.body.i

c# 网页打印全流程

说明:我要实现的就是将数据库中Group表的数据查找出来,替换打印模版中的内容,再将模版文件打印出来 1.准备好要打印的模版group_O_train.html 1 <div class="pagetitle title">出国(境)培训人员汇总表</div> 2 <div>项目编号:{项目编号}</div> 3 <table class="pagedtable" style="width:25cm;f

android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具

Android设备打印比较麻烦,一般设备厂商都提供原生app开发的SDK,我们web开发者为难了,不会原生开发啊 给大家提供一个思路,实现web加壳,利用打印浏览器实现 简单来说就是把我们的web页面嵌入浏览器中 web页面的打印功能通过js与浏览器互动 浏览器通过调用硬件SDK实现打印 1.机器安装最新SDK,已安装请忽略 2.下载安装本页下载连接中的打印浏览器并安装 3.对照下方事例代码,修改web页面打印功能 4.打印浏览器中打开web页面,测试打印功能 5.默认主页可以在SD卡根目录修改

web的各种前端打印方法之CSS控制网页打印样式

来源:http://www.jb51.net/web/70358.html CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措.如果你也有这种现象,那么我告诉你吧,在W3school查到CSS的midia的作用. midia 定义和用法: media 属性规定被链接文档将显示在什么设备上. media 属性用于为不同的媒介类型规定不同的样式. 原来用到media来指定css的媒体类型,它的