Introducing Offline PDF Exporting

Highcharts have been featuring offline support for some time, but only for PNGs, JPEGs, and SVGs. Today we introduce offline exporting for PDFs.

Client side exporting, i.e., the ability to export charts directly in your browser, has been available in Highcharts as a module for some time now. By just adding three scripts to your code, you’ll be exporting charts locally in a jiffy.

Modern browser provides the underlying functionality to make this happen. Chrome, Firefox, and Opera are browsers lets the users run web applications and scripts offline. These modern browsers support saving HTML5 canvas content directly, which allows us to convert the content of an SVG (Scalable Vector Graphics) to canvas. This gives you the ability to export our SVG charts locally in your browser instead of having to send a request to a server. The benefits are manifold:

• You save the money, time, and headache if running your own export server.

• You don’t have to worry about exposing sensitive data when sending requests to other servers.

• It’s fast.

However, older browsers, like Internet Explorer 9, does not support this. However, not to worry. For older browsers, the exporting module will fall back to the public online export module and will redirect your request to the Highcharts server. (I.e. leave the headache to us). A list of browser support can be found here.

INTRODUCING OFFLINE PDF EXPORT

PDF has not been a supported format in the offline-exporting module until now. Highcharts offline PDF exporting is made with yWorks’ libraries svg2pdf and jsPDF.  This German company specializes in data visualization of diagrams and networks for cross-platform Java, .NET-platforms and web applications. yWorks open sourced their projects svg2pdf and jsPDF for converting svgs to pdfs.

The chart you export will be processed by the svg2pdf module, which makes a copy of your the Highcharts-generated SVG. Svg2pdf prepares the SVG for the jsPDF module that create the actual PDF document.

HOW DO I INSTALL AND USE IT?

1. Include the following scripts in your code:
   <script src=”/https://code.highcharts.com/highcharts.js”></script>
   <script src=”/https://code.highcharts.com/modules/exporting.js”></script>
   <script src=”/https://code.highcharts.com/modules/offline-exporting.js”></script>

2. Configure your chart.

3. You’re done.  Test it by clicking the hamburger menu in the top right corner.

Offline-exporting.js has a dependency on the standard Highcharts exporting module, so don’t forget to include the exporting.js script too. It’s really easy. Check out this live demo.