Hi I'm working on generating a pdf from html using browser's print functionality in react. This is the components of html :
const coverPage = `<div class="coverPage"></div>`;
const instructionPage = `<div class="instructions sun-editor-editable"></div>`;
const mainContent= `<div class="main-content"></div>`;
const pageBreak = `<div class="pageBreakBefore" ></div>`;
const backPage = `<div class="backPage"></div> `;
mainContant can span over multiple pages. it also contains two more classes .header and .footer. I have a wrapper html in which I'm finally inserting the entire generated html. this is wrapper html :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<style>
.page-header, .page-header-space,
.page-footer, .page-footer-space {
height: 60px;
background-color:white;
}
.page-header {
position: fixed;
top: 0;
width:100%;
}
.page-footer {
position: fixed;
bottom: 0;
width:100%;
}
#contentss {
position: relative;
z-index: 1000;
}
@media print{
.pageBreakBefore{
page-break-before:always;
}
.header {
position: sticky;
top: 0;
background-color: #ffffff; /* You can adjust the background color as needed */
padding: 10px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff; /* You can adjust the background color as needed */
padding: 10px;
box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);
}
}
</style>
</head>
<body>[[Body Contents]]</body>
</html>
and this is my table format to print the html properly. In tbody im inserting the combined html and in thead and tfoot goes my header and footer for pdf. thead and tfoot occurs on every page when printed. I insert this result html in [[Body Contents]] of above wrapper html
export const ResultHTML = `
<div class="page-header" style="text-align: center"></div>
<div class="page-footer"></div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td id="contentss"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
`;
I replace [[Body Contents]] with the above component html (cover page, instructions, main content etc) when their combined html is generated. .header and .footer styles in wrapper html allows me to print header and footer on every page but I dont want header and footer to be printed on the cover page and back page.
I have tried almost everything but nothing worked. I tried multiple react libraries as well like html2pdf,jspdf,pdfmake but each of them has image rendering issues or either the html breaks. The browser print functionality gives me the perfect result i just dont want the header and footer on the cover page and back page. Any Idea how I can achieve this?