Generate and download CSV file with php and ajax

Question

I have a php page that creates a CSV file that is then downloaded by the browser automatically. Here is a version with sample data - it works great.

<?php

$cars = array(
  array("Volvo",22,18),
  array("BMW",15,13),
  array("Saab",5,2),
  array("Land Rover",17,15)
  );

// output headers so that the file is downloaded rather than displayed
header('Content-Type: text/csv; charset=utf-8');
header('Content-Disposition: attachment; filename=csvfile.csv');

// create a file pointer connected to the output stream
$output = fopen('php://output', 'w');

// output the column headings
fputcsv($output, array('Car', 'Year', 'Miles' ));

//Loop through the array and add to the csv
foreach ($cars as $row) {
    fputcsv($output, $row);
}

?>

I would like to be able to run this from another page using ajax so that a user can generate/download a csv without leaving the main page. This is the JavaScript I am using on the main page. In my real page I am using the data coming via ajax.

$('button[name="exportCSVButton"]').on('click', function() {
    console.log('click');
    $.ajax({
        url: 'exportCSV.php',
        type: 'post',
        dataType: 'html',
        data: {

            Year: $('input[name="exportYear"]').val()
        },
        success: function(data) {
            var result = data
            console.log(result);


        }
    });
});

When I click the button to trigger the script, it runs, but instead of saving/download to csv it prints the entire thing to console. Is there any way to accomplish what I want? Without actually saving the file to the server and reopening.

Possible duplicate: https://stackoverflow.com/q/16086162/2732506 — Alexey, Dec 29 '17 at 00:06
Why do you need ajax for this? So long as you put proper headers on server side browser won't be redirected for download — charlietfl, Dec 29 '17 at 00:07
@charlietfl Perhaps I don't. I have my main page that has a button that when pressed needs to run a php script and export the result. What's an alternative? — blackandorangecat, Dec 29 '17 at 00:09
use `window.location.assign('path_to_csv_generated_file')` after the file has been exported inside the `success` function and you are done, make sure the file is in the public accessable directory — Muhammad Omer Aslam, Dec 29 '17 at 00:11
Post a form instead of ajax. Update the year field inside the submit event hander before it gets sent — charlietfl, Dec 29 '17 at 00:12
@charlietfl , yeah that would work too, but wouldn't it download the file on every refresh once the button is clicked? — Muhammad Omer Aslam, Dec 29 '17 at 00:14
@blackandorangecat , then go for what charlie suggested submit a form — Muhammad Omer Aslam, Dec 29 '17 at 00:15
@MuhammadOmerAslam why would it be any different than attempting same with ajax? — charlietfl, Dec 29 '17 at 00:15
you might want to look at https://stackoverflow.com/questions/11163008/jquery-file-download-with-ajax and https://stackoverflow.com/questions/44182744/how-to-download-a-file-with-ajax-window-location and https://stackoverflow.com/questions/16670209/download-excel-file-via-ajax-mvc — Funk Forty Niner, Dec 29 '17 at 01:22
What I ended up doing is changing the input/button to a form, and added `target="_blank"` so that it runs in a new tab instead of redirecting the current page. — blackandorangecat, Jan 08 '18 at 19:55

score 14 · Answer 1 · answered Oct 12 '19 at 08:38

I have done csv file download via ajax

PHP Code

    <?php
         function outputCsv( $assocDataArray ) {

            if ( !empty( $assocDataArray ) ):

                $fp = fopen( 'php://output', 'w' );
                fputcsv( $fp, array_keys( reset($assocDataArray) ) );

                foreach ( $assocDataArray AS $values ):
                    fputcsv( $fp, $values );
                endforeach;

                fclose( $fp );
            endif;

            exit();
        }

        function generateCsv(){
            $res_prods = $wpdb->get_results( "SELECT * FROM `{$wpdb->prefix}products` ", OBJECT );

            $products= [];
            foreach ($res_prods as $key => $product) :
                $product_id = $product->ID;

                $products[$product_id]['product_id'] = $product_id;
                $products[$product_id]['name'] = $product->name;
            endforeach;

            return outputCsv( $products);
      }

jQuery AJAX

jQuery(document).on( 'click', '.btn_generate_product', function(e) {

    var product_id = jQuery(this).data('product_id');

    jQuery.ajax({
        url : "ajaxurl", 
        type: 'POST',
        data: { product_id },
        success: function(data){

              /*
               * Make CSV downloadable
               */
              var downloadLink = document.createElement("a");
              var fileData = ['\ufeff'+data];

              var blobObject = new Blob(fileData,{
                 type: "text/csv;charset=utf-8;"
               });

              var url = URL.createObjectURL(blobObject);
              downloadLink.href = url;
              downloadLink.download = "products.csv";

              /*
               * Actually download CSV
               */
              document.body.appendChild(downloadLink);
              downloadLink.click();
              document.body.removeChild(downloadLink);

        }
    });
});

worked for me, replaced the products sql and array with my own data. — trainmania100, Jun 09 '22 at 19:57

score 2 · Answer 2 · answered Dec 29 '17 at 00:40

2

Replace console.log(result); with file save code. check here JavaScript: Create and save file

The best way to save file with browser dialog box, use simple code.

<a href="#" onclick="window.open('exportCSV.php?year=' + $('input[name="exportYear"]').val())" >Download File</a>

answered Dec 29 '17 at 00:40

Sartaj

139
5

this should have been flagged as a possible duplicate instead, and you're possibly plagiarising. – Funk Forty Niner Dec 29 '17 at 01:20

score 0 · Answer 3 · answered Dec 29 '17 at 00:17

I did it time ago by creating a hidden iframe and via javascript the source of the iframe was set to a php file which sent the appropriate headers and data as your exportCSV.php does.

But, if you don't like this idea, you could use a library like jQuery File Download or FileSaver.js

Generate and download CSV file with php and ajax

3 Answers3

Linked