I am currently working on a project where I have a dynamically generated HTML page that needs to be saved as a PDF. The issue I am facing is related to the page border, which needs to appear at the edge of the page when printed. To achieve this, I have set the @media print to specify the page size as A4 and margins as 0. However, the content ends up being overwritten on the page border, causing layout issues.
One solution I tried was adding padding to the border, which resolved the problem at the top of the first page. But this caused the content to overlap with the border at the bottom and on subsequent pages.
Visual examples of these problems can be seen in the images provided below.
https://i.sstatic.net/KT9SI.png
The top of the first page appears fine after adding padding, but issues persist at the bottom.
https://i.sstatic.net/eW2PW.png
In the second page, the entire content spills over into the margin area.
Here is the corresponding HTML code for reference:
// CSS styling
body {
margin: 0px;
padding: 0px;
}
// Page borders with different configurations
#pageborder {
// Code for page border style 1
}
#pageborder2 {
// Code for page border style 2
}
#pageborder3 {
// Code for page border style 3
}
// Inner content styling
#innerContent {
margin: 50px;
}
@media print {
@page{
margin: 0;
}
#pageborder3 {
padding-top: 90px;
padding-bottom: 90px;
}
}<body>
<div id="pageborder">
</div>
<div id="pageborder2">
</div>
<div id="pageborder3">
</div>
<div id='innerContent'>
<h1>Test</h1>
<p>Lorem Ipsum</p>
</div>
</body>