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. App 打包并跳过 AppStore 的发布下载

    一.App 打包 (编译 -> 链接 -> 打包) 1) 下载发布版的证书并安装. 2)Target -> Build Setting,改为发布版本的 profile 3) Targ ...

  2. C# jquery webservices 跨域调用的问题解决方案

    前台代码: <script src="js/jquery-1.9.1.min.js" type="text/javascript"></scr ...

  3. JMeter学习-019-JMeter 监听器之【聚合报告】界面字段解析及计算方法概要说明

    聚合报告是 JMeter 使用过程中使用率非常高的监听器之一,可通过右键单击,依次选择[添加 / 监听器 / 聚合报告] 来进行添加.执行 JMeter 脚本后,聚合报告显示如下:

  4. ios - loadView与viewDidload

    从打印结果可以看出,先调用loadView再调用viewDidload 代码: // // ViewController.m // test // // Created by 裴波波 on 16/4/ ...

  5. Ant执行Jmeter工程模版

    <?xml version="1.0" encoding="GB2312"?><project name="ant-jmeter-t ...

  6. pycharm下载 -professional

    Jet Brains 开发的PyCharm 我传到百度云上了.只供开发使用,违者必究.大家一起学开发.有谁有python 进阶 电子书,可以发到我的邮箱里:120946018@qq.com,谢谢 Ma ...

  7. HttpClient_001_初步实现项目01的servlet，与项目02的servlet，之间数据访问

    HttpClient_001_初步实现项目01的servlet,与项目02的servlet,之间数据访问 代码下载地址: http://download.csdn.net/detail/poiuy19 ...

  8. Live writer

    使用起来还是蛮方便的,安装速度很快,配置也不麻烦.

  9. 设置程序集（dll）引用路径，整洁美观

    static class Program { //设置引用程序集路径 static Program() { AppDomain.CurrentDomain.SetData("PRIVATE_ ...

  10. es5.0 head插件安装

    1. 在 elasticsearch.yml 文件增加配置http.cors.enabled: truehttp.cors.allow-origin: "*"2. 下载插件git ...