How to export the JavaScript Charts in PDF format by using base64 string?

Description

This article shows how to export the JavaScript Charts in PDF format by using base64 string.

Solution

The chart is an SVG-based component so, you can draw an SVG element in an HTML canvas element. This canvas element is then transformed into an image using the HTML image element. The resulting image is converted to a PNG or JPEG format and converted into a base64 string.

The base64 string is then converted into a bitmap image, then open a PDF document. You can set the page orientation for the opened document. Then add the page containing the chart image to the document. Finally, the document is saved, destroyed, and the canvas element is removed from the DOM.

Code Snippet

The following shows how to export the Chart in PDF format using the base64 string

document.getElementById('togglebtn').onclick = function () {
       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/jpeg");
   	    // PDF code
               imagedata = imagedata.replace("data:image/jpeg;base64,", '');
                   var image = new ejs.pdfexport.PdfBitmap(imagedata);
                   var document = new ejs.pdfexport.PdfDocument();            
                   document.pageSettings.orientation = ejs.pdfexport.PdfPageOrientation.Landscape;
                   //Add a page.
                   var page1 = document.pages.add();
                   page1.graphics.drawImage(image, 0, 0); 
                   //Save the document.
                   document.save("Chart.pdf");
                   document.destroy();
                   canvas.remove();
               };
       };

The following image illustrates the output of the above code.

View Sample in Stackblitz

Conclusion

I hope you enjoyed learning how to export the JavaScript Charts in PDF format by using base64 string.

You can refer to our JavaScript Charts feature tour page to learn about its other features and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Charts example to understand how to create and visualize data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comment section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!