如何在每张A4纸上打印3张表(在html内容中)

时间:2015-05-21 09:40:07

标签: html printing

我想在每张A4纸上打印3张桌子。 我的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个表格。

对不起我的英语。

请用代码指导我。

1 个答案:

答案 0 :(得分:0)

您是如何尝试打印的?所有浏览器可能都不支持@page属性。您可以使用像Weasyprint这样的HTML到PDF转换器,您可以在其中提供HTML并生成可以打印的PDF。您需要在每个表格之后执行此操作(假设表格本身小于A4表格):

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