score:1

here i post my solution that is work for me.

  1. on button click, get svg image using high chart export server.

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

  2. ajax function call to create 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."); }}
  3. ajax success function redirect code..
    here you need to read directory files and create pdf from svg.
    after add each pdf to zip.

this is example solution.you have to change code as per your requirement

score:2

an example solution to this would be:

  1. create your charts

    var options1 = { 
        // ...
    };
    $('#chart1').highcharts(options1);
    
  2. ask the highcharts export server to generate an image of the chart

    var exporturl = 'http://export.highcharts.com/';
    var d1 = $.ajax({
        url: exporturl,
        // ...
    });
    
  3. fetch the contents of the generated image

    $.when(d1).done(function(v1) {
        var p1 = new jszip.external.promise(function (resolve, reject) {
            jsziputils.getbinarycontent(exporturl + v1[0], function(err, data) {
                // ...
            });
        });
        // ...
    
  4. use jszip to construct and save the zip file with the contents of the generated images

        // ...
        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");
            });
        });
    });
    

you can see this (very scrappy) jsfiddle demonstration of how you could get the zip file. the steps are as described above, but not connected to any button and instead executed immediately upon entering the site.


Related Query

More Query from same tag