webentwicklung-frage-antwort-db.com.de

So trennen Sie den Hauptinhalt mit fester Kopf- und Fußzeile für mehrere Seiten

Ich habe drei getrennte Abschnitte als header, body und footer, um pdf zu erstellen.

Der Kopfzeilenteil wird immer oben auf jeder Seite angezeigt und wird korrigiert. 

 ______________________
|        header        |
|______________________|

Das Problem liegt beim Hauptinhalt. Wenn der Inhalt groß ist, wird die zweite Seite aufgerufen.

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

Der Fußzeilenteil wird immer am Ende jeder Seite angezeigt und auch korrigiert.

 ______________________
|        footer        |
|______________________|

Wenn also der Inhalt groß ist und zwei Seiten erstellt wurden, sollte ich zwei Seiten erhalten als: 

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

Und 

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

Ich habe es mit table format versucht, es funktioniert für Header und Inhalt, aber nicht für Fußzeilen. Die Fußzeile wird nur am Ende der zweiten Seite angezeigt, nicht auf der ersten Seite. 

Ich verwende laravel dompdf  

Jede Hilfe wäre dankbar.

14
Drone

Ich habe diese hilfreiche Antwort überprüft: https://stackoverflow.com/a/1763683/5830872 noch einmal und mit einigen Änderungen und externem div-Tag. Es funktioniert für mich.

Ich weiß nicht, wie Laravel Dompdf dieses HTML in PDF konvertiert, aber es funktioniert für mich.

Hier ist mein Laravel-Code 

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();
});

Welches erzeugende pdf wie folgt: http://content.screencast.com/users/Niklesh2/folders/Jing/media/13bb7a6f-f280-46db-94df-1af6270b4b02/2016-08-10_1713.png

Es tut mir leid, dass ich Ihnen nicht sagen kann, wie es funktioniert. Kann aber für andere hilfreich sein, die in Laravel Dompdf arbeiten.

prost !!

3
Drone

HTML setzt eine konstante, ununterbrochene Folge von Elementen voraus, während gedruckte Seiten den Inhalt in Abschnitte aufteilen müssen. Das Beste, was ein Interpreter tun kann, ohne dass Sie es sagen, ansonsten besteht die Möglichkeit, Elemente auf Seiten aufzuteilen, sodass die meisten von ihnen auf eine einzige Seite passen.

In diesem sehr ausführlichen Artikel über SmashingMagazine erfahren Sie viel über die Verwendung von CSS zum Gestalten von HTML für den Druck.

Am wichtigsten für Ihre Frage wird es auf @page regions auf einem aufgeräumten Blatt ausarbeiten. Für Sie sind wahrscheinlich die Bereiche top-center und bottom-center relevant (die, anders als Sie denken, das Dokument betrachten kann, sich auf die gesamte Breite des Dokuments erstrecken kann).

Mithilfe dieser Bereiche können Sie Kopf- und Fußzeilen über CSS definieren und sogar gestalten, je nachdem, auf welcher Seite sie sich befindet, wenn Sie ein Buch entwerfen. Diese funktionieren durch das direkte Hinzufügen von Inhalten per CSS, sodass für Ihre Arbeit kein Markup in Ihrem HTML-Code erforderlich ist.

/* 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;
  }
}

Obwohl Sie kein Problem sind, da Sie Laravel verwenden, werden diese Bereiche nicht von einem Browser, den ich überquert habe, gedruckt. Daher ist es für reguläre Druck-Stylesheets nicht allzu praktisch.


Während Sie mit CSS viel tun können, haben Sie möglicherweise Inhalte, die zu komplex sind, um sie auf die oben beschriebene Weise zu erstellen. In diesem Fall können Sie ein Element mit der position:fixed-Eigenschaft verwenden, das je nach Stil oben und unten auf jeder Seite dargestellt wird - beispielsweise wie folgt:

@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

Versuchen Sie den folgenden Code in voller Sicht.

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

Grundsätzlich wird dieser Anwendungstyp als Single Page Application bezeichnet

> Bitte verwenden Sie die Leistung von AngularJs für diese Art von Anforderung.

<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