• 技术文章 >web前端 >js教程

    怎样操作JS使用window对象内print方法实现分页打印

    php中世界最好的语言php中世界最好的语言2018-05-29 11:14:13原创1189
    这次给大家带来怎样操作JS使用window对象内print方法实现分页打印,操作JS使用window对象内print方法实现分页打印的注意事项有哪些,下面就是实战案例,一起来看一下。

    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 > 
    <p><input type="button" value="打印" onclick="Print()" /></p> 
    <p id="page1"> 
      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always" > 
      <tr><td>第一页打印内容</td></tr> 
      </table> 
    </p> 
    <p id="page2"> 
      <table width="100%" border="0" cellpadding="0" cellspacing="0" id="content" > 
      <tr><td>第二页打印内容</td></tr> 
      </table> 
    </p> 
    </body> 
    </html>

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    mac内nodejs如何更新最新版本

    如何使用JS实现分页打印

    以上就是怎样操作JS使用window对象内print方法实现分页打印的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript window 对象
    上一篇:怎样使用vue-cli导入Element UI组件 下一篇:jQuery实现新闻播报滚动及淡入淡出效果示例
    PHP编程就业班

    相关文章推荐

    • jquery怎么获取第几个li• es6中怎么将数组转为对象• es6怎么判断数组是否含有相同的值• 实例图文详解在JavaScript中实现队列• 了解Node中的事件循环、process.nextTick()

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网