将多个图表和表格导出为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');
    }
});