Question

我正在创建一个简历应用程序，我希望将简历的预览（html）显示为多个div，或者如果简历字段或内容溢出div高度，则插入水平行，使其看起来像pdf页面一样（一个在另一个）。目前它正在一个div中显示。简历的字段和高度是动态的。每个div的最大高度为900px 有什么想法吗？

这是代码 -

<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

我们有一个CSS属性“page-break-after”，您可以将其分配给HTML标记。你有没有尝试过？

将这些规则专门应用于打印可能是个好主意，例如：

@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>

将div内容拆分为pdf等页面

2 个答案: