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
– Marcin, Commented Sep 4, 2016 at 10:24

MarcHoH · Accepted Answer · 2016-09-09 14:02:48Z

5

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();
});

edited Sep 9, 2016 at 14:02

answered Sep 4, 2016 at 10:55

MarcHoH

3401 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Marcin Over a year ago

Thanks, how to do this if use this: window.location.href=URL.createObjectURL(blob);

MarcHoH Over a year ago

This is the replacement, the a.click() method will fire the click event and so you get that save dialog. Try it out.

MarcHoH Over a year ago

Glad to help out.

larrykkk Over a year ago

document.body.appendChild(a); is unnecessary,it may broken layout

Community · Accepted Answer · 2017-05-23 12:32:45Z

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, 2017 at 12:32

CommunityBot

11 silver badge

answered Sep 4, 2016 at 10:37

Zoli Szabó

4,5851 gold badge16 silver badges22 bronze badges

3 Comments

Marcin Over a year ago

could you give me link with example?

Marcin Over a year ago

Error:"Undefined index: dane" when try to catch array in php file using $_POST['dane'];

Zoli Szabó Over a year ago

@Marcin: Can you please post your updated code? Or can you check the POST request with Chrome DevTools or Firebug?

Collectives™ on Stack Overflow

Pass data from js to php and download created csv file

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related