将多个 Highchart 作为 Zip 文件导出到我的项目目录答案

【问题标题】：Export multiple Highchart as Zip file to my project directory将多个 Highchart 作为 Zip 文件导出到我的项目目录
【发布时间】：2016-12-23 13:40:47
【问题描述】：

我已在一个页面中成功创建了总共 4 个不同的图表。
我有一个“下载所选图表”按钮，单击此按钮我需要创建一个带有所选图表 PDF 的 ZIP 文件，这意味着如果我选择三个图表然后创建一个包含三个图表 PDF 的 ZIP。强>
Highchair 提供了以 PDF、SVG、PNG 等格式下载图表的功能，但我无法下载多个选定的图表。
我检查了 Highchart 导出服务器文档 - http://www.highcharts.com/docs/export-module/setting-up-the-server 但我不明白如何使用它。

如果有人有想法，请帮助我，我该怎么做？

【问题讨论】：

标签： php jquery highcharts

【解决方案1】：

对此的一个示例解决方案是：

创建图表

var options1 = { 
    // ...
};
$('#chart1').highcharts(options1);

请求 Highcharts 导出服务器生成图表图像

var exportUrl = 'http://export.highcharts.com/';
var d1 = $.ajax({
    url: exportUrl,
    // ...
});

获取生成图像的内容

$.when(d1).done(function(v1) {
    var p1 = new JSZip.external.Promise(function (resolve, reject) {
        JSZipUtils.getBinaryContent(exportUrl + v1[0], function(err, data) {
            // ...
        });
    });
    // ...

使用 JSZip 构建并保存包含生成图像内容的 ZIP 文件

    // ...
    Promise.all([p1]).then(function(values) {
        var zip = new JSZip();
        zip.file("chart1.png", values[0], {binary:true});
        zip.generateAsync({type:"blob"})
        .then(function(content) {
            saveAs(content, "charts.zip");
        });
    });
});

您可以查看this (very scrappy) JSFiddle demonstration 了解如何获取 ZIP 文件。步骤如上所述，但未连接任何按钮，而是在进入站点后立即执行。

【讨论】：

感谢@halvorStrand 的解决方案。你的回答让我知道我需要如何继续，但现在我也想要 Zip 存档中的 csv 文件。所以我想我无论如何都需要使用 PHP。你有什么想法吗？
您想获取 CSV 格式的图表数据，并将其添加到 ZIP 中吗？然后我仍然会使用 JSZip，但可能与像 Export-CSV 这样的 Highcharts 插件结合使用，您可以获得 CSV。
是的。单击一个按钮，我想为所选图表创建 PDF 和 CSV，并将所有文件（csv 和 pdf）添加到一个 ZIp 中。

【解决方案2】：

在这里，我发布了适合我的解决方案。

在按钮点击时，使用 High 图表导出服务器获取 svg 图像。

     // get selected checkbox
     $('.selected_checkbox').each(function( index ){ 
         var obj = {},chart;
         chart = $('#each_chart').highcharts();
         obj.svg = chart.getSVG();
         obj.type = 'image/png';
         obj.async = true;
         obj.id = chart_id; 
        // ajax call for svg 
         $.ajax({
                type: "POST",
                url: url,// u need to save svg in your folder
                data: obj, 
                success: function(data)
                { 
                 // redirect to php function and create zip 
                 window.location = 'php function call';
                }
          )}

Ajax 函数调用创建 SVG..


      ini_set('magic_quotes_gpc', 'off');
    $type = $_POST['type'];
    $svg = (string) $_POST['svg'];
    $filename = 'name';
    $id = $_POST['id'];

if (get_magic_quotes_gpc()) {
        $svg = stripslashes($svg);  
}
// check for malicious attack in SVG
if(strpos($svg,"<!ENTITY") !== false || strpos($svg,"<!DOCTYPE") !== false){
        exit("the posted SVG could contain code for a malicious attack");
} 

$tempName = $filename.'_'.$id;
// allow no other than predefined types
if ($type == 'image/png') {
        $typeString = '-m image/png';
        $ext = 'png';

} elseif ($type == 'image/jpeg') {
        $typeString = '-m image/jpeg';
        $ext = 'jpg';
} elseif ($type == 'application/pdf') {
        $typeString = '-m application/pdf';
        $ext = 'pdf';
} elseif ($type == 'image/svg+xml') {
        $ext = 'svg';
} else { // prevent fallthrough from global variables
        $ext = 'txt';
}


   $outfile = APPPATH."tempp/$tempName.$ext";
   if (!file_put_contents(APPPATH."tempp/$tempName.svg", $svg)) { 
    die("Couldn't create temporary file.");  
}}

Ajax 成功函数重定向代码..
在这里您需要读取目录文件并从 SVG 创建 PDF。
将每个 PDF 添加到 ZIP 之后。

这是示例解决方案。您必须根据您的要求更改代码

【讨论】：