如何从带有分页符的表格中正确生成 PDF答案

【问题标题】：How to generate PDF from table with page break properly如何从带有分页符的表格中正确生成 PDF
【发布时间】：2019-04-30 09:12:21
【问题描述】：

我有使用 laravel 运行的 PHP 项目。这个想法非常基本：我只想使用 DOM PDF 从数据库生成 PDF。我已经在视图中包含了 CSS 来设置显示。只显示一页效果很好。但是当我生成超过一页（分页符）时，显示就会混乱。似乎数据相互重叠。我不确定这里发生了什么，但我认为问题在于我的样式 CSS。请帮忙！

PS。我设置了我的 PDF 页面方向：横向和纸张：f4

<style>
.page-break {
    page-break-after: always;
}
body {
  font-family: Arial;

}

.split {
  height: 100%;
  width: 45%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.left {
  left: 0;
  background-color: none;
}

.right {
  right: 0;
  background-color: none;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.centered img {
  width: 150px;
  border-radius: 50%;
}
</style>
<body>
<?php

foreach($query as $query){

    ?>
//to split page left and right  
<div class="split left">
  <div class="centered">

    <h2>{{$query->full_name}}</h2>
    <p>Some text.</p>
  </div>
</div>

<div class="split right">
  <div class="centered">

    <h2>{{$query->full_name}}</h2>
    <p>Some text here too</p>
  </div>
</div>

//page break
<div class="page-break"></div>

<?php }?>


</body>

【问题讨论】：

标签： php html css loops dompdf

【解决方案1】：

尝试将此代码添加到您的刀片文件中

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

</div>

【讨论】：

【解决方案2】：

我也遇到了同样的问题。我找到了解决方案，请检查以下代码。对于DOM PDF，html格式排列如下

<html>
<head>
<style>
@page { margin: 20px 50px 50px; 
        @top-center {
            content: element(header);
        }
        @bottom-left {
            content: element(footer);
        }
 } 
  div.header {
        display: block;
         top:0; left:0; right:0;
        width:100%;
        position:fixed;
    }
    div.footer {
        display: block;
        padding: 5px;
        position: running(footer);
        width:100%;
        clear:both;
    }
    div.content {
        width: 100%;
    }
</style>
</head>
<body>
   <div class='header'>Header</div>
   <div class='footer'>Footer</div> 
   <div class='content'>Content</div>
</body>
</html>

我认为这个解决方案适合你。

【讨论】：