javascript - Export multiple charts and tables into 1 PDF

Question

I'm looking for 2 JS libraries for generating charts and PDFs. I've already tested some, but none of them has satisfied my needs so far.

Background:

I need to create several independent charts and tables in order to export all of them afterwards into 1 PDF.

What I already tried:

I have already tested highcharts and amcharts, but they don't seem to work the way I need them.

highcharts offers the possibility to create a chart and a table, showing the same data. So same input visualized differently.
Nobody could help me here.

With amcharts I could export multiple charts, but the problem with the tables remained the same: They only can display the same content in different ways.
Nobody could help me here.

Both libraries provide an own export function. However, when creating a custom HTML table (<table><tr>...), I need to use an extern PDF library, in my case it was jspdf. That way I can export my custom tables, but the charts won't be exported properly anymore.
Here is a fiddle.

Question:

Does anybody know a way or another library, so that I can properly export multiple charts and tables into 1 PDF?

Answer 1

Edit: sorry they are using SVG not canvas. So maybe you can find a way how to convert svg to an image.

I think the problem is that jspdf cannot handle html-canvas proberly. You could try to convert the canvas to an image with html2canvas and feed it to jspdf.

Have a look here: Html5-canvas to pdf

Copied from the answer:

html2canvas($("#canvas"), {
    onrendered: function(canvas) {         
        var imgData = canvas.toDataURL(
            'image/png');              
        var doc = new jsPDF('p', 'mm');
        doc.addImage(imgData, 'PNG', 10, 10);
        doc.save('sample-file.pdf');
    }
});