web页面打印 支持分页打印

最新推荐文章于 2019-03-19 12:21:23 发布
最新推荐文章于 2019-03-19 12:21:23 发布
阅读量1.5k 收藏 1
点赞数
文章标签： web div class table button layer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/andnnl/article/details/1836548
版权
在WEB页面上直接打印....

支持分页打印,是用Struts生成的,数据动态加入

内容格式用CSS样式控制,有些内容输入后自动换行

代码如下:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<% @ taglib uri="/WEB-INF/struts-html.tld" prefix="html"  %>
<% @ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"  %>
<% @ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"  %>

< html >
< HEAD >
<% @ page 
language="java"
contentType="text/html; charset=GBK"
pageEncoding="GBK"
 %>
< META  http-equiv ="Content-Type"  content ="text/html; charset=GBK" >
< META  name ="GENERATOR"  content ="IBM WebSphere Studio" >
< META  http-equiv ="Content-Style-Type"  content ="text/css" >
< title > 无标题文档 </ title >

< style  media =print >
.Noprint{display:none;}
.Ptt {
    display:block;
    visibility: visible;
}
.PageNext{page-break-after: always;}
 </ style >
< style >
.div1 {
    padding: 1px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    font-family: "Arial";
}
.pack {
    font-size: 16px;
    font-weight: bold;
    font-family: Arial;
}
.pack2 {
    font-size: 16px;
    font-weight: bold;
    font-family: Arial;
}
#layer1 table{border:solid 1px #fff;border-collapse:collapse;}
#layer1 td{border:solid 1px #000;display:block;}

.item {
    font-size: 16px;
    font-family: Arial;
    font-weight: bold;
}
.item2 {
    font-size: 16px;
    font-weight:bold;
    font-family: Arial;
}
.sty1 {
    font-size: 16px;
    font-family: Arial;
}

.size12 {
    font-family: Arial;
    font-size: 12px;
}
.notfull {
    font-size: 26px;
    font-weight: bold;
}
 </ style >
< script  language ="javascript" >
var i=1;
function show(){
    var divdiv1=document.getElementById("div1");
    /*divdiv1.innerHTML=divdiv1.innerHTML+i;
    alert("HTML:"+divdiv1.innerHTML);
    i++;*/
    alert("HTML:"+divdiv1.innerHTML);
    //alert("asdf");
}

 </ script >
</ head >

< body >
< center  class ='Noprint'  >
   < p >
   < OBJECT   id =WebBrowser   classid =CLSID:8856F961-340A-11D0-A96B-00C04FD705A2   height =0   width =0 >
   </ OBJECT >
   < input   type =button   value =打印       onclick =document.all.WebBrowser.ExecWB(6,1) >
   < input   type =button   value =直接打印   onclick =document.all.WebBrowser.ExecWB(6,6) >
   < input   type =button   value =页面设置   onclick =document.all.WebBrowser.ExecWB(8,1) >
   </ p >
   < p >
     < input  name ="button"   type =button   onclick =document.all.WebBrowser.ExecWB(7,1)   value =打印预览  />
     < br />
   </ p >
</ center >
< div  class ="Noprint" >
     < table  width ="100%" >
     < tr  align ="center" >
             < td  >
                
                 < logic:present  name ="message" >
                     < fieldset >
                     < legend > 提示信息 </ legend >
                   < font  color ="blue"  style ="word-break : break-all;" >
asdf
                                < bean:write  name ="message" />
                        </ font >
                   </ fieldset >
                    
                 </ logic:present >
             </ td >
         </ tr >
     </ table >
</ div >
< center >
< div  class ="Noprint" >
   < label > B袋: </ label >
</ div >
< div   id ="layer1"  style ="width:200px;"  class ="div1" >
< table  width ="100%" >
     < tbody >
         < tr >
             < td  width ="30%"  height ="35"  colspan ="2" >< div  align ="center"  class ="pack" > Pack# </ div ></ td >
             < td  height ="35"  colspan ="4" >< div  align ="center"  class ="pack2" > 0702151022 </ div ></ td >
         </ tr >
         < tr >
             < td  height ="35"  colspan ="2" >< div  align ="center"  class ="item" > Item# </ div ></ td >
             < td  height ="35"  colspan ="4" >< div  align ="center"  class ="item2" > R12345DI(WH) </ div ></ td >
         </ tr >
         < tr  class ="size12" >
             < td  width ="50%"  height ="20"  colspan ="3" >< div  align ="left" > Qty:50 </ div ></ td >
             < td  height ="20"  colspan ="3" >< div  align ="left" style ="word-break : break-all;" > Size:Multi </ div ></ td >
         </ tr >
         < tr  class ="size12" >
             < td  height ="20"  colspan ="6" >< div  align ="left" > Cust Ref: </ div ></ td >
            
         </ tr >
         < tr  class ="size12" >
             < td  height ="12"  colspan ="6" >< div  align ="left" > 操作员: </ div ></ td >
         </ tr >
     </ tbody >
</ table >
</ div >
< div  class ="PageNext" ></ div >

< div  class ="Noprint" >
   < label >< br  />
  C袋(group A): </ label >
</ div >
< div   id ="layer1"  style ="width:200px;"  class ="div1" >
< table  width ="100%" >
     < tbody >
         < tr >
             < td  width ="30%"  height ="25"  colspan ="2" >< div  align ="center"  class ="pack" > Pack# </ div ></ td >
             < td  height ="25"  colspan ="4" >< div  align ="center"  class ="pack2" > 0702151022 </ div ></ td >
         </ tr >
         < tr >
             < td  height ="25"  colspan ="2" >< div  align ="center"  class ="item" > Item# </ div ></ td >
             < td  height ="25"  colspan ="4" >< div  align ="center"  class ="item2" > R12345DI(WH) </ div ></ td >
         </ tr >
         < tr  class ="size12" >
             < td  width ="100%"  height ="12"  colspan ="6" >< div  align ="left" > Qty:50 </ div ></ td >             
         </ tr >
         < tr  class ="size12" >
             < td  height ="12"  colspan ="6" >< div  align ="left"  style ="word-break : break-all;" > Size:Multi aaaaaaaaaaaaaaaaaaaljksdfklasdjklfjklasjdklfjkasj </ div ></ td >
         </ tr >
         < tr  class ="size12" >
             < td  height ="20"  colspan ="6" >< div  align ="left" > Cust Ref: </ div ></ td >
         </ tr >
         < tr  class ="size12" >
           < td  height ="20"  colspan ="6" >< div  align ="left" > Cust Stone Ref: </ div ></ td >
       </ tr >
         < tr  class ="size12" >
           < td  height ="35"  colspan ="6" >< div  id ="div1"  align ="left"  style ="word-spacing: 10px;word-break : keep-all;"  onclick ="show()" >
                asdkjfjlasdljfj  lasdfklalksdfjlkakljsdfjkl sdfsljdf jlsjdlfjlksdljfk
         </ div ></ td >
       </ tr >
           < tr  class ="size12" >
             < td  height ="20"  colspan ="6" >< div  align ="left" > 操作员: </ div ></ td >
         </ tr >
     </ tbody >
</ table >
</ div >
< div  class ="PageNext" ></ div >

< div  class ="Noprint" >
   < label >< br  />
  C袋(group B): </ label >
</ div >
< div   id ="layer1"  style ="width:200px;"  class ="div1" >
< table  width ="100%" >
     < tbody >
         < tr >
             < td  width ="30%"  height ="35"  colspan ="2" >< div  align ="center"  class ="pack" > Pack# </ div ></ td >
             < td  height ="35"  colspan ="4" >< div  align ="center"  class ="pack2" > 0702151022 </ div ></ td >
         </ tr >
         < tr  class ="size12" >
             < td  width ="50%"  height ="20"  colspan ="3" >< div  align ="left" > Qty:50 </ div ></ td >
             < td  height ="20"  colspan ="3" >< div  align ="left" > Size:Multi </ div ></ td >
         </ tr >
         < tr  class ="size12" >
             < td  height ="20"  colspan ="6" >< div  align ="left" > 操作员: </ div ></ td >
         </ tr >
     </ tbody >
</ table >
</ div >

< div  class ="PageNext" ></ div >

< div  class ="Noprint" >
   < label >< br  />
  D袋: </ label >
</ div >
< div   id ="layer1"  style ="width:200px;"  class ="div1" >
< table  width ="100%" >
     < tbody >
         < tr >
           < td   width ="30%"  height ="25"   colspan ="2" >< div  align ="center"  class ="pack" > Pack# </ div ></ td >
             < td   height ="25"  colspan ="4" >< div  align ="center"  class ="pack2" > 0702151022 </ div ></ td >
         </ tr >
         < tr >
             < td  width ="30%"  height ="30"  colspan ="2" >< div  align ="center"  class ="item" > Item# </ div ></ td >
             < td  height ="30"  colspan ="4" >< div  align ="center"  class ="item2" >
              R12345DI(WH)  < br  />
              01277-13778
               </ div ></ td >
         </ tr >
         < tr  class ="size12" >
           < td  height ="12"  colspan ="3" >< div  align ="left" > 包装件数: 100 </ div ></ td >
           < td  height ="12"  colspan ="3" >< div  align ="left" > 连代重:2987.10 </ div ></ td >
         </ tr >
         < tr  class ="size12" >
           < td  height ="15"  colspan ="6" >< div  align ="left"  style ="word-break : break-all;" > 尺寸:6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot;  6 &quot; </ div ></ td >
         </ tr >
         < tr  class ="size12" >
            < td  width ="53%"  height ="12"  colspan ="3" >< div  align ="left" > Lj-PO# : 2987100 </ div ></ td >
           < td  width ="47%"  rowspan ="4"   colspan ="3" >< div  align ="center" >< img  src ="1.jpg"  width ="90"  height ="60"   /></ div ></ td >
       </ tr >
       < tr  class ="size12" >
           < td  width ="53%"  height ="12"  colspan ="3" >< div  align ="left" > Lj-SO# : </ div ></ td >
       </ tr >
         < tr  class ="size12" >
           < td  width ="53%"  height ="12"  colspan ="3" >< div  align ="left" > Li-PO# : </ div ></ td >
       </ tr >
       < tr  class ="size12" >
           < td  width ="53%"  height ="12"  colspan ="3" >< div  align ="left" > Li-SO# : </ div ></ td >
       </ tr >
         < tr  class ="size12" >
           < td  height ="12"  colspan ="6" >< div  align ="left" > Cust PO#: </ div ></ td >
       </ tr >
         < tr  class ="size12" >
           < td  height ="12"  colspan ="6" >< div  align ="left" > JS Qty: </ div ></ td >
       </ tr >
           < tr  class ="size12" >
             < td  height ="12"  colspan ="6" >< div  align ="left" > 操作员: </ div ></ td >
         </ tr >
     </ tbody >
</ table >
</ div >

< div  class ="PageNext" ></ div >
< div  class ="Noprint" >
   < label >< br  />
  T袋: </ label >
</ div >
< div   id ="layer1"  style ="width:200px;"  class ="div1" >
< table  width ="100%" >
     < tbody >
         < tr >
           < td  width ="30%"  height ="25"  colspan ="2" >< div  align ="center"  class ="pack" > Pack# </ div ></ td >
             < td  height ="25"  colspan ="4" >< div  align ="center"  class ="pack2" > 0702151022 </ div ></ td >
         </ tr >
         < tr >
             < td  width ="30%"  height ="30"  colspan ="2" >< div  align ="center"  class ="item" > Item# </ div ></ td >
             < td  height ="30"  colspan ="4" >< div  align ="center"  class ="item2" >
              R12345DI(WH)  < br  />
              01277-13778
               </ div ></ td >
         </ tr >
         < tr  class ="size12" >
           < td  width ="100%"  height ="15"  colspan ="6" >< div  align ="left" > 包装件数: 100 </ div ></ td >
        
         </ tr >
         < tr  class ="size12" >
            < td  width ="53%" colspan ="3" >< div  align ="center"  class ="notfull" > 不齐 </ div ></ td >
               < td  width ="47%"    colspan ="3" >< div  align ="center" >< img  src ="1.jpg"  width ="90"  height ="60"   /></ div ></ td >
           </ tr >
                 < tr  class ="size12" >
             < td  height ="20"  colspan ="6" >< div  align ="left" > 操作员: </ div ></ td >
         </ tr >
     </ tbody >
</ table >
</ div >


    
 < div  class ="PageNext" ></ div >

< div  class ="Noprint" >
   < label >< br  />
  E袋: </ label >
</ div >
< div   id ="layer1"  style ="width:200px;"  class ="div1" >
< table  width ="100%" >
     < tbody >
         < tr >
             < td  width ="30%"  height ="35"  colspan ="2" >< div  align ="center"  class ="pack" > Pack# </ div ></ td >
             < td  height ="35"  colspan ="4" >< div  align ="center"  class ="pack2" > 0702151022 </ div ></ td >
         </ tr >
         < tr >
             < td  height ="35"  colspan ="2" >< div  align ="center"  class ="item" > 序号# </ div ></ td >
             < td  height ="35"  colspan ="4" >< div  align ="center"  class ="item2" > R12345DI(WH) </ div ></ td >
         </ tr >
         < tr  class ="size12" >
             < td  width ="100%"  height ="35"  colspan ="6" >< div  align ="left"  style ="word-break : break-all;" > 商品名称: </ div ></ td >             
         </ tr >
         < tr  class ="size12" >
             < td  height ="25"  colspan ="6" >< div  align ="left"  style ="word-break : break-all;" > 成色: </ div ></ td >
         </ tr >
         < tr  class ="size12" >
             < td  height ="20"  colspan ="6" >< div  align ="left" > 包装件数: </ div ></ td >
         </ tr >
         < tr  class ="size12" >
           < td  height ="20"  colspan ="6" >< div  align ="left" > 工单连袋重: </ div ></ td >
       </ tr >
           < tr  class ="size12" >
             < td  width ="50%"  height ="20"  colspan ="3" >< div  align ="left" > 净金重: </ div ></ td >
             < td  width ="50%"  height ="20"  colspan ="3" >< div  align ="left" > 连石重: </ div ></ td >
         </ tr >
         < tr  class ="size12" >
             < td  height ="20"  colspan ="6" >< div  align ="left" > 操作员: </ div ></ td >
         </ tr >
     </ tbody >
</ table >
</ div >
    
 </ center >

</ body >
< script  language ="javascript" >
var a = new Date();
var s=""+a.getFullYear()+ (a.getMonth() + 1)+a.getDate();
//alert(s);
 </ script >
</ html >
andnnl
关注
JS分页，WEB分页打印
05-03
实现简单的web打印分页功能，适用于WEB工程的打印预览
JS 实现web分页打印功能
11-09
使用JS的Window对象的Print方法实现兼容性强的分页打印功能，可直接运行，代码直接复制即可用。
简单的WEB打印分页设置
shaily读书学习
07-16 1193
在讲述如何分页打印之前，我们有必要先了解一下css中不为人知的一些用法。　　css里media的使用　　我们在网页里引用外部的css文件时，通常是用如下的代码：　　  　　实际上，上面的link对象里，我们是省略了一个叫“media”的属性，这个属性指定样式表规则用于指定的设备类型。它有如下值可用：　　all-- 用于所有设备类型　　aural-- 用于语音和音乐合成器
web 实现分页打印功能
weixin_33750452的博客
03-19 748
通过 css 的 page-break-after 属性结合 print() 实现 web 分页打印功能 最近在工作中碰到了一个需要前端实现分页打印的功能，查了很多资料，最后找到了page-break-after属性可以实现，小白我高兴的敲起了代码。结果并没有想象中那么没有，有一些小坑。首先当设置了 page-break-after: always; 属性的元素之后，还有其它元素，在打印是就会分...
利用Css实现WEB打印分页设置
aren3032的博客
02-06 599
转自：http://ajava.org/hot/print/593.html 核心提示：本文介绍使用css来控制打印分页，并且让每页都有相同的表头，表尾。如果每行都是固定高度，那么用这种方法则是最简单方便的。 在讲述如何分页打印之前，我们有必要先了解一下css中不为人知的一些用法。 css里media的使用 我们在网页里引用外部的css文件时，通常是用如下的代码： ...
web 页面分页打印的实现
09-06
Web 页面分页打印是指在网页中实现分页打印的功能，使得用户可以根据需要选择性打印网页的特定部分。下面是实现 Web 页面分页打印的详细知识点： 一、引入 WebBrowser 控件 要实现 Web 页面分页打印，首先需要引入...
Web分页打印 细线表格+分页打印之终极攻略
12-14
最近给客户做打印的时候，客户提出打印时不要打印该页面的头，只是打印表格里面的内容，因为头部有背景和打印按钮，而且要细线表格的那种，我想细线表格不是很简单吗 如果你还不知道细线表格怎么做，请看下面的代码...
Web Html 分页、表格跨页断裂处理、自定义页眉页脚页码打印控件
10-11
1.Web Html 分页打印 2.内容、图片、表格跨页断裂，封边 3.table并行、并列双边、重边 4.自动计算页码（总数及每一页），样式、位置、形式完全个性化 5.页眉页脚，去除浏览默认，自定义内容、样式、位置 6.保持页脚...
【web】web批量分页打印
你是我的信仰
05-29 546
&lt;%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %&gt; &lt;%@ taglib prefix ="s" uri="/struts-tags"%&gt; &lt;!DOCTYPE htm
WEB页面打印方法，包括如何设置打印分页
ZetaChow
01-05 5962
说明：首先是创建一个打印对象，创建好后就可以使用该对象的各种方法进行打印操作：最常用的就这3个方法了，写在按钮控件的ONCLICK事件里，当按钮CLICK的时候就会除法打印的事件了以上的步骤就可以实现页面的打印了，但是如何设置打印区域和打印分页呢？最重要的地方就是这里了：.Noprint{display:none;}.PageNext{page-break-after: always;}自定义
window.print分页打印
04-19
NULL 博文链接：https://ctrain.iteye.com/blog/1864992
Web打印 aspx
08-23
Web打印 aspx javascript ，本人收集。较好的web打印控件，使用方便
调用web前端打印功能，对页面进行打印
03-15
web页面调用的打印，包含可实现整页打印，区域打印，选择打印三种方法，直接复制可用（缺点：格式不好控制，建议使用插件打印或PDF打印，详见本人其他分享）
web分页打印
weixin_30477797的博客
06-19 98
添加css: page-break-before:always 实现分页 window.print()//实现打印 转载于:https://www.cnblogs.com/chenlw/p/9198578.html
WEB打印-网页打印功能(带分页、可多页打印)
热门推荐
老李 技术 专栏
08-22 5万+
Web打印 .Noprint{display:none;} .PageNext{page-break-after: always;} .tdp { border-bottom: 1 s
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值