divのコンテンツをpdfのようなページに分割する

Question

私はレジュームアプリケーションを作成しています。複数のdivにレジュームのプレビュー（html）を表示するか、レジュームフィールドまたはコンテンツがdivの高さをオーバーフローさせる場合は水平の行を挿入しますそれはpdfページのように分かれて見えます（別のものの下に1つ）。現在、1つのdivに表示されています。レジュメのフィールドと高さは動的です。各divの最大高さは900pxになります。
アイデアここで

は、私たちはあなたのHTMLタグに割り当てることができるCSSプロパティ「ページブレークの後に」、持っているコード -

<div class="container-fluid" style="line-height: 1.4;"> 
      <div class="editSection"> <span class="editicon" ng-click="editSection(2)"><img src="images/editIcon.jpg" alt="edit" /></span><span style="font-size: 30px; font-weight: bold; text-align: center; display: block;">{{resume.basicDetails.firstName+" "+resume.basicDetails.lastName}}</span></div> 
      <div class="editSection"> <span class="editicon" ng-click="editSection(2)"><img src="images/editIcon.jpg" alt="edit" /></span><span style="display: block; text-align: center; font-size:14px; ">Phone: {{resume.basicDetails.phone | tel}} | Email: {{resume.basicDetails.email}} | 
Address: {{resume.basicDetails.address}}, {{resume.basicDetails.city}}, {{resume.basicDetails.state}} {{resume.basicDetails.country != 'United States' ? resume.basicDetails.country : ''}}</span></div><br> 
      <div ng-if="resume.summary"> 
       <div style="text-align: center;" class="strike"><span style="font-weight: bold; font-size: 16px;">PROFESSIONAL SUMMARY</span></div><br> 
       <div class="editSection"> <span class="editicon" ng-click="editSection(3)"><img src="images/editIcon.jpg" alt="edit" /></span> 
       <div style="text-align:justify;text-justify: inter-word;-moz-text-align-last: justify;text-align-last: justify;">{{resume.summary}}</div></div> 
       <br> 
      </div> 
      <div class="strike" style="text-align: center;"><span style="font-weight: bold;font-size: 16px;">EDUCATION</span></div> 
<br><div class="editSection" ng-repeat="education in resume.educationDetails track by $index"> <span class="editicon" ng-click="editSection(4)"><img src="images/editIcon.jpg" alt="edit" /></span> 
<div class="clearfix"><span style="font-weight: bold;font-size: 16px; float: left;">{{education.institute}}</span><span style="float: right;">{{education.state}}{{education.country != 'United States' ? ', '+education.country : ''}}</span></div> 
    <div style="clear: both;"></div> 
     <div class="clearfix"><span style="display: block;float: left;">{{education.course}}</span><span style="float: right;">{{education.startDate | date:'MMM yyyy'}}—{{education.enrolled ? 'Present' : education.endDate | date:'MMM yyyy'}}</span></div><br> 
    </div><br> 
      <div style="text-align: center;clear:both;" class="strike"><span style="font-weight: bold;font-size: 16px;">EXPERIENCE</span></div><br> 
      <div class="editSection" ng-repeat="experience in resume.experienceDetails track by $index"> <span class="editicon" ng-click="editSection(3)"><img src="images/editIcon.jpg" alt="edit" /></span> 
          <div><span style="font-weight: bold; display: block; font-size: 16px; float: left;">{{experience.name}}</span><span style="float: right; font-style: italic;">{{experience.startDate | date:'MMM yyyy'}}—{{experience.employed ? 'Present' : experience.endDate | date:'MMM yyyy'}}</span></div> 
    <div style="clear: both;"></div> 
     <div><span style="font-weight: bold; font-size: 16px; float: left; font-style: italic;">{{experience.position}}</span><span style="float: right;">{{experience.state}}, {{experience.city}}{{experience.country != 'United States' ? ', '+experience.country : ''}}</span></div> 
    <div style="clear: both;"></div>   <br> 
    <div> 
     <ul> 
      <li ng-repeat="res in experience.responsibilities track by $index">{{res}}</li> 
     </ul> 
    </div></div><br> 
    <div ng-if="resume.skills && resume.skills[0].skill"> 
<div style="text-align: center;" class="strike"><span style="font-weight: bold; font-size: 16px;">ASSETS</span></div><br><div class="editSection"> <span class="editicon" ng-click="editSection(3)"><img src="images/editIcon.jpg" alt="edit" /></span> 
      <ul style="list-style:none;padding-left:0;"> 
    <li ng-repeat="skill in resume.skills track by $index">   <span style="font-size: 16px;font-weight:bold">{{skill.skill}}</span> : {{skill.description}} </li> 
</ul> 
      </div></div> 
</div> 

Answer 1

です。あなたはそれを試みたことがありますか？

多分それはこのように、特に印刷にこれらの規則を適用することをお勧めします：

@media print { 
    footer { page-break-after: always; } 
} 

さらに詳しい情報：https://css-tricks.com/almanac/properties/p/page-break/

Answer 2

印刷するときは、別のページにまたがってコンテンツを吐き出すために、次のテクニックを使用することができますそれ。

window.print();

 
 
    @page { 
 
     size: A4; 
 
     margin: 0; 
 
    } 
 
    @media print { 
 
     html, body { 
 
      width: 210mm; 
 
      height: 297mm;   
 
     } 
 
     .page { 
 
      margin: 0; 
 
      border: initial; 
 
      border-radius: initial; 
 
      width: initial; 
 
      min-height: initial; 
 
      box-shadow: initial; 
 
      background: initial; 
 
      page-break-after: always; 
 
     } 
 
    }

<div class="book"> 
 
    <div class="page"> 
 
     Page 1/2 - Your content here 
 
    </div> 
 
    <div class="page"> 
 
     Page 2/2 - Your content here 
 
    </div> 
 
</div>

そうしないと、プロジェクトの現在の状態についてpage-break-before

<div class="page-break"></div> 

@media all { 
.page-break { display: none; } 
} 

@media print { 
.page-break { display: block; page-break-before: always; } 
} 

window.print();

@media all { 
 
.page-break { display: none; } 
 
} 
 

 
@media print { 
 
.page-break { display: block; page-break-before: always; } 
 
}

<div>Some content BEFORE the page break</div> 
 
<div class="page-break"></div> 
 
<div>Some content AFTER the page break</div> 
 
<div class="page-break"></div> 
 
<div> ... More content after another page break ... </div>