JS 使用 window对象的print方法实现分页打印功能

最近做项目用到了web在线打印功能，经研究使用了JS自身支持的Window对象的打印方法，此种方法兼容性比较好，在IE和火狐浏览器下使用都没有问题。

1.但是网上好多案例都不支持分页功能，最后通过CSS的page-break-after:always样式解决分页问题，以下代码纯个人编写，有需要的朋友可以直接复制到网页中使用，转载请注明出处，谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
//打印代码
 function Print()
 {
  var printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head><body >";
  var content = "";
  var str = document.getElementById('page1').innerHTML;  //获取需要打印的页面元素 ，page1元素设置样式page-break-after:always，意思是从下一行开始分割。
  content = content + str;
  str = document.getElementById('page2').innerHTML;  //获取需要打印的页面元素
  content = content + str;
  printStr = printStr+content+"</body></html>";
  var pwin=window.open("Print.htm","print"); //如果是本地测试，需要先新建Print.htm，如果是在域中使用，则不需要
  pwin.document.write(printStr);
  pwin.document.close();     //这句很重要，没有就无法实现
  pwin.print();
 }
</script>
</head>
<body >
<div><input type="button" value="打印" onclick="Print()" /></div>
<div id="page1">
  <table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always" >
  <tr><td>第一页打印内容</td></tr>
  </table>
</div>
<div id="page2">
  <table width="100%" border="0" cellpadding="0" cellspacing="0" id="content" >
  <tr><td>第二页打印内容</td></tr>
  </table>
</div>
</body>
</html>

总结

以上所述是小编给大家介绍的JS 使用 window对象的print方法实现分页打印功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JS 实现分页打印功能

    在调用window.print()时,可以实现打印效果,但内容太多时要进行分页打印. 在样式中有规定几个打印的样式 page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示,这两个属性是用来控制文件的打印方式. 每个打印属性都可以设定4种设定值:auto.always.left和right.其中Auto是默认值,只有在有需要时,才需设定分页符号 (Page breaks). page-break-before若设定成always,则是在遇到特定

  • js控制分页打印、打印分页示例

    复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&qu

  • JS 使用 window对象的print方法实现分页打印功能

    最近做项目用到了web在线打印功能,经研究使用了JS自身支持的Window对象的打印方法,此种方法兼容性比较好,在IE和火狐浏览器下使用都没有问题. 1.但是网上好多案例都不支持分页功能,最后通过CSS的page-break-after:always样式解决分页问题,以下代码纯个人编写,有需要的朋友可以直接复制到网页中使用,转载请注明出处,谢谢! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

  • js获取iframe中的window对象的实现方法

    jQuery获取iframe的window对象 var win = $('#ifr')[0].contentWindow; JS原生方法获取iframe的window对象 document.getElementById("ifr").contentWindow; 可见  $('#ifr')[0].contentWindow 和 document.getElementById("ifr") 是等价的 在看下面一种情况 var ifr1 = document.getEl

  • js window对象属性和方法相关资料整理

    window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval moveBy moveTo resizeBy resizeTo scrollBy scrollTo find back forward home stop print blur focus captureEvent enableExternalCapture disableExternalCapture

  • JS创建自定义对象的六种方法总结

    JS创建自定义对象的六种方法总结

    1.创建一个 Object 实例 var person = new Object(); person.name = "rose"; person.age = 18; person.job = "actor"; person.sayName = function () { console.log(this.name); }; console.log(person); 2.对象字面量 var person = { name: "rose", age:

  • 浅谈window对象的scrollBy()方法

    scrollBy()方法的定义和用法: 此方法可以把内容移动指定尺寸.单位是像素(px). 点击可参阅更多window对象的属性和方法. 语法结构: scrollBy(x,y) 参数列表: 参数 列表 x 必需.内容向右移动的尺寸. y 必需.内容向下移动的尺寸. 浏览器支持: 1.IE浏览器支持此属性. 2.Firefox浏览器支持此属性. 3.Opera浏览器支持此属性. 4.chrome浏览器支持此属性. 代码实例: <!DOCTYPE html> <html> <he

  • JS利用window.print()实现网页打印功能

    JS利用window.print()实现网页打印功能

    目录 前言 一.print()方法 二.打印样式 1.使用打印样式表 2.使用媒介查询 3.内联样式使用media属性 4.在css中使用@import引入打印样式表 三.打印指定区域部分内容 1.方法一 2.方法二 3.方法三 四.强制插入分页 五.设置打印布局(横向.纵向.边距) 六.去除浏览器默认页眉页脚 七.打印方法封装 前言 print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容,我们可以在MDN上查看到相关的简单介绍. 一.print()方法 print() 方法用于打

  • javascript window对象属性整理

    window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval moveBy moveTo resizeBy resizeTo scrollBy scrollTo find back forward home stop print blur focus captureEvent enableExternalCapture disableExternalCapture

  • JS动态给对象添加事件的简单方法

    WEB项目中,我们常常会碰到要动态对相应的对象添加事件,如下,有id="txtPrice"的文本框控件: <div> <input type="text" id="txtPrice" name = "txtPrice" value = "0"/> <div> 现在我们为其动态添加一事件,JS核心代码如下: document.getElementById("txt

  • Js与Jq获取浏览器和对象值的方法

    JS and Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeight ==> 浏览器可见区域高度 document.body.clientWidth ==> BODY对象宽度 document.body.cl

随机推荐