将多个图表导出为1个PDF [英] Export multiple charts and tables into 1 PDF

问题描述

我正在寻找2个用于生成图表和PDF的JS库.我已经测试过一些，但是到目前为止，它们都没有满足我的需求.

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.

我需要创建几个独立的图表和表格，以便随后将它们全部导出到 1 PDF .

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

我已经测试过 highcharts 和

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

highcharts 提供了创建图表和表格以显示相同数据的可能性.因此，相同的输入显示效果不同.
没人可以在这里帮助我.

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.

使用 amcharts 我可以导出多个图表，但是表的问题仍然相同:它们只能以不同的方式显示相同的内容.
没人可以在这里帮助我.

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.

两个库都提供了自己的导出功能.但是，在创建自定义HTML表(<table><tr>...)时，我需要使用一个外部PDF库，在我的情况下，它是这是一个小提琴.

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.

有人知道一种方法或其他库，以便我可以正确地将多个图表和表格导出为1个PDF 吗?

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

推荐答案

编辑:抱歉，他们使用的是SVG而不是画布.因此，也许您可​​以找到一种方法来将svg转换为图像.

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

我认为问题在于jspdf无法处理html-canvas. 您可以尝试使用html2canvas将画布转换为图像，然后将其输入jspdf.

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.

在这里看看: HTML5-canvas到pdf

从答案中复制:

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');
    }
});

这篇关于将多个图表导出为1个PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！