web-dev-qa-db-ja.com

複数ページのヘッダーとフッターを固定して本文のコンテンツを分離する方法

PDFを作成するために、header、body、およびfooterの3つのセクションがあります。

ヘッダー部分は常に各ページの上部に表示され、修正されます。

 ______________________
|        header        |
|______________________|

問題は本文のコンテンツにあります。コンテンツが大きい場合は2ページ目に移動します。

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

フッター部分は常に各ページの下部に表示され、修正されます。

 ______________________
|        footer        |
|______________________|

したがって、コンテンツが大きく、2つのページが作成された場合、次のように2つのページを取得する必要があります。

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

そして

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

テーブル形式 で試してみました。ヘッダーとコンテンツでは機能しますが、フッターでは機能しません。フッターは、最初のページではなく、2番目のページの下部にのみ表示されます。

私はlaravel dompdfを使用しています

どんな助けでもいただければ幸いです。

htmlcsslaraveldompdfpage-break-inside
14
Drone

私はこの有用な答えをチェックしました： https://stackoverflow.com/a/1763683/5830872 もう一度、いくつかの変更と外部divタグを付けてそれは私のために働いています。

laravel dompdfがこのhtmlをpdfに変換する方法がわかりませんが、私にとってはうまくいきます。

これが私の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();
});

このようなPDFを生成するもの： http://content.screencast.com/users/Niklesh2/folders/Jing/media/13bb7a6f-f280-46db-94df-1af6270b4b02/2016-08-10_1713.png

申し訳ありませんが、その仕組みをお伝えすることはできません。しかし、laravel dompdfで働いている他の人には役立つかもしれません。

乾杯!!

3
Drone

HTMLは要素の連続が途切れないことを前提としていますが、印刷されたページではそのコンテンツをセクションに分割する必要があります。通訳者が他のことを言わずにできる最善のことは、要素をページに分けて、それらのほとんどが1つのページに収まるようにすることです。

SmashingMagazineに関するこの非常に網羅的な記事 CSSを使用して印刷用のHTMLを設計する方法について多くのことを説明します。

あなたの質問にとって最も重要なことは、 @ page 地域 整頓されたシート上 について詳しく説明することです。 top-centerおよびbottom-center領域（ドキュメントを見ると思うかもしれませんが、ドキュメントの幅全体に広がる可能性があります）が関連している可能性があります。

これらの領域を使用すると、CSSを介してヘッダーとフッターを定義できます。また、本をデザインしている場合は、折り目の側に応じてスタイルを設定することもできます。これらはCSSごとにコンテンツを直接追加することで機能するため、HTMLでマークアップを使用する必要はありません。

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

Laravelを使用しているので問題はありませんが、私が出会ったブラウザではこれらの領域を印刷できないため、通常の印刷スタイルシートではそれほど実用的ではありません。

CSSで多くのことができますが、上記の方法で作成するには複雑すぎるコンテンツがある場合があります。この場合、position:fixedプロパティを持つ要素を使用できます。この要素は、スタイルに応じて、すべてのページの上部/下部に表示されます。たとえば、次のようになります。

@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

以下のコードを完全に試してください。

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

基本的に、このタイプのアプリケーションはシングルページアプリケーションと呼ばれます

>このタイプの要件ではAngularJのパワーを使用してください。ルーティングの強度があります。

<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