Technologies: front-end -> Angular 9, back-end -> JAVA.
Description: I am using angular to create dashboard with moderately complex DOM structured with embedded css styling and also is responsive. Complex means, there are 4 tabbed-panes with 4-8 SVG graphs in each tab in one dashboard. Dashboard also comprises of few images (some are from different domain and some are from same file system). For sake of optimization, I draw graph using API responses only when tabs are clicked to show results. So request parameters while navigating from parent view is stored using Angular route navigation states in order to request other apis to generate graphs.
I have already tried jsPDF, PDFmake, htmlPdfMake, html2pdf libraries but all these libraries has one or the other limitations not fit to my requirement. For e.g. jsPDF (.html(), .fromHtml()) don't consider embedded with CSS and only feeds textual contents (excludes svg) into PDF file. Other ways to create image out of html body using html2canvas and then converts image to pdf which makes text non-selectable. Pdfmake has complex ways but again requires additional limited css styling separately and so on.
Then I use traditional way to window.print() which does gives selectable text, also the text inside graphs are selectable the way I needed, but drawback is my dashboard is responsive and when the graphs are generated, the SVG dimensions remains fixed. So when window triggers print(), the default A4 size paper setting adjust the view to lower device viewport (say, tablet) due to its responsiveness but size of SVG graphs remains the same which looks weird (imagine, graphs aligns to the left leaving extra space on its right-side). This was fixed by creating separate view and remove responsiveness from that view and trigger window.print(). But this solution forcing me to show the view on client-side getting graphs generated and then download to PDF using window.print(). However this solution does not satisfies my client's requirement and asking me to hide newly re-generated view but instead agreed to show view in new window tab and add the ability to download to PDF (like PDF viewer or similar) but disagreement on window.print(). Currently some how I succeeded to show only one view on browser's new tab using BLOB or document.write(). Now from here I need guidance on how to proceed in order to achieve below requirement.
Requirement: To generate HTML content to PDF doc.
1) Open new browser tab and generate graphs combining all 4 tabbed panes (this should include taking request argument from state and make api calls).
2) Once all 4 views are ready with all the graphs generated and images at its expected place, then allow exporting entire view into PDF with Styling exactly what we see on browser
3) PDF must have proper margin and include title, link and logo at the bottom.
4) Client-side approach only.
5) Must have each text selectable inside the PDF document.
Questions: 1) What are the other approaches that can fulfill above requirements. If it includes server-side, then how? 2) Whether the current approach(on client-side) is doable considering above requirements, if not then why?