export to pdf both chart and tabular data

[Nikhil]

Hi ,

Is it possible to export both syncfusion chart and its data in tabular format in pdf.

[Durga Gopalakrishnan]

Hi Nikhil,

 

We can draw a chart as jpeg or png image and PDF grid in the same PDF document by using ej2-pdf-library. Please find the sample for this,

 

Sample Link :https://stackblitz.com/edit/typescript-vdpkz1?file=index.ts

//Base64 string of chart as Image

let imageBase64 : string ; -- > base64String of image

let image: PdfBitmap = new PdfBitmap(imageBase64);

Note:Currently, we do not have PDF parsing support in ej2-pdf-library. So, we cannot load an existing PDF and not able to draw image in it. We can only achieve this while creating PDF with same PDF document instance.

Please let us know if you have any concern on this.

Regards,

Durga G

[Nikhil]

Hi Durga ,

Thanks for reply .

My use case is as follow :

1. User draws chart using syncfusion donut chart.

2. Now user should be able to export syncfusion angular donut chart with its metadata like id , datasource data .

if you can help on this with example , it is really appreciated.

Regards,

Nikhil Jadhav

Attachment: export_report_37b5cccf.zip

[Durga Gopalakrishnan]

Hi Nikil,

Sorry for inconvenience. We have validated your reported scenario with attached screenshot. As of now, we don't have support to export multiple controls. We have an option to export multiple charts or multiple grids on single pdf, but we cannot export different controls.

Chart : https://ej2.syncfusion.com/angular/documentation/chart/chart-print/#multiple-chart-export

Grid : https://ej2.syncfusion.com/angular/documentation/grid/pdf-export/#multiple-exporting

Please revert us if you have any concerns.

Regards,

Durga G

[Nikhil]

Hi , 

Any method where we can convert chart into dataurl in angular .

[Durga Gopalakrishnan]

Hi Nikhil,

Yes, we have an option to get the dataURL of chart image. We have done a workaround to achieve your reported scenario and attached sample for your reference. 

public mode(e: Event): void {

    var svg = document.querySelector("#container_svg");

    var svgData = new XMLSerializer().serializeToString(svg);

    var canvas = document.createElement("canvas");

    document.body.appendChild(canvas);

    var svgSize = svg.getBoundingClientRect();

    canvas.width = svgSize.width;

    canvas.height = svgSize.height;

    var ctx = canvas.getContext("2d");

    var img = document.createElement("img");

    img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));

    img.onload = function() {

      ctx.drawImage(img, 0, 0);

      var imagedata = canvas.toDataURL("image/png");

      console.log(imagedata); // printed base64 in console

      canvas.remove();

    };

  }

Sample : https://stackblitz.com/edit/angular-mn7uo8

Kindly revert us if you have any concerns.

Regards,

Durga G