Currently, I am developing a function that involves an HTML template.
The purpose of this function is to generate a dynamic template and convert it into a PDF.
So far, I have been able to achieve this using the following code:
var output = '';
async.each(input.contentInfo, function(component, next) {
renderTemplate(component, function(err, result){ //compile input and template together
output = output + result; //merge all component's HTML source code together
next();
});
}, function(err) {
conversion({ //phantom-html-to-pdf function from npm module
html: output,
paperSize: {
format: 'A8',
orientation: 'landscape',
margin: 0,
headerHeight: 0,
footerHeight: 0
}
}, function(err, pdf) {
var outputFile = fs.createWriteStream('output.pdf');
pdf.stream.pipe(outputFile);
});
});
Without error handling in this example, let's assume everything functions correctly here.
After running this function, the output variable contains content similar to this:
<div style="page-break-before: always;">
<div style="position:absolute;left:100;top:100;>
Page 1 Content
</div>
</div>
<div style="page-break-before: always;">
<div style="position:absolute;left:100;top:100;>
Page 2 Content
</div>
</div>
When converting this HTML to PDF, I expected it to result in a 2-page document due to the page-break CSS property. However, with the position: absolute CSS included, it does not generate multiple pages as intended. Removing the position: absolute CSS fixes the page creation issue but affects the UI layout negatively.
Is there a solution to meet both requirements in this scenario?
Any assistance on this matter would be greatly appreciated. Thank you for your help and apologies if my explanation was unclear.