Проблема разрыва страницы с html2pdf.js ⇐ CSS

[Anonymous]

Я использую html2pdf.js для предварительного просмотра динамического html-кода в формате PDF из текстового редактора в Angular v17.
Вот код, который я использую для предварительного просмотра в формате pdf

Код: Выделить всё

generatePDF() {
this.replacetext = this.replacetext.replaceAll('text-align: right','text-align: right !important')
this.replacetext = this.replacetext.replaceAll('text-align: center','text-align: center !important')
this.replacetext = this.replacetext.replaceAll('text-align: left','text-align: left !important')
const element = document.createElement('div');
//element.innerHTML = this.replacetext;
element.innerHTML = `

.page-break {
page-break-before: always;
}

.avoid-page-break {
page-break-inside: avoid;
}

.scale-down-height {
height: auto;
}

.scale-down-height tr {
line-height: 0.75 !important; /* Adjust the scale as needed */
font-size: 0.4em !important; /* Adjust the scale as needed */
}

#scorecardtablemodal {
border-collapse: collapse !important;
width: 100% !important;
page-break-inside: avoid !important;
border-top: none !important; /* Remove top border */
}

#scorecardtablemodal, #scorecardtablemodal th, #scorecardtablemodal td {
border: 0.5px solid black !important; /* Solid border color for specific table */
}


${this.replacetext}
`;

// Append the element to the body to measure its dimensions
document.body.appendChild(element);

// Apply scaling to large tables
const tables = element.querySelectorAll('table');
tables.forEach(table => {
if (table.offsetHeight > 900) { // Adjust the height threshold as needed
table.classList.add('scale-down-height');
}
});

// Remove the element from the body after measuring
document.body.removeChild(element);

const options = {
margin: 0.2,
filename: 'document.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
};

html2pdf().from(element).set(options).toPdf().get('pdf').then((pdf) => {
const totalPages = pdf.internal.getNumberOfPages();
for (let i = 1; i  {
const pdfUrl = URL.createObjectURL(pdfBlob);
const iframe = document.createElement('iframe');
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.src = pdfUrl;

this.modalService.open(this.srtpreview, { ariaLabelledBy: 'modal-basic-title', size: 'srt' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});

// Delay to ensure the modal is fully rendered
setTimeout(() =>  {
const previewContainer = document.getElementById('pdfoutput');

if (previewContainer) {
previewContainer.innerHTML = '';
previewContainer.appendChild(iframe);
console.log('Iframe appended to preview container');
} else {
console.error('Preview container not found');
}
}, 500);
});
}

Моя цель — обеспечить, чтобы таблицы и другое содержимое, такое как изображения и снимки экрана, не разрезались между страницами с помощью параметра разрыва страницы
pagebreak: { mode: ['avoid-all', 'css', 'legacy']
< /code>
Но проблема, с которой я сталкиваюсь, - это верхняя часть таблицы (например, граница), - это вырезать и переходить на предыдущую страницу. < /p>
Здесь Является ли снимки экрана ниже

и интенсивность линии увеличивается, когда контент подталкивается на дальнейшие страницы (например, содержание таблицы становится сокращением между страницами) < /p>

Я пробовал несколько способов, но не в состоянии решить эту проблему.
Пожалуйста, дайте мне знать, как решить эту проблему.

Подробнее здесь: https://stackoverflow.com/questions/792 ... tml2pdf-js