Struggling to create a report with HTML and CSS that appears the same in PDF form?
Here's how my page appeared:
![enter image description here][1]
Unfortunately, the PDF version looked different from the HTML:
I attempted to apply the following styles:
<style>
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {
width: 12cm;
height: 100%;
}
page[size="A4"][layout="landscape"] {
width: 29.7cm;
/*height: 21cm;*/
}
</style>
Here is a snippet of the HTML:
<page size="A4">
// The rest of the code goes here
</div>
Despite my efforts and extensive research, the final result did not match my expectations: https://i.sstatic.net/NHhCx.png