Export PDF with pagination

Question

We have a requirement where we need to export a pdf from a chart eg: spline. Since the spline can have multiple pages, we need to have these pages exported in pdf as well. The problem is that export option only creates the pdf with current page being displayed on the browser. To get this fixed we narrowed in with an approach to create all the background pages as new chartComponent objects and pass it to the export pdf option. But this doesn't work completely. As we are getting the data in pdf with number of charts equal to number pages in the browser, but the problem is every chart in pdf has the data which is same as first page.

On the implementation we are doing something as below. chartComponent represents the actual component visible on screen. We are creating a clone out of it and setting the axes for every new page and adding it to charts collection. As a last step we passing it to this to this.chartCompnent.exportModule.export('PDF', 'PDFchart',PdfPageOrientation.Portrait,this.charts)

With this implementation we are getting pdf as mentioned in image 2

Can you please help with this?

Image1

Image 2

Durga Gopalakrishnan · Answer

Hi Rahul, 

Greetings from Syncfusion. 

We have analyzed your query with attached snippet. We have the support to export multiple charts in a single PDF. We have prepared sample based on your requirement. In the sample, we have exported different charts in PDF. Please check with the below snippet and sample.  





public onClick(e: Event): void { 
        this.chart1.exportModule.export('PDF', 'chart',PdfPageOrientation.Portrait ,[this.chart1, this.chart2]); 
    } 

Sample : https://stackblitz.com/edit/angular-wwwsrg 

UG : https://ej2.syncfusion.com/angular/documentation/chart/chart-print/#multiple-chart-export 

Note : Please ensure whether you have rendered same charts in your application and created chart instances. 

Kindly revert us if you have any concerns. 

Regards, Durga G

Rahul Thakkar · Answer

Hi Durga,

Thanks for the reply. That is the issue, as we have pagination in charts we need all pages to be printed in pdf. Now since at one point of time only one page is rendered on the screen, how can we get the background pages rendered in pdf.

Its kind of headless rendering that we are expecting. Can you please check and get back?

Durga Gopalakrishnan · Answer

Hi Rahul, 

We don’t have direct support to achieve your requirement. We request you to follow the below workaround to achieve the scenario. In the sample, we have enabled and disabled the chart visibility before and after exporting on button click. 





public onClick(e: Event): void { 
        this.ele2 = document.getElementById("container1"); 
        this.ele2.style.display = "block"; 
        this.chart1.exportModule.export('PDF', 'chart',PdfPageOrientation.Portrait ,[this.chart1, this.chart2]); 
        this.ele2.style.display = "none"; 
    } 
    public first(args){ 
        document.getElementById("container").style.display = "block"; 
       document.getElementById("container1").style.display = "none"; 
        this.chart1.refresh(); 
    } 
    public second(args){ 
        document.getElementById("container").style.display = "none"; 
        document.getElementById("container1").style.display = "block"; 
        this.chart2.refresh(); 
    } 

Sample : https://stackblitz.com/edit/angular-wwwsrg-ppsmuk 

Kindly revert us if you have any concerns.  

Regards, 
Durga G

Rahul Thakkar · Answer

Thanks for the response Durga. I checked the example that you provided. But I do see over there you have taken two charts in html.

But in our case pages can be dynamic, it can range from 1 to 1000. So in that case how do we render pages.

Please let me know if we can have a call tomorrow on this. 4-5PM IST

Jitendra Chaudhari · Answer

Note: Rahul and me are working on same problem. Here we have one chart with say 10 pages as shown in below image :

So what we tried to design is create 10 clones of a chart ( each chart with some data ranges like X1- Y1 for page 1 , X2 - Y2 for page 2 and so on...) and passed the array of these clones to export function. The result is it still print the 10 different chart as data of first page. So how this export function works? cant we send the clones of same chart with different data ranges. ?I will appreciate if we can connect online,

Durga Gopalakrishnan · Answer

Hi Rahul, 

We request you to store the all chart instances in a common array variable in each chart loaded event and pass that variable while exporting to PDF. We have attached modified sample for your reference.  





public chartObj: Chart[] = []; 
  // custom code start 
  public loaded1(args: ILoadedEventArgs): void { 
    this.chartObj.push(this.chart1); 
  } 
  public loaded2(args: ILoadedEventArgs): void { 
    this.chartObj.push(this.chart2); 
  } 
public onClick(e: Event): void { 
    this.chart1.exportModule.export( 
      'PDF', 
      'chart', 
      PdfPageOrientation.Portrait, 
      this.chartObj 
    ); 
  } 

Sample : https://stackblitz.com/edit/angular-wwwsrg-p66jrl 

Please revert us if you have any concerns. 

Regards, 
Durga G

Rahul Thakkar · Answer

Hi Durga,As I can see again in the example by you, there are two charts corresponding to different pages in html. Ours is a different case we have one chart and on changing the page we are modifying axes to render new page.As Jitendra also requested we would really appreciate, if we can get on a quick call to discuss this.

Durga Gopalakrishnan · Answer

Hi Rahul, 

By default, multiple charts will be exported by passing its references. As of per your scenario, changing properties in single chart with paging, will allow us to export only one chart with modified changes. We don’t have support to achieve your requirement.  

Please revert us if you have any concerns. 

Regards, 
Durga G