Pass data from js to php and download created csv file

Question

I must pass array from JS to PHP using $.post(), create file using array and download it.

Using this pass array:

$('#csv').click(function () {
$.post(
    window.location + "crawler/save_to_file",
    {
        dane: wynik //array
    });
  });

Now in PHP using this:

$tablica=$_POST['dane'];
 $filename = "export-to-csv.csv";
                header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
                header("Content-type: text/csv");
                header("Content-Disposition: attachment; filename=\"$filename\"");
                header("Expires: 0");
                $fh = fopen( 'php://output', 'w' );
                $heading = false;
                if(!empty($tablica))
                    foreach($tablica as $row) {
                        if(!$heading) {
                            fputcsv($fh, array_keys($row));
                            $heading = true;
                        }
                        fputcsv($fh, array_values($row));
              }
                fclose($fh);

But when click on button to create and download file, nothing happens.

Thanks

CODE UPDATE

JS file:

   $.ajax({
        url: window.location + "crawler/",
        type: "POST",
        dataType: "json",
        data: {
            wartosc: zmienna
        },
        success: function (odp) {
            wynik = odp;  //array
            tab = JSON.stringify(odp);
            $.post(window.location + "crawler/return_data",
                {
                    data: tab
                },
                function (data) {
                    $('#wynik').html(data);
                    $('.pobierz').show();
                }
            )
        }
    })


$('.button').click(function() {
    var $form = $('<form action="' + window.location + 'crawler/save_to_csv" method="post"></form>');
    $.each(wynik, function() {
        $('<input type="hidden" name="dane[]">').attr('value', this).appendTo($form);
    });
    $form.appendTo('body').submit();
});

And var_dump array in PHP file:

function save_to_csv()
{
    $tablica=$_GET['dane'];
    var_dump($tablica);

}

return: "Undefined index: dane"

EDIT

$tablica must be $_POST not $_GET

oh forgot to change variables in code writing thist question, update now — Marcin, Sep 04 '16 at 10:24

MarcHoH · Accepted Answer · 2016-09-09T14:02:48.483

This can be done with AJAX but you need to use the File api. So you do something like this:

$.post("csv.php", {
     dane: wynik //array
}, function(response){
   var blob = new Blob([response], { type:'text/csv' });
   alert(URL.createObjectURL(blob));
});

The url you get from the alert, contains your csv file.

And of course if you want to go directly to the file you replace the alert with:

window.location.href=URL.createObjectURL(blob);

UPDATE

If you want to use a custom filename, there is a way to mask the url generated by URL.createObjectURL(), by using an a element. We than can use the new HTML5 attribute download which allows us to mask the url.

Here is the updated code:

$.post("csv.php", {
     dane: wynik //array
}, function(response){
   var blob = new Blob([response], { type:'text/csv' }),
       a    = document.createElement('a'),
       url  = URL.createObjectURL(blob);

    // Put the link somewhere in the body
    document.body.appendChild(a);
    a.innerHTML = 'download me';
    a.href = url;
    // Set our custom filename
    a.download = 'myfilename.csv';
    // Automatically click the link 
    a.click();
});

Thanks, how to do this if use this: window.location.href=URL.createObjectURL(blob); — Marcin, Sep 09 '16 at 14:24
This is the replacement, the `a.click()` method will fire the click event and so you get that save dialog. Try it out. — MarcHoH, Sep 09 '16 at 14:33
`document.body.appendChild(a);` is unnecessary,it may broken layout — larrykkk, Feb 21 '20 at 09:10

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

Are you forced to use AJAX to send that array to your PHP code? If yes, it is not really possible.

If not, instead of your AJAX call, you could build a hidden form with hidden inputs containing your array items and submit it via JavaScript.

UPDATE Short example for form built with JS:

$('#csv').click(function() {
  var $form = $('<form action="' + window.location + 'crawler/save_to_file" method="post"></form>');
  $.each(wynik, function() {
    $('<input type="hidden" name="dane[]">').attr('value', this).appendTo($form);
  });
  $form.appendTo('body').submit();
});

edited May 23 '17 at 12:32

Community

1
1

answered Sep 04 '16 at 10:37

Zoli Szabó

4,366
1
13
19

could you give me link with example? – Marcin Sep 04 '16 at 10:46
Error:"Undefined index: dane" when try to catch array in php file using $_POST['dane']; – Marcin Sep 06 '16 at 14:37
@Marcin: Can you please post your updated code? Or can you check the POST request with Chrome DevTools or Firebug? – Zoli Szabó Sep 06 '16 at 14:51

Pass data from js to php and download created csv file

2 Answers2