Question

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

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

Answer 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文件。步骤如上所述，但没有连接到任何按钮，而是在进入网站后立即执行。

Answer 2

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

点击按钮，使用高图表导出服务器获取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 Success函数重定向代码..
在这里，您需要读取目录文件并从SVG创建PDF 将每个PDF添加到ZIP后。

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

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

2 个答案: