Home » Php » php – Prompt user to save file through AJAX call

php – Prompt user to save file through AJAX call

Posted by: admin July 12, 2020 Leave a comment

Questions:

I’m exporting my DHTMLX grid to csv and have successfully been able to create the .CSV file. The problem I’m having is that it isn’t prompting the user to save/open the file. I’m using a $.post call from javascript to send the CSV string to PHP, then writing that string to csv. For some reason it isn’t creating a prompt for the user, but it is successfully writing the file and saving on the server. Below is the relevant code:

JS:

myGrid.csvParser = myGrid.csvExtParser;
myGrid.setCSVDelimiter('|');
myGrid.csv.row = "endOfRow";           
var gridCsvData = myGrid.serializeToCSV();

    $.post(
        "data/export.php", 
        { 
           csvdata: gridCsvData
        }
    );

PHP (export.php):

$csvData = $_REQUEST['csvdata'];

$csv = explode('endOfRow',$csvData);

$myfile = "grid.csv";

$fh = fopen($myfile, 'w') or die("can't open file");

foreach($csv as $line) {
    fputcsv($fh, explode('|',$line),',','"');
}

fclose($fh);

//Redirect output to a client's web browser (csv)
header("Content-type: application/csv");
header("Content-Disposition: attachment; filename=grid.csv");
header("Pragma: no-cache");
header("Expires: 0");

This code works perfectly in the sense that it exports the Grid exactly how I want it and saves it to ‘grid.csv’. The problem is that it isn’t prompting the user to save the file. Is this a problem with my PHP headers or do I need to put something in the $.post to prompt on success? Thanks for any help!

How to&Answers:

You can’t prompt the user to download a file from an AJAX call. One thing you can do is, make an iFrame, put a form in it, then POST it. That way, it’ll look like an AJAX call, but the user will be prompted to download the file.

// Create iFrame
var iframe = document.createElement('iframe');
iframe.style.display = "none";
document.body.appendChild(iframe);

// Get the iframe's document
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

// Make a form
var form = document.createElement('form');
form.action = 'data/export.php'; // Your URL
form.method = 'POST';

// Add form element, to post your value
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'csvdata';
input.value = gridCsvData;  // Your POST data

// Add input to form
form.appendChild(input);

// Add form to iFrame
// IE doesn't have the "body" property
(iframeDoc.body || iframeDoc).appendChild(form);

// Post the form :-)
form.submit();

P.S. Your PHP code doesn’t actually echo the CSV to the screen, it just saves it to a file.

After the header calls, make sure you have:

readfile($myfile);

Answer:

The right way to do this in HTML5 is to use the File API. See this for details: http://hackworthy.blogspot.com/2012/05/savedownload-data-generated-in.html.

If HTML5 is not an option, then take this approach.

After you do a POST, generate a GET request for the file using:

document.location = "file.csv";

Depending on the browser, the file will either be saved (Chrome) or user will be prompted to choose a file name to save as. Of course, the POST handler has to save the file somewhere.

$.ajax({
    type: "POST",
    url: "post.php",
    success: function() {
        console.log("Worked!");
        document.location = "test.csv";
    },
    error: function() {
        console.log("Failed!");
    }
});