在html PHP LOOP中模拟a4页面

时间:2019-03-06 17:55:41

标签: php loops

我想创建一个循环,当它到达20号时,只需创建一个新页面,然后再创建一个新页面,直到循环完成。

我有5行4列(每页5x4 = 20个标签)

特殊之处在于我有四个价格,标签的数量取决于总数。我举一个例子。 我有列broi,price1,price2,price3,price4 带有示例数据:

  

兄弟:90

     

price1:4.85

     

price2:7.90

     

price3:9.30

     

price4:11.10

我们除以(broi)90/4 ,然后从1个价格中得出,我们必须有22.5,例如:

  

price1:4,85-22件

     

price2:7.90-24件

     

price3:9.30-22件

     

price4:11.10-22pcs   (总数90 = broi)

下面是一个例子,通过快照, to now

我想成为: want to be

我的php代码是:

<?php
$mysqli = new mysqli('localhost', 'user', 'pass', 'db');
/* check connection */
if ($mysqli->connect_errno) {
   printf("Connect failed: %s\n", $mysqli->connect_error);
   exit();
}
$mysqli->set_charset("utf8");

/* разделяме на 4 и правиме второто число да компенсира остатъка */
function calculate_columns(int $total, int $size, int $prefer = 1): array {
    $columns = [];
    for ($i = 0; $i < $size; $i++) {
        $columns[$i] = floor($total / $size);
    }
    $columns[$prefer] += $total - $columns[$prefer] * $size;
    return $columns;
    /*
     Array ( 
         [0] => 22 
         [1] => 24 
         [2] => 22 
         [3] => 22 
     ) 
     */
}
?><html>
    <head>
        <style>body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  //box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="landscape"] {
  width: 29.7cm;
  height: 21cm;  
}
page[size="A3"] {
  width: 29.7cm;
  height: 42cm;
}
page[size="A3"][layout="landscape"] {
  width: 42cm;
  height: 29.7cm;  
}
page[size="A5"] {
  width: 14.8cm;
  height: 21cm;
}
page[size="A5"][layout="landscape"] {
  width: 21cm;
  height: 14.8cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}

/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  margin-left:10px;
  color: #000 ;
  font-size:19px !important;
  font-weight: bold; font: arial;
}

/* Centered text */
.centered {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left:6px;

}


.A4 {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  padding: 10px 25px;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
  overflow-y: scroll;
  box-sizing: border-box;
  font-size: 12pt;
}

@media print {
  .page-break {
    display: block;
    page-break-before: always;
  }
  size: A4 portrait;
}

@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .A4 {
    box-shadow: none;
    margin: 0;
    width: auto;
    height: auto;
  }
  .noprint {
    display: none;
  }
  .enable-print {
    display: block;
  }
}


</style>
<script>
  //window.print();
</script>
</head>
<body>
<?php
$lstoutput = array();
$sqlquery = $mysqli->query("SELECT * FROM items WHERE id=1");
while($row = $sqlquery->fetch_array()) {
    $lstoutput[] = $row;
}
    $labels = calculate_columns($lstoutput[0]['broi'], 4);
        $page_much = $lstoutput[0]['broi']/20; //$labels[0]
        $page_number = '0';
        for(; $page_number < $page_much ; $page_number++){
            echo '<page size="A4"><table cellpadding="6" style="padding-top: 30px"><tbody>';
            if($lstoutput[0]['price1'] != null) {
                $labels_number = 0;
                for ($labels_number = 0; $labels_number <= $labels[0]; $labels_number++) {
                    if ($labels_number %4 === 0) {
                        echo("</tr>\n<tr style='margin:1px'>");
                    }
                    echo '<td style="margin:1px" class="container"><img src="label.png" alt="label" style="border:1px solid #333;width:184px;height:184px" /><div class="centered">'.$lstoutput[0]['price1'].'</div></td>';
                }
            }
            if($lstoutput[0]['price2'] != null) {
                $labels_number = 0;
                for ($labels_number = 0; $labels_number <= $labels[0]; $labels_number++) {
                    if ($labels_number %4 === 0) {
                        echo("</tr>\n<tr style='margin:1px'>");
                    }
                    echo '<td style="margin:1px" class="container"><img src="label.png" alt="label" style="border:1px solid #333;width:184px;height:184px" /><div class="centered">'.$lstoutput[0]['price2'].'</div></td>';
                }
            }
            echo '</tbody></table></page>';
        }
?>
    </body>
</html>

2 个答案:

答案 0 :(得分:0)

@DinoCoderSaurus我在删除创建页面数的循环后设置了代码,添加了 page-break-after 函数(css),但没有再得到它,设置照片+代码。

   table { page-break-inside:auto }
   tr    { page-break-inside:avoid; page-break-after:auto }

enter image description here

<?php
$mysqli = new mysqli('localhost', 'USER', 'PASS', 'DATABASE');
/* check connection */
if ($mysqli->connect_errno) {
   printf("Connect failed: %s\n", $mysqli->connect_error);
   exit();
}
$mysqli->set_charset("utf8");

/* разделяме на 4 и правиме второто число да компенсира остатъка */
function calculate_columns(int $total, int $size, int $prefer = 1): array {
    $columns = [];
    for ($i = 0; $i < $size; $i++) {
        $columns[$i] = floor($total / $size);
    }
    $columns[$prefer] += $total - $columns[$prefer] * $size;
    return $columns;
    /*
     Array ( 
         [0] => 22 
         [1] => 24 
         [2] => 22 
         [3] => 22 
     ) 
     */
}
?><html>
    <head>
        <style>body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  //box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="landscape"] {
  width: 29.7cm;
  height: 21cm;  
}
page[size="A3"] {
  width: 29.7cm;
  height: 42cm;
}
page[size="A3"][layout="landscape"] {
  width: 42cm;
  height: 29.7cm;  
}
page[size="A5"] {
  width: 14.8cm;
  height: 21cm;
}
page[size="A5"][layout="landscape"] {
  width: 21cm;
  height: 14.8cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}

/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  margin-left:10px;
  color: #000 ;
  font-size:19px !important;
  font-weight: bold; font: arial;
}

/* Centered text */
.centered {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left:6px;

}


.A4 {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  padding: 10px 25px;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
  overflow-y: scroll;
  box-sizing: border-box;
  font-size: 12pt;
}

@media print {
  .page-break {
    display: block;
    page-break-before: always;
  }
  size: A4 portrait;
}

@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .A4 {
    box-shadow: none;
    margin: 0;
    width: auto;
    height: auto;
  }
  .noprint {
    display: none;
  }
  .enable-print {
    display: block;
  }
}

   table { page-break-inside:auto }
   tr    { page-break-inside:avoid; page-break-after:auto }

</style>
<script>
  //window.print();
</script>
</head>
<body>
<?php
$lstoutput = array();
$sqlquery = $mysqli->query("SELECT * FROM items WHERE id=1");
while($row = $sqlquery->fetch_array()) {
    $lstoutput[] = $row;
}
    $labels = calculate_columns($lstoutput[0]['broi'], 4);
            echo '<page size="A4"><table cellpadding="5" style="padding-top: 10px"><tbody>';
            if($lstoutput[0]['price1'] != null) {
                $labels_number = 0;
                for ($labels_number = 0; $labels_number <= $labels[0]; $labels_number++) {
                    if ($labels_number %4 === 0) {
                        echo("</tr>\n<tr style='margin:1px'>");
                    }
                    echo '<td style="margin:1px" class="container"><img src="label.png" alt="label" style="border:1px solid #000;width:90%;height:90%" /><div class="centered">'.$lstoutput[0]['price1'].'</div></td>';
                }
            }
            if($lstoutput[0]['price2'] != null) {
                $labels_number = 0;
                for ($labels_number = 0; $labels_number <= $labels[1]; $labels_number++) {
                    if ($labels_number %4 === 0) {
                        echo("</tr>\n<tr style='margin:1px'>");
                    }
                    echo '<td style="margin:1px" class="container"><img src="label.png" alt="label" style="border:1px solid #000;width:90%;height:90%" /><div class="centered">'.$lstoutput[0]['price2'].'</div></td>';
                }
            }
            echo '</tbody></table></page>';
?>
    </body>
</html>

答案 1 :(得分:0)

如果您使用css display: inline-block而不是使用表将标签设置为div,则浏览器本身将重新排列元素以适合每个页面。

.label {
  display: inline-block;
  width: 200px;
  height: 100px;
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}
<div class="label">label</div>
<div class="label">label</div>
<div class="label">label</div>
<div class="label">label</div>
<div class="label">label</div>
...

在我的预览窗口中看起来像这样: enter image description here