CSS Exporting HTML to PDF always aligns bottom to new page
CSS: Always align HTML to the bottom of a new page when exporting to PDF
In this article, we’ll explain how to use CSS to always align HTML to the bottom of a new page when exporting to PDF. We’ll detail several methods for achieving this goal and provide examples.
Read more: CSS Tutorial
Method 1: Using CSS Pagination Properties
CSS provides a set of pagination properties that can be used to control the pagination behavior of elements on a page. The most commonly used properties are page-break-after and page-break-before. These properties control the position of elements on a page.
To force a page break by aligning the bottom of an HTML element to a new page when exported to PDF, we can use the page-break-after property. By adding the following CSS code to the element where the page break occurs, we can ensure that the element always appears at the bottom of the new page.
.page-break {
page-break-after: always;
}
Next, we simply add the .page-break class to the element where the page break occurs, and no matter where it appears in the HTML, the element will appear at the bottom of the new page when exported to PDF.
Here’s an example of using this method:
<div>
<p>This is the content for the first page. </p>
</div>
<div class="page-break">
<p>This text will always appear at the bottom of the new page. </p>
</div>
In the example above, the first <div> contains the content of the first page, while the second <div> has the .page-break class, which will align it to the bottom of the new page.
Method 2: Using CSS3 Multi-Column Layout
Another approach is to use the multi-column layout feature of CSS3. Multi-column layouts allow you to split content into multiple columns and control how the columns break into pages.
To achieve the effect of bottom-aligning the text to the new page, we can use a multi-column layout and ensure that the text appears at the bottom of the new page by placing it at the very bottom.
Here is an example using a multi-column layout:
<div class="page">
<div class="column">
<p>Content for the first column. </p>
</div>
<div class="column">
<p>Content for the second column. </p>
</div>
</div>
<div class="footer">
<p>This text will always appear at the bottom of new pages. </p>
</div>
In the example above, we split the content into two columns and use the .footer class to position the footer text at the bottom of new pages.
Here are the relevant CSS styles:
.page {
column-count: 2;
}
.column {
break-inside: avoid;
}
.footer {
break-before: always;
}
By splitting the content into two columns and using break-before: always; on the footer text, we can ensure that the footer text always appears at the bottom of the new page.
Method 3: Using JavaScript
If the above method doesn’t meet your needs, you can also use JavaScript to solve this problem. JavaScript provides PDF generation libraries such as jsPDF and pdfmake, which can generate PDFs in the browser.
The following is a sample code using the pdfmake library:
<!DOCTYPE html>
<html>
<head> <title>HTML export to PDF</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/
<body>
<button onclick="exportToPDF()">Export to PDF</button>
<div id="content">
<h1>This is the title of the content.</h1>
<p>This is the text of the content.</p>
<p>This is the text at the bottom. </p>
</div>
<script>
function exportToPDF() {
const content = document.getElementById('content').innerHTML;
const docDefinition = {
content: [
{ text: 'Export HTML to PDF', style: 'header' },
{ text: content }
],
footer: function(currentPage, pageCount) {
return { text: 'Page number ' + currentPage.toString() + ' / ' + pageCount, alignment: 'center' };
}
};
pdfMake.createPdf(docDefinition).open();
}
</script>
</body>
</html>
In the above example, we use the pdfmake library to export HTML to PDF. By defining content and footers in the docDefinition object, we can generate a PDF with footer text.
Summary
This article introduced three methods for achieving the effect of aligning the bottom of HTML to a new page when exporting to PDF using CSS. The first method uses the CSS paging property page-break-after to force a page break, the second uses CSS3 multi-column layout, and the third method uses a JavaScript library to export HTML to PDF. Depending on your needs, you can choose the method that suits you and customize it to your needs. By using these methods, you can easily control the positioning of elements on the page when exporting to PDF.