Highcharts exporting multiple charts to pdf with tcpdf

Question

On my website, i have some html tables and some charts from highcharts. And i need to export all using tcpdf.

So i've searched for it and the only things i've founded were about svg. But i don't know how to use it with tcpdf. I thought about exporting each chart as png image and then add these images to the pdf, but i failed. Because each time i export the image it asks me how to save it, but i need to save it automatically.

What are your solutions please ?

Sorry for my english.

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

There are a lot of TCPD examples - there you can see that it is possible to export images to pdf. Or do you want something special?

Note: you can find a way how to export images from highcharts: like here

edited May 23 '17 at 12:21

Community

1
1

answered Mar 28 '13 at 12:00

Andron

6,413
4
43
56

I know how to export images to pdf. The problem is how to export charts to images, without it asks me to save it somewhere – anais1477 Mar 28 '13 at 12:01
Updated my answer. Please check that link. – Andron Mar 28 '13 at 12:02
So i've watched what you linked but i've already seen all of the links they give. But i didn't understood anything. On Highcharts website they are talking about phantomjs, but i didn't understood how to use it. Could you please explain me clearly ? – anais1477 Mar 28 '13 at 14:21
So [here](http://stackoverflow.com/questions/8802528/how-to-save-an-image-of-the-chart-on-the-server-with-highcharts) you can see that there are several methods to export highchart image. As I understand the first one is to use PhantomJs - you need [install](http://phantomjs.org/download.html) it, and create a script as described on that page. In this case PhantomJs allows render page without browser and save generated result. – Andron Apr 01 '13 at 08:23

David Bell · Answer 2 · 2014-05-28T09:48:57.470

I had a fairly simple page reporting some figures with a couple of graphs on the screen. I figured as TCPDF supports SVG and the graphs are generated in SVG, that would be the best format to capture them in, surprisingly I couldn't find much about doing so, so here's a generic version of my script for phantomjs:

var dest_folder = 'C:\\myfolder\\subfolder\\';
console.log('Destination Folder: ' + dest_folder);

var page = require('webpage').create();
page.open('http://www.example.com/graphs_page/', function(status) {
if (status !== 'success') {
    console.log('Unable to load the address!');
    phantom.exit();
} else {
    console.log('Loaded Page');

    // Get the first graph
    graph_1_svg = page.evaluate(function() {
            return document.getElementById('results_graph_1').children[0].innerHTML;
    });
    console.log('graph_1_svg: ' + graph_1_svg.length + ' chars long');
    // Write to destination folder or report error to console
    var fs = require('fs');
    try {
        fs.write(dest_folder + 'graph_1.svg', graph_1_svg, 'w');
    } catch(e) {
        console.log(e);
    }

    // Get the second graph
    graph_2_svg = page.evaluate(function() {
            return document.getElementById('results_graph_2').children[0].innerHTML;
    });
    console.log('graph_2_svg: ' + graph_2_svg.length + ' chars long');
    // Write to destination folder or report error to console
    var fs = require('fs');
    try {
        fs.write(dest_folder + 'graph_2.svg', graph_2_svg, 'w');
    } catch(e) {
        console.log(e);
    }

    phantom.exit();
}
});

The page features two target divs for highcharts, results_graph_1 and results_graph_2 and highcharts creates a child div within, then the svg within that, so by reaching in to the contents of each target's first child div we can copy out the svg and write it out to a file on the server.

After that pick up the SVG files to put in your PDF. I'm not sure what your situation is but I intend users to view the report on-screen before clicking to download the PDF, so I'll have that first stage save the graphs and the SVG files will be ready before the PDF is generated.

As far as running phantomjs goes if you download it, save this script in there as test.js, then in the command prompt go to where you extracted it, say c:\phantomjs and run:

phantomjs.exe test.js

The console.log parts of the script will notify you of its progress. Oh and change the destination folder & target web address in the script before you run it.

Highcharts exporting multiple charts to pdf with tcpdf

2 Answers2