2015-05-21 44 views
0

我想打印在每个A4纸3桌。 我的HTML代码是这样的:如何打印3表中的各A4纸(在HTML内容)

  <!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=iso-8859-1" /> 
     <title>Untitled Document</title> 
     <style type="text/css"> 
     <!-- 
     body,td,th { 
      font-family: tahoma; 
      color: #333333; 
      -webkit-print-color-adjust: exact; 
     } 
     body { 
      font-size:4.5mm; 
      margin-left: 2mm; 
      margin-top: 2mm; 
      margin-right: 2mm; 
      margin-bottom: 2mm;  
     } 
     @page { 
     width:210mm; 
     height:297mm; 

      padding:0px; 
      margin:0px; 
      -webkit-print-color-adjust: exact; 




     } 
     #container{ 
     border:1mm #000000 solid; float:left; height:80mm; 
     width:195mm; margin-bottom:2mm; 
     } 
     --> 
     </style> 
     </head> 

     <body> 
     <div id="container">Some Text 
      <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%"> 
      <div align="left" style="float:left; width:100%" id="namekhoda"> 
       <div align="center" style="width:33%; float: left">Text</div> 
       <div style="width:33%; float:left" align="center"></div> 
      </div> 
      </div> 
      <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br /> 
      </div> 
     </div> 
     <div id="container">Some Text 
      <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%"> 
      <div align="left" style="float:left; width:100%" id="namekhoda"> 
       <div align="center" style="width:33%; float: left">Text</div> 
       <div style="width:33%; float:left" align="center"></div> 
      </div> 
      </div> 
      <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br /> 
      </div> 
     </div> 
     <div id="container">Some Text 
      <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%"> 
      <div align="left" style="float:left; width:100%" id="namekhoda"> 
       <div align="center" style="width:33%; float: left">Text</div> 
       <div style="width:33%; float:left" align="center"></div> 
      </div> 
      </div> 
      <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br /> 
      </div> 
     </div> 
     <div id="container">Some Text 
      <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%"> 
      <div align="left" style="float:left; width:100%" id="namekhoda"> 
       <div align="center" style="width:33%; float: left">Text</div> 
       <div style="width:33%; float:left" align="center"></div> 
      </div> 
      </div> 
      <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br /> 
      </div> 
     </div> 
     <div id="container">Some Text 
      <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%"> 
      <div align="left" style="float:left; width:100%" id="namekhoda"> 
       <div align="center" style="width:33%; float: left">Text</div> 
       <div style="width:33%; float:left" align="center"></div> 
      </div> 
      </div> 
      <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br /> 
      </div> 
     </div> 
     <div id="container">Some Text 
      <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%"> 
      <div align="left" style="float:left; width:100%" id="namekhoda"> 
       <div align="center" style="width:33%; float: left">Text</div> 
       <div style="width:33%; float:left" align="center"></div> 
      </div> 
      </div> 
      <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br /> 
      </div> 
     </div> 
     <div id="container">Some Text 
      <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%"> 
      <div align="left" style="float:left; width:100%" id="namekhoda"> 
       <div align="center" style="width:33%; float: left">Text</div> 
       <div style="width:33%; float:left" align="center"></div> 
      </div> 
      </div> 
      <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br /> 
      </div> 
     </div> 
     <div id="container">Some Text 
      <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%"> 
      <div align="left" style="float:left; width:100%" id="namekhoda"> 
       <div align="center" style="width:33%; float: left">Text</div> 
       <div style="width:33%; float:left" align="center"></div> 
      </div> 
      </div> 
      <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br /> 
      </div> 
     </div> 
     <div id="container">Some Text 
      <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%"> 
      <div align="left" style="float:left; width:100%" id="namekhoda"> 
       <div align="center" style="width:33%; float: left">Text</div> 
       <div style="width:33%; float:left" align="center"></div> 
      </div> 
      </div> 
      <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br /> 
      </div> 
     </div> 
     </body> 
     </html> 

在打印预览一些网页是正确的(在A4第3个表)和一些网页是错误的(多/至少比A4第3个表) 我想正是打印每个A4页面有3个表格。

对不起我的英语水平。

请指引我的代码。

+0

似乎与此相关:http://stackoverflow.com/questions/1763639/how-to-deal- with-page-breaks-when-printing-a-large-html-table – Nishant

回答

0

你怎么想打印出来 - @page属性可能不是所有的浏览器都支持。您可以使用HTML到PDF转换器,如Weasyprint,您可以在其中提供HTML并生成可打印的PDF。您需要在每个表格之后执行此操作(假设表格本身小于A4纸张):

<div style="page-break-after:always"></div> 
+1

如何知道表本身是否小于A4纸? –

+0

image用户使用支持@page的浏览器 –

+0

如果它支持@page,那么你需要检查那些属性是否正确。另外,如果表格在浏览器中比一页多,那么它不只是一页。 – Nishant