Export Highcharts to PDF (using javascript and local server - no internet connection)
Solution 1
Yes this is possible but involves a few different libraries to get working. The first Library is jsPDF which allows the creation of PDF in the browser. The second is canvg which allows for the rendering and parsing of SVG's, the bit that is really cool though is it can render an svg on to canvas element. Lastly is Highcharts export module which will allow us to send the svg to the canvg to turn into a data URL which can then be given to jsPDF to turn into your pdf.
Here is an example http://fiddle.jshell.net/leighking2/dct9tfvn/ you can also see in there source files you will need to include in your project.
So to start highcharts provides an example of using canvg with it's export to save a chart as a png. because you want all the iamges in a pdf this has been slightly altered for our purpose to just return the data url
// create canvas function from highcharts example http://jsfiddle.net/highcharts/PDnmQ/
(function (H) {
H.Chart.prototype.createCanvas = function (divId) {
var svg = this.getSVG(),
width = parseInt(svg.match(/width="([0-9]+)"/)[1]),
height = parseInt(svg.match(/height="([0-9]+)"/)[1]),
canvas = document.createElement('canvas');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
if (canvas.getContext && canvas.getContext('2d')) {
canvg(canvas, svg);
return canvas.toDataURL("image/jpeg");
}
else {
alert("Your browser doesn't support this feature, please use a modern browser");
return false;
}
}
}(Highcharts));
Then for the example i have set up export on a button click. This will look for all elements of a certain class (so choose one to add to all of your chart elements) and then call their highcharts.createCanvas function.
$('#export_all').click(function () {
var doc = new jsPDF();
// chart height defined here so each chart can be palced
// in a different position
var chartHeight = 80;
// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.setFontSize(40);
doc.text(35, 25, "My Exported Charts");
//loop through each chart
$('.myChart').each(function (index) {
var imageData = $(this).highcharts().createCanvas();
// add image to doc, if you have lots of charts,
// you will need to check if you have gone bigger
// than a page and do doc.addPage() before adding
// another image.
/**
* addImage(imagedata, type, x, y, width, height)
*/
doc.addImage(imageData, 'JPEG', 45, (index * chartHeight) + 40, 120, chartHeight);
});
//save with name
doc.save('demo.pdf');
});
important to note here that if you have lots of charts you will need to handle placing them on a new page. The documentation for jsPDF looks really outdated (they do have a good demos page though just not a lot to explain all the options possible), there is an addPage() function and then you can just play with widths and heights until you find something that works.
the last part is to just setup the graphs with an extra option to not display the export button on each graph that would normally display.
//charts
$('#chart1').highcharts({
navigation: {
buttonOptions: {
enabled: false
}
},
//this is just normal highcharts setup form here for two graphs see fiddle for full details
The result isn't too bad i'm impressed with the quality of the graphs as I wasn't expecting much from this, with some playing of the pdf positions and sizes could look really good.
Here is a screen shot showing the network requests made before and after the export, when the export is made no requests are made http://i.imgur.com/ppML6Gk.jpg
here is an example of what the pdf looks like http://i.imgur.com/6fQxLZf.png (looks better when view as actual pdf)
quick example to be tried on local https://github.com/leighquince/HighChartLocalExport
Solution 2
You need to setup your own exporting server, locally like in the article
Solution 3
Here is an example using the library pdfmake:
html:
<div id="chart_exchange" style="width: 450px; height: 400px; margin: 0 auto"></div>
<button id="export">export</button>
<canvas id="chart_exchange_canvas" width="450" height="400" style="display: none;"></canvas>
javascript:
function drawInlineSVG(svgElement, canvas_id, callback) {
var can = document.getElementById(canvas_id);
var ctx = can.getContext('2d');
var img = new Image();
img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgElement))));
img.onload = function() {
ctx.drawImage(img, 0, 0);
callback(can.toDataURL("image/png"));
}
}
full working code: https://jsfiddle.net/dimitrisscript/f6sbdsps/
Leon
Updated on April 07, 2020Comments
-
Leon about 4 years
I am using Highcharts in my application (without any internet connection)
I have multiple charts on a html page, and I want to generate a PDF report that contains all the charts from this page.
How can I do this without sending the data to any server on the internet ?
I will be thankful for any help or any example you can provide. Thank you in advance :)
-
Leon over 9 yearsThank you for your help, but in this solution the data are sent to the Highcharts Export Server. And I don't want this to happen as I said in the question :))
-
Quince over 9 yearsNo I have only used the export module to get the SVG data, i was watching the network tab and no data was sent
-
Quince over 9 yearsThe conversion all happens in the browser, that is also why i have turned the export button off on each graph
-
Quince over 9 years@Leon added screen shot of network requests to the question to show no requests were sent to high chart
-
Leon over 9 yearsHallo Quince, thanks again but I need to do it on my local server. Can you run the example on your local server, with no internet connection ?
-
Quince over 9 yearsYep ill try and set that up now, will let you know the result
-
Quince over 9 yearsAll good - i.imgur.com/Yrh8mUb.png - I have also made a quick repo so you download it and try for youself - github.com/leighquince/HighChartLocalExport
-
Leon over 9 yearsThank you Quince ! Good job :)
-
user3115056 almost 8 yearsHi, The solution seems like to have been accepted bt it might be because its been a while but I am getting 404 error on two of the javascripts... Could anyone please comment with the correct js URLs?
-
Quince almost 8 years@user3115056 all of the resources used can be located in, github.com/leighquince/HighChartLocalExport/tree/master/js , i have just seen the library served by google svn have been removed so will update the fiddle if i can find hosted replacements
-
Toniq about 6 years@Quince - how would you preserve layout export with this if you had a document with some html tables, text and charts mixed together?
-
Quince about 6 yearsWith great difficulty, i imagine, from what i could tell the lib does all you to grab html elements but you would still need to well template it with the graph images so that it looked the same as what was in the browser
-
yasir_mughal about 6 yearsIt will exports on charts what about text?
-
Dimitris Siakavelis almost 6 yearsThere is text inside the pdf. "Hello World".
-
cbrawl almost 6 yearsThis is a great solution. I was wondering, however, if this is possible without the use of jQuery.