#angularjs #html #css
#angularjs #HTML #css
Вопрос:
Я создаю приложение для возобновления, и я хочу показать предварительный просмотр (html) резюме на несколько разделов или вставить горизонтальную строку, если поля резюме или содержимое переполняют высоту div, чтобы они выглядели разделенными, как страницы pdf (одна под другой). В настоящее время оно отображается в одном div. Поля и высота резюме являются динамическими. Максимальная высота каждого div будет равна 900 пикселей.
Есть идеи?
Вот код-
<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 amp;amp; 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>
Комментарии:
1. Есть какой-нибудь код для текущего состояния вашего проекта?
2. теперь добавлен код.
Ответ №1:
Вы можете использовать следующую технику, чтобы перенести содержимое на другую страницу при его печати.
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> Комментарии:
1. Как я уже упоминал, я не ищу решение для печати макета. Мне нужно отобразить его таким образом на странице html
Ответ №2:
У нас есть свойство CSS «page-break-after», которое вы можете назначить тегам HTML. Вы когда-нибудь пробовали это?
Возможно, было бы неплохо применить эти правила специально для печати, например:
@media print {
footer { page-break-after: always; }
}
Дополнительная информация: https://css-tricks.com/almanac/properties/p/page-break /
Комментарии:
1. Я пробовал это, но в данном случае это неприменимо.
2. И этот css предназначен только для печати