Download in browser with ajax request Download in browser with ajax request angularjs angularjs

Download in browser with ajax request


UPDATE

The method of using FileSaver.js also doesn't work , there seems to be no way to forcefully invoke the native Save As Dialog via JavaScript alone , only exception being the saveAs execCommand for IE. Check Does execCommand SaveAs work in Firefox?

Include FileSaver.js as dependency in your project

Change the downloadPDF function as follows

 $scope.downloadPDF = function() {    $http.post('/download-pdf', {        fid: $routeParams.fid      }, {        responseType: 'arraybuffer'      })      .success(function(data, status, headers, config) {        // Convert response data to Blob        var file = new Blob([data], {          type: 'application/pdf'        });        // Call the File Saver method to save the above Blob,this will show Save As dialog        saveAs(file, "test.pdf");      })      .error(function(data, status, headers, config) {        console.log("error");      }); };

The Blob object will work in most modern browser but there is limited support for IE < 10 , check https://github.com/eligrey/FileSaver.js#supported-browsers for polyfills

Also remove Content-Disposition: attachment and Content-Type: application-download headers as we don't want browser to natively handle the download process

Here is a working demo http://plnkr.co/edit/9r1tehQ94t5vkqZfZuQC?p=preview , it shows GET request to a PDF


Let me suggest you one thing.

By AJAX only you cannot download any file. You need to create .zip file first with ajax call and after that gaining that file path you have to open that file using any command.

Here one example that works for me: :)

$http.post('www.abc.com/zipcreate', {'id': id}).then(function (zipurl) {                    $window.location = zipurl;            });

Surely, It works. Try once. :)

EDIT:

Or you can use

$window.location = 'abc.com/link';

in 'abc.com/link' : use below code:

  header("Content-type: application/octet-stream");  header("Content-Disposition: attachment; filename=".$name);  header("Pragma: no-cache");  header("Expires: 0");  readfile($file);  exit;

You will get your file in download-list.


According to the documentation you can set the 2nd parameter to D:

$pdf->Output('Order123.pdf', 'D');

If you want to handle all the details yourself using a saved file, this is how I've presented PDFs to the browser for download from PHP:

header('Pragma: public');header('Expires: 0');header('Cache-Control: must-revalidate, post-check=0, pre-check=0');header('Content-Type: application-download');header('Content-Length: ' . filesize('file.pdf'));header('Content-Transfer-Encoding: binary');header('Content-Disposition: attachment; filename="file.pdf"');$handle = fopen('file.pdf', 'rb');fpassthru($handle);fclose($handle);

Update:

Please verify that the PDF file is actually being made. Does the web server process have write access to that path? Is FPDF being included properly? I made this on a test VM and it presented a file 1.pdf for download, which opened and contained "Hello World!":

<?phprequire('/var/www/html/fpdf17/fpdf.php');$_POST = array('fid' => '1');$pdf = new FPDF();$pdf->AddPage();$pdf->SetFont('Arial', 'B', 16);$pdf->Cell(40, 10, 'Hello World!');$filename = '/tmp/' . $_POST['fid'] . '.pdf';$pdf->Output($filename, 'F'); // Save file locallyheader('Pragma: public');header('Expires: 0');header('Cache-Control: must-revalidate, post-check=0, pre-check=0');header('Content-Type: application-download');header('Content-Length: ' . filesize($filename));header('Content-Transfer-Encoding: binary');header('Content-Disposition: attachment; filename="' . basename($filename) . '"');$handle = fopen($filename, 'rb');fpassthru($handle);fclose($handle);unlink($filename);?>