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. 在C#中获取如PHP函数time()一样的时间戳

    原文:在C#中获取如PHP函数time()一样的时间戳 c#中没有象PHP一样的time()时间戳函数,但有DateTime.Now.Ticks用来计算时间差. 此属性的值为自 0001 年 1 月 ...

  2. T-sql创建表，插入数据

    SET NOCOUNT ON; USE hibernateSqlServer GO IF OBJECT_ID('Orders') IS NOT NULL DROP TABLE Orders; GO I ...

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

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

  4. c# AES加解密并转ASCII码

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Sec ...

  5. 阿里云OneinStack数据库相关

    阿里云OneinStack数据库相关必须进入oneinstack目录下执行相关命令 ===================================源码安装目录: Nginx:/usr/loca ...

  6. property attribute: assign, strong, weak, unsafe_unretain and copy

    assign:用于“纯量类型”(如CGFloat 或 NSInteger等): strong:用于“对象类型”,定义了一种“拥有关系”(owning relationship),为这种属性设置新值时, ...

  7. Dynamics AX 2012 R2 在AIF服务契约中使用DateTime

    Reinhard在AIF中使用DateTime作为服务契约的参数,与DotNet程序进行交互时,总是因为时区的问题,导致DotNet提交的System.DateTime与AIF中接收的DateTime ...

  8. 动态的计算行高 加载数据源 有多少显示多少 tableView 包含 colloctionView 显示复杂的界面写法

    有时候,我们经常碰到这样的需求 先遵守代理 @interface PublishCollectionCell ()<UICollectionViewDataSource, UICollectio ...

  9. YTU 3025: 创建二叉树

    原文链接:https://www.dreamwings.cn/ytu3025/2628.html 3025: 创建二叉树 时间限制: 1 Sec  内存限制: 128 MB 提交: 3  解决: 3 ...

  10. document.compatMode属性和获取鼠标的位置

    document.compatMode属性 document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容 ...