0

I have a page with three tabs on it. When I click on each tab, a component is rendered that contains numerous charts and graphs using high-charts. At the top, there is an 'Export to PDF' button. When I click this button, I want the charts on each tab to be converted into PDFs. I am using the HTML2Canvas library to capture the charts on each tab and the jsPDF library to generate the PDFs. However, the issue is that when I'm on the first tab and click on the 'Export to PDF' button without visiting the second and third tabs, it captures the data from the first tab, but it doesn't capture the data from the second and third tabs. How can I capture the data from the second and third tabs without visiting them? i am using angular 7

i have used numerous ways to do this in html2canvas library and detached views but the issue persists. the problem is how can i export those charts without visiting other 2 tabs because the data will come on demand. e.g When I click on tab 2, only then its data appear. suggest me a workaround

Improve this question
5
  • They will have to be rendered already and the tabs should function on the hide/show principle.
    – D A
    Commented Oct 12, 2023 at 5:50
  • we are pulling data from cosmos db and it is huge so it will cost too much. tab 2 and tab 3 data should only when they are clicked or when user clicks export to pdf button. but issue is let say user does not click tab 2 and tab 3 and it clicks export to pdf button now the call will go to fetch data but we can't show the other tabs opening and closing. do you understand my problem?
    – Ali Naqi
    Commented Oct 12, 2023 at 5:53
  • How can the HTML2Canvas capture the charts than if they are not rendered? HTML2Canvas works with already rendered HTML content. What u want needs another approach and other libraries... to render them on server side somehow when the export button is clicked.
    – D A
    Commented Oct 12, 2023 at 5:57
  • can you please suggest me a workaround or any other library for this
    – Ali Naqi
    Commented Oct 12, 2023 at 6:01
  • A workaround that I see.... is not changing the current UI and export libraries (still u will have to render the charts and use show/hide tabs), but I will do changes on the server side... because is not normal to take a lot of time for the charts to be generated. Maybe the data can be pre-prepared by using a side job task on the server that will extract the data needed from cosmos DB and save it already into a cache or another DB structure that u have.
    – D A
    Commented Oct 12, 2023 at 6:11
Related questions
1088
Angular HTML binding
1212
Angular: conditional class with *ngClass
2
How can I use jsPDF with angular 7.2 to export component html of dynamic data into a PDF file?
Load 5 more related questions Show fewer related questions

0

Reset to default