Highcharts 使用 tcpdf 将多个图表导出为 pdf答案

【问题标题】：Highcharts exporting multiple charts to pdf with tcpdfHighcharts 使用 tcpdf 将多个图表导出为 pdf
【发布时间】：2013-03-28 11:53:25
【问题描述】：

在我的网站上，我有一些 html 表格和一些来自 highcharts 的图表。我需要使用 tcpdf 导出所有内容。

所以我搜索了它，我创建的唯一东西是关于 svg。但我不知道如何将它与 tcpdf 一起使用。我想过将每个图表导出为 png 图像，然后将这些图像添加到 pdf 中，但我失败了。因为每次导出图片都会问我怎么保存，但是我需要自动保存。

请问您有什么解决方案？

对不起我的英语。

【问题讨论】：

标签： php highcharts tcpdf

【解决方案1】：

有很多TCPD examples - 你可以看到可以将图像导出为pdf。还是想要一些特别的东西？

注意：您可以找到如何从 highcharts 导出图像的方法：like here

【讨论】：

我知道如何将图像导出为 pdf。问题是如何将图表导出为图像，而不要求我将其保存在某处
更新了我的答案。请检查该链接。
所以我看过你链接的内容，但我已经看过他们提供的所有链接。但我什么都不懂。在 Highcharts 网站上，他们正在谈论 phantomjs，但我不明白如何使用它。你能解释清楚吗？
所以here你可以看到导出highchart图像有几种方法。据我了解，第一个是使用 PhantomJs - 您需要 install 它，并按照该页面上的说明创建脚本。在这种情况下，PhantomJs 允许在没有浏览器的情况下渲染页面并保存生成的结果。

【解决方案2】：

我有一个相当简单的页面，在屏幕上报告了一些数字和几个图表。我认为 TCPDF 支持 SVG 并且图形是在 SVG 中生成的，这将是捕获它们的最佳格式，令人惊讶的是我找不到太多关于这样做的信息，所以这是我的 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();
}
});

该页面具有两个用于 highcharts 的目标 div，results_graph_1 和 results_graph_2，highcharts 在其中创建一个子 div，然后在其中创建 svg，因此通过访问每个目标的第一个子 div 的内容，我们可以复制出 svg 并写入输出到服务器上的文件中。

然后选择 SVG 文件以放入您的 PDF 中。我不确定您的情况是什么，但我希望用户在单击下载 PDF 之前先在屏幕上查看报告，所以我将在第一阶段保存图表，并且 SVG 文件将在生成 PDF 之前准备好.

就运行 phantomjs 而言，如果你下载它，将这个脚本保存为 test.js，然后在命令提示符中转到你提取它的位置，说 c:\phantomjs 并运行：

phantomjs.exe test.js

脚本的 console.log 部分将通知您其进度。哦，在运行之前更改脚本中的目标文件夹和目标网址。

【讨论】：