web-dev-qa-db-fra.com

Comment séparer le contenu du corps avec un en-tête et un pied de page fixes pour plusieurs pages

J'ai trois sections distinctes en tant que header, body et footer pour créer un pdf.

La partie en-tête viendra toujours en haut de chaque page et sera corrigée. 

 ______________________
|        header        |
|______________________|

Le problème est avec le contenu du corps, si le contenu est grand, il ira à la deuxième page.

 ______________________
|                      |
|                      |
|        body          |
|                      |
|                      |
|______________________|

Une partie de pied de page viendra toujours au bas de chaque page et elle corrigera également.

 ______________________
|        footer        |
|______________________|

Donc, si le contenu est volumineux et que deux pages sont créées, je devrais en obtenir deux comme: 

 ______________________
|        header        |
|______________________|
|                      |
|                      |
|        Body Part1    |
|                      |
|                      |
|______________________|
|        footer        |
|______________________|

Et 

 ______________________
|        header        |
|______________________|
|                      |
|                      |
|        Body part2    |
|                      |
|                      |
|______________________|
|        footer        |
|______________________|

J'ai essayé avec format de table , Cela fonctionne pour l'en-tête et le contenu, mais pas pour le pied de page. Le pied de page n'arrive qu'en bas de la deuxième page, pas en première page. 

J'utilise laravel dompdf  

Toute aide serait appréciée.

htmlcsslaraveldompdfpage-break-inside
14
Drone

J'ai vérifié cette réponse utile: https://stackoverflow.com/a/1763683/5830872 encore une fois et avec quelques modifications et une balise div externe Cela fonctionne pour moi.

Je ne sais pas comment laravel dompdf convertit ce html en pdf mais cela fonctionne pour moi.

Voici mon code laravel 

Route::get('/', function () {
    $output = '<style>';
    $output .= '
        .divFooter {position: fixed;bottom: 20;text-align:center;}
                ';
    $output .= '</style>';
    $output .= '<div class="divFooter" style="color:red;"><h1>This is footer</h1></div>';
    $output .= '<table width="100%"><thead><tr><th><div style="color:red;"><h1>This is header</h1></div><th></tr></thead>';
    $output .= '<tbody><tr><td>';
    $output .= 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td></tr>
      .........................
      .........................
      .........................
    ';
    $output .= '</tbody></table>';
    $pdf = App::make('dompdf.wrapper');
    $pdf->loadHTML($output);
    return $pdf->stream();
});

Générer des pdf comme ceci: http://content.screencast.com/users/Niklesh2/folders/Jing/media/13bb7a6f-f280-46db-94df-1af6270b4b02/2016-08-10_1713.png

Je suis désolé de ne pas pouvoir vous dire comment ça marche. Mais peut être utile pour ceux qui travaillent dans laravel dompdf.

à votre santé !!

3
Drone

HTML suppose une séquence constante d'éléments ininterrompus, tandis que les pages imprimées nécessitent de scinder ce contenu en sections. Le mieux qu’un interprète puisse faire sans que vous le disiez autrement est de séparer les éléments sur des pages de sorte que la plupart d’entre eux tiennent sur une seule page.

Cet article très exhaustif sur SmashingMagazine vous en dira beaucoup sur l’utilisation de CSS pour concevoir du HTML pour l’impression.

Plus important encore pour votre question, il développera sur @page régions sur une feuille ordonnée . Les régions top-center et bottom-center (qui, contrairement à ce que vous pourriez penser en regardant le document, peuvent très bien s’étendre à toute la largeur du document) sont probablement pertinentes pour vous.

À l'aide de ces régions, vous pouvez définir l'en-tête et le pied de page via CSS, et même les styler en fonction du côté du pli sur lequel ils se situent si vous concevez un livre. Ceux-ci fonctionnent en ajoutant du contenu directement par CSS, de sorte qu'il ne nécessite aucun balisage dans votre code HTML pour fonctionner.

/* print a centered title on every page */
@top-center {
  content: "Title";
  color: #333;
  text-align: center;
}

/* print the title on the left side for left-hand pages, and vice versa */
@page:left {
  @top-left {
    content: "Title";
    color: #333;
  }
}
@page:right {
  @top-right {
    content: "Title";
    color: #333;
  }
}

Bien que ce ne soit pas un problème pour vous puisque vous utilisez Laravel, aucun navigateur que je connais ne permet d’imprimer ces régions. Ce ne sera donc pas très pratique pour les feuilles de style d’impression ordinaires.

Bien que vous puissiez faire beaucoup de choses avec CSS, vous pouvez avoir un contenu trop complexe pour le créer de la manière ci-dessus. Dans ce cas, vous pouvez utiliser un élément avec la propriété position:fixed, qui apparaîtra en haut/en bas de chaque page, en fonction de la façon dont vous le stylisez - par exemple, comme suit:

@media print {
  header {
    position: fixed;
    top: 0;
  }
  footer {
    position: fixed;
    bottom: 0;
  }
}

HTML:

<body>
  <header>
      above the content on screen, and on the top of every printed page
  </header>
  <main>
      content that is flowing and behaving as you would expect it
  </main>
  <footer>
      below the content on screen, and on the bottom of every printed page
  </footer>
</body>
11
TheThirdMan

Essayez le code ci-dessous en pleine vue.

header{
	height: 80px;
	border:1px solid red;
	position: fixed;
	width: 100%;
	top:0;
	background-color: red;
}
.content{
	border: 2px solid #000;
	margin-top: 80px;
	height: 100%;
	width: 100%;
}
footer{
	height: 80px;
	border:1px solid red;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: red;
}
<body>

<header>
	<h1>Header</h1>
</header>

<div class="content">
	<h1>Content</h1>
	<p>one Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	<p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	<p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>6 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<footer>
	<h1>Footer</h1>
</footer>


</body>

3
Vishal Panara

Fondamentalement, ce type d’application est appelé application à page unique.

> S'il vous plaît utiliser la puissance de AngularJs dans ce type d’exigence, elle a la force du routage. 

<html>

   <head>
      <title>Angular JS Views</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
   </head>

   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp">
         <p><a href = "#addStudent">Add Student</a></p>
         <p><a href = "#viewStudents">View Students</a></p>
         <div ng-view></div>

         <script type = "text/ng-template" id = "addStudent.htm">
            <h2> Add Student </h2>
            {{message}}
         </script>

         <script type = "text/ng-template" id = "viewStudents.htm">
            <h2> View Students </h2>
            {{message}}
         </script>
      </div>

      <script>
         var mainApp = angular.module("mainApp", ['ngRoute']);
         mainApp.config(['$routeProvider', function($routeProvider) {
            $routeProvider.

            when('/addStudent', {
               templateUrl: 'addStudent.htm',
               controller: 'AddStudentController'
            }).

            when('/viewStudents', {
               templateUrl: 'viewStudents.htm',
               controller: 'ViewStudentsController'
            }).

            otherwise({
               redirectTo: '/addStudent'
            });
         }]);

         mainApp.controller('AddStudentController', function($scope) {
            $scope.message = "This page will be used to display add student form";
         });

         mainApp.controller('ViewStudentsController', function($scope) {
            $scope.message = "This page will be used to display all the students";
         });

      </script>

   </body>
</html>
0
Lokesh Kumar