Проблема с преобразованием HTML в PDF в Node.js ⇐ CSS

[Anonymous]

При создании PDF-файлов граница страницы либо касается, либо обрезается по краям страницы. Даже если граница выглядит правильно, содержимое перекрывает границу во время разрывов страниц. Я столкнулся с множеством проблем, связанных с полями, отступами и разрывами страниц.
Я хочу понять:

• Как правильно установить поля или отступы в зависимости от ширины границы
• Как следует реализовать функции разрыва страниц
• Как предотвратить перекрытие контента границей страницы

Я ищу подходящее и простое решение, похожее на Puppeteer, которое хорошо работает в рабочей среде.





Bio-Data - Traditional


@import url('https://fonts.googleapis.com/css2?famil ... splay=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Georgia', serif;
background: linear-gradient(135deg, #f5f1e8 0%, #e8dcc8 100%);
min-height: 100vh;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}

.container {
max-width: 1038px;
width: 100%;
background: #fff;
/* border: 3px solid #c9975b;
border-radius: 15px;*/
padding: 25px;
/* box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);*/
position: relative;
}

.corner-decoration {
position: absolute;
width: 80px;
height: 80px;
}

.corner-top-left {
top: -2px;
left: -2px;
background: linear-gradient(135deg, #c9975b 50%, transparent 50%);
}

.corner-top-right {
top: -2px;
right: -2px;
background: linear-gradient(225deg, #c9975b 50%, transparent 50%);
}

.corner-bottom-left {
bottom: -2px;
left: -2px;
background: linear-gradient(45deg, #c9975b 50%, transparent 50%);
}

.corner-bottom-right {
bottom: -2px;
right: -2px;
background: linear-gradient(315deg, #c9975b 50%, transparent 50%);
}

.header,.header-print {
text-align: center;
background-repeat:no-repeat;
background-size:contain;
background-position: bottom center;
background-image:url(data:image/jpeg;base64);
}
#dynamic-logo {
margin-bottom: 8px;
min-height: 50px;
}

#dynamic-logo img {
height: 65px;
width: auto;
}

.logo-text {
font-size: 3rem;
line-height: 1;
color: #c9975b;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.header-icon {
width: 50px;
height: 50px;
margin: 0 auto 10px;
fill: #c9975b;
}

.header .main-title {
font-size: 2.5em;
color: #c9975b;
font-weight: normal;
letter-spacing: 2px;
margin-bottom:0px;
}
.header-lord-name {
color: #c9975b;
font-size: 16px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 8px;
}
.content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
background-image:url(data:image/jpeg;base64);
background-repeat: repeat-y;
background-size: contain;
padding: 25px 30px;
}

.left-column {
padding-right: 20px;
}
#root .contact-section{bottom: 70px;}
.right-column {
display: flex;
flex-direction: column;
gap: 20px;
}

.section {
margin-bottom: 25px;
}

.section-title {
color: #c9975b;
font-size: 1.3em;
margin-bottom: 12px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
display:inline-block;
border-bottom:2px solid #c9975b;
padding-bottom: 5px;
}

.section-content {
color: #333;
line-height: 1.8;
}

.field-item {
margin-bottom: 8px;
}

.field-label {
font-weight: bold;
color: #222;
}
.head_spacing{display:none;}
#profile-photo-container{text-align:right;justify-content: right;margin-bottom:0px;}
#profile-photo-container img {
width: 100%;
max-width: 350px;
height: auto;
border-radius: 15px;
border: 3px solid #c9975b;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
object-fit: cover;
max-height:550px;
min-height:550px;
}
#gallery-container{text-align:right;display:block;}
#gallery-container img {
width: 100%;
max-width: 350px;
height: auto;
border-radius: 15px;
border: 3px solid #c9975b;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
object-fit: cover;
max-height:550px;
min-height:550px;
margin-top:20px;
}

.photo-container {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.contact-section {
grid-column: 1 / -1;
text-align: center;
position: absolute;
bottom: 35px;
left: 0px;
right: 0px;
}

.contact-section h2 {
color: #c9975b;
font-size: 1.5em;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 2px;
}

.contact-info {
color: #333;
font-size: 1.0em;
line-height: 1.4;
}
#gallery-container .photo-card{border:none!important;padding:0px!important;margin:0px!important;}
#gallery-container .photo-card img{float:right;vertical-align:top!important;}
.photo-label{display:none!important;}
.footer {
position: absolute;
display: block;
width: 100%;
bottom: 60px;
z-index: 999;
}

.footer-bg,.footer-bg_inner1{
min-height:200px;
position:relative;
padding-bottom: 15px;
background-repeat:no-repeat;
background-size:contain;
background-image:url(data:image/jpeg;base64,);
}
.footer-bg_inner{
position: absolute;
bottom: 20px;
left: 0px;
z-index: 88;
right: 0px;
display:block;
}
/*.page-break{display:none;}*/
@media (max-width: 768px) {
.content {
grid-template-columns: 1fr;
}

.left-column {
padding-right: 0;
}

.container {
padding: 20px;
}

.header .main-title {
font-size: 2em;
}
}
.page_bg{display:none;}
/* Print */
@media print {
@page { size: A4; margin:20px 0px; }

body { background: none; margin: 0px; padding:0px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#gallery-container { page-break-before: always; margin-top:0px; }
.gallery-item-wrapper { page-break-inside: avoid; }
.gallery-item-wrapper:nth-child(2n) { page-break-after: always; }

.page-break {
/*display:block;*/
break-after: page;
page-break-after: always;
}
.page-break-auto{break-after: auto;
page-break-after: auto;}
/*.section{break-after: page;
page-break-after: always;
}*/

.footer-bg {
display: block;
position: fixed;
bottom: -100px; /* Fix the footer to the bottom of the printed page */
width: calc(100% - 50px);
text-align: center;
left:25px;right:25px;
background:none;
z-index:20;
}
/*.footer-bg_inner{width:100%;position:absolute;z-index:88;bottom:-580px;}*/
.content{min-height:500px;position:relative;background:none;z-index:10;}
.header {
position:fixed;
top:30px;
left:25px;
width: calc(100% - 50px);
right:0px;
display:block;
background-position:top;
z-index:11;
background:none;
}
.page_margin{margin-top:120px;}
.first_page.page_margin{margin-top:90px!important;}
.container{margin:5px;}
.page_bg{display:block;position:fixed;height:100%;margin-top:0px;bottom:0px;top:0px;left:0px;right:0px;background-image:url(data:image/jpeg;base64);background-size:auto 100%;background-repeat:no-repeat; background-position:center;z-index:5;}

.head_spacing{height:100px;display:block;}
#gallery-container .photo-item{margin-top:150px!important;break-after: always; /* Modern property */
page-break-before: always;}
#dynamic-logo{margin-top:-25px;}

}







Bio - Data




Personal Details

Name:
Gender:
Date Of Birth:
Age:
Marital Status:
Height Unit: Feet
Height:
Complexion:
Time Of Birth:
Place Of Birth:
Gotra/Caste:
Education:
Occupation:
Income:



Family Details

Father's Name:
Mother's Name:
Father's Occupation:
Mother's Occupation:
Brother Name (Elder):
Brother's Occupation (Elder):
Brother Name (Younger):
Brother's Occupation (Younger):
Sister Name (Elder):
Sister's Occupation (Elder):
Sister Name (Younger):
Sister's Occupation (Younger):
Family Type:
Family Values:



Contact Details

Contact Number:
Contact Email:
WhatsApp Number:
Contact Person:
Residential Address:
City:
State:



Contact Details

Phone No.:
Mail:










 

window.addEventListener('message', function (event) {
if (event.data && event.data.type === 'UPDATE_BIODATA') {
const data = event.data.data;

const logoContainer = document.getElementById('dynamic-logo');
if (data.logo) {
const isImage = data.logo.startsWith('http') || data.logo.startsWith('data:') || data.logo.match(/\.(jpeg|jpg|gif|png|webp|svg)$/i);
if (isImage) {
logoContainer.innerHTML = '';
} else {
logoContainer.innerHTML = '' + data.logo + '';
}
} else {
logoContainer.innerHTML = '';
}

const headerTitleEl = document.getElementById('dynamic-header-title');
headerTitleEl.innerText = data.lordName || data.headerTitle || '';

const mainTitleEl = document.getElementById('dynamic-main-title');
mainTitleEl.innerText = data.templateTitle || 'Bio - Data';

const profilePhotoArea = document.getElementById('profile-photo-container');
if (data.profilePhotoHTML) {
profilePhotoArea.innerHTML = data.profilePhotoHTML;
}

const sectionsArea = document.getElementById('sections-container');
if (data.sectionsHTML) {
sectionsArea.innerHTML = data.sectionsHTML;
}

const galleryArea = document.getElementById('gallery-container');
if (data.photosHTML) {
galleryArea.innerHTML = data.photosHTML;
}
}
});





Подробнее здесь: https://stackoverflow.com/questions/798 ... in-node-js