Как правильно генерировать PDF из таблицы с разрывом страницы - PullRequest
0 голосов
/ 30 апреля 2019

У меня PHP-проект, запущенный с laravel.Идея очень проста: я просто хочу создать PDF из базы данных с DOM PDF.Я уже включил CSS внутри представления, чтобы установить отображение.Это было хорошо только с одной показанной страницей.Но когда я генерирую больше чем одну страницу (разрыв страницы), дисплей портится.Похоже, данные перекрывали друг друга.Я не уверен, что здесь происходит, но я думаю, что проблема в моем стиле CSS.Пожалуйста, помогите!

PS.Я установил свою ориентацию страницы PDF: альбомная и бумага: f4

enter image description here

<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>

Ответы [ 2 ]

1 голос
/ 30 апреля 2019

Я тоже столкнулся с той же проблемой.Я нашел решение, пожалуйста, проверьте код ниже.Для 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>

Я думаю, что это решение работает для вас.

1 голос
/ 30 апреля 2019

попробуйте добавить этот код в свой блейд-файл

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

</div>
...