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?
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>Configure your chart.
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.
Comments
Trung Trần | 7 years ago
How can i export PDF offline for multiple charts in a page ?
Linda Svendsen | 7 years ago
Hi Trung!
Your question is answered in our FAQ, you can find the answer here: http://www.highcharts.com/docs/getting-started/frequently-asked-questions#export-multiple
Hope you’ll find what you need there.
nisa | 2 years ago
Hey, i see that it makes call for jspdf and svg2pdf js from highcharts url “code.highcharts.com”. Can i avoid this call and use the same libarires from my applications directory? i tried adding these two by npm i but exporting still uses highcharts.
Mustapha Mekhatria | 2 years ago
Hi Nisa,
Feel free to get in touch with our tech team. Add the link to this article as a reference.
Thanks
Want to leave a comment?
Comments are moderated. They will publish only if they add to the discussion in a constructive way. Please be polite.