IT-Swarm.Net

Cách tách nội dung thân với đầu trang và chân trang cố định cho nhiều trang

Tôi có ba phần riêng biệt là header, bodyfooter để tạo pdf.

Phần tiêu đề sẽ luôn luôn ở đầu mỗi trang và nó sẽ được sửa chữa. 

 ______________________
|        header        |
|______________________|

Vấn đề là với nội dung cơ thể, nếu nội dung lớn nó sẽ chuyển đến trang thứ hai.

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

Phần chân trang sẽ luôn luôn ở cuối mỗi trang và nó cũng sẽ sửa.

 ______________________
|        footer        |
|______________________|

Vì vậy, nếu nội dung lớn và nếu hai trang được tạo thì tôi sẽ nhận được hai trang là: 

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

Và 

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

Tôi đã thử với định dạng bảng , Nó hoạt động cho tiêu đề và nội dung, nhưng không hoạt động cho chân trang. Footer chỉ đến ở dưới cùng của trang thứ hai chứ không phải trong trang đầu tiên. 

Tôi đang sử dụng laravel dompdf  

Bất kỳ trợ giúp sẽ đánh giá cao.

14
Drone

Tôi đã kiểm tra câu trả lời hữu ích này: https://stackoverflow.com/a/1763683/5830872 lần nữa và với một số thay đổi và thẻ div bên ngoài Nó hoạt động với tôi.

Tôi không biết làm thế nào laravel dompdf chuyển đổi html này thành pdf nhưng nó hoạt động với tôi.

Đây là mã laravel của tôi 

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

Việc tạo pdf như thế này: http://content.screencast.com/users/Nik Meat2/Folders/Jing/media/13bb7a6f-f280-46db-94df-1af6270b4b02/2016-08-10_1713.png

Tôi xin lỗi tôi không thể cho bạn biết làm thế nào nó hoạt động. Nhưng có thể hữu ích cho những người khác đang làm việc trong laravel dompdf.

chúc mừng !!

3
Drone

HTML giả định một chuỗi các yếu tố không bị gián đoạn liên tục, trong khi các trang in yêu cầu chia nội dung đó thành các phần. Điều tốt nhất mà một thông dịch viên có thể làm mà không cần bạn nói khác là tách biệt các phần tử trên các trang sao cho hầu hết chúng phù hợp trên một trang.

Bài viết rất toàn diện này về SmashingMagazine sẽ cho bạn biết rất nhiều về cách sử dụng CSS để thiết kế HTML để in.

Quan trọng nhất đối với câu hỏi của bạn, nó sẽ giải thích chi tiết về @page khu vực trên một bảng gọn gàng . Có liên quan đến bạn có thể sẽ là các vùng top-centerbottom-center (không giống như bạn nghĩ khi nhìn vào tài liệu te, rất có thể mở rộng ra toàn bộ chiều rộng của tài liệu).

Sử dụng các vùng này, bạn có thể xác định đầu trang và chân trang thông qua CSS và thậm chí tạo kiểu cho chúng tùy thuộc vào mặt của nếp gấp nếu bạn đang thiết kế một cuốn sách. Chúng hoạt động bằng cách thêm nội dung trực tiếp trên mỗi CSS, do đó, nó không yêu cầu bất kỳ đánh dấu nào trong HTML của bạn để hoạt động.

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

Mặc dù không phải là vấn đề đối với bạn vì bạn đang sử dụng laravel, nhưng không có trình duyệt nào tôi đi qua sẽ in các vùng đó, vì vậy nó sẽ không thực tế cho các bảng định kiểu in thông thường.


Mặc dù bạn có thể làm rất nhiều với CSS, nhưng bạn có thể có nội dung quá phức tạp để tạo nó theo cách trên. Trong trường hợp này, bạn có thể sử dụng một yếu tố với thuộc tính position:fixed, sẽ hiển thị ở trên cùng/dưới cùng của mỗi trang, tùy thuộc vào cách bạn tạo kiểu cho nó - ví dụ như thế này:

@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

Hãy thử mã dưới đây trong chế độ xem đầy đủ.

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

Về cơ bản, loại ứng dụng này được gọi là Ứng dụng Trang đơn

> Hãy sử dụng sức mạnh của AngularJs trong loại yêu cầu này, nó có sức mạnh định tuyến.

<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