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 window.print

    window.print默认会打印出当前页在屏幕中显示的部分,可以实现在线打印

  2. 控制页面打印的2种方法（css3的media媒体查询和window.print()）

    在实际开发中,有时可能会有打印的需求.下面我总结了2种打印的方法,希望对各位小伙伴有所帮助. ①:直接用window.print()方法就可以打印整个页面,下面是一个小demo <!DOCTYP ...

  3. window.print控制打印样式

    我们可能会去使用window.print()方法来打印页面,但是当我们遇到需要改变打印时候的字体大小等css样式的时候你可能会懵逼. 所以搜索成了我们的必经之路,我相信在网上搜索出来的最好的答案就是使 ...

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

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

  5. JS 网页打印解决方案

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

  6. javascript实现的网页打印

    打印全部页面: <body onload="javascript:window.print()"> 实现局部打印,可以将不参加打印的元素设置“display=none” ...

  7. 使用window.print()后，未关闭打印页面，原网页不能操作

    使用window.print()后,未关闭打印页面,原网页不能操作,此时可以试着用window.location.reload()重新加载页面解决问题.

  8. window.print()打印网页（一）

    有时候需要将网页内容打印到纸上,最简单的一种方法是用window对象的print方法. window.print()默认打印当前网页的所有部分.(除了背景,默认打印都是白底黑字,如果有特别的设置 要另 ...

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

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

随机推荐

  1. phpcms 导航栏点击栏目颜色定位方法和phpcms list页实现分页

    另:一个栏目下面如果没有子栏目,那么它调用的模板就是列表页模板(及list_为前缀的模板):如果一个栏目下面有子栏目,那么它调用的就是栏目首页模板(category_为前缀的模板). 当你这个栏目添加 ...

  2. 实现loading动画效果

    下面我就来罗列三种实现loading动画效果的方法. 方法一:使用UIImageView自带的方法来实现,这也是我推荐的实现方法. NSMutableArray *array = [[NSMutabl ...

  3. loadrunner generators (controller in windows)

    http://my.oschina.net/u/2391658/blog/735690 http://blog.csdn.net/xu1314/article/details/7455114 http ...

  4. 【MySQL】MySQL压缩包安装遇到问题

    电脑多加了一个内存条,就装了64位的系统,然后重装了一大波软件,然而到了MySQL,我作死,因为之前是用msi装的,据说还有一种压缩文件的装法,于是我就下了个安装包,按照网上的教程开始配置,完了之后遇 ...

  5. Altium Designer 文档信息设置以及模板制作

    原理图文档模板制作方法一.在DXP原理图设计环境下,新建一个自由原理图文档.单击:文件→新建→原理图,或者使用快捷键Ctrl+N打开Files资源面板,在“新建”项目下的选择“Schematic Sh ...

  6. databasefactory.createdatabase Web.config 配置关键点提醒

    <configuration>  <configSections>    <section name="dataConfiguration" type ...

  7. 配置maven仓库

    1.安装完,配置好环境变量 mvn -v 检查是否成功 mvn install 会将项目生成的构件安装到本地maven仓库 2.settings.xml文件配置: 1)修改本地仓库位置 maven_h ...

  8. Beginning Android 4 中 Demo Basic/Switch 的问题.

    作者的版本: layout (main.xml): <?xml version="1.0" encoding="utf-8"?> <Linea ...

  9. [Android Tips] 9. framework notification layout font size

    android 4.4 framework notification layout 相关字体大小 * title: notification_title_text_size: 18dp * conte ...

  10. 使用@Configuration注解来代替Spring的bean配置

    下面是一个典型的Spring配置文件(application-config.xml): <beans> <bean id="orderService" class ...