What I have now
An Angular - NestJS app. The client makes a request to the backend, the response is a blob and it's a whole HTML page formatted using Paper CSS (multiple pages). The blob url is used to set the src of an iframe. The iframe is a sort of preview. The user checks that everything is okay and triggers the native print functionality:
print(): void {
this.iframe.nativeElement.contentWindow?.focus();
this.iframe.nativeElement.contentWindow?.print();
}
Saves it as PDF and everything is fine.
New requirement
Generate programmatically this PDF and add a page from another PDF file. This other PDF is a byte array from the database.
What I tried
I used jsPDF, simply
fetch(this.iframe.nativeElement.src)
.then((response) => response.text())
.then(async (html) => {
const doc = new jsPDF();
doc.html(html, {
callback: function (doc) {
doc.save('file.pdf');
},
});
});
But the result is a giant PDF (font size wise), the table borders and the formatting are not maintained. An 8 pages doc becomes a 50 pages one.
I also tried html2cavans but I get some error because I have to create the HTML element, it's not an actual DOM.
I would like to avoid to do it in the backend via headless browser or similar because I am not sure I can install other software on the production server (customer managed server).
Do you a suggestion about how to achieve this?