download pdf from ajax post

Question

I want to download a pdf file via a jquery post. I tried this:

$('#downloadPdf').click(function() {
    var id = $('#fileId').val();

    $.ajax({
        type: "POST",
        url: "includes/download_pdf.php",
        data: 'file_id=' + id,
        complete: function(data) {
            $('#pdf_results').html(data.responseText);
        }
    });
});

Code PHP:

<?php 
    $file_name = $_POST['file_id']; 
    // We'll be outputting a PDF header('Content-type: application/pdf'); 
    // It will be called downloaded.pdf header('Content-Disposition: attachment; filename="'.$file_name.'.pdf"'); 
    // The PDF source is in original.pdf readfile('/var/www/vhosts/domain.nl/private/'.$file_name.'.pdf'); 
?>

When I use this code I get all strange signs in #pdf_results. I want to save the PDF to my computer but this doesnt work.

Somebody knows how to fix this?

Thanks in advance!

possible duplicate of [POST to server, receive PDF, deliver to user w/ jQuery](http://stackoverflow.com/questions/2186562/post-to-server-receive-pdf-deliver-to-user-w-jquery) — Rory McCrossan, May 02 '12 at 07:58
you are trying to output the raw pdf as html. That won't work. You cannot start a download this way. Do you want the user to see a download dialog or should the pdf be display in that html element? — Fender, May 02 '12 at 07:59
you can't achieve this because ajax can't handle this nicely asynchronously. PDF is not character data. It's binary data. you'll have to use other trick like a .click(); event on the of the pdf and manage it server side if you need something different. — kawashita86, May 02 '12 at 08:04

score 1 · Answer 1 · answered May 02 '12 at 08:02

1

You don't need to use AJAX for this. Try to use something like this:

$(function(){
    $('#downloadPdf').click(function(){
        var id = $('#fileId').val();
        window.open(location.protocol + '//' + location.hostname + '/includes/download_pdf.php?file_id=' + id);
        return false;
    });
});

Cheers!

answered May 02 '12 at 08:02

Igor Timoshenko

1,001
3
14
27

3

This is not a POST request. – mbarkhau Oct 15 '14 at 12:44

score 1 · Answer 2 · edited May 23 '17 at 12:25

1

There is no need for ajax here.

Try using Rory McCrossan's solution: POST to server, receive PDF, deliver to user w/ jQuery

Either use the plugin or simply link to the file and make sure your server sends the correct headers (else you can read the file with php and output it from there: http://www.saschakimmel.com/2009/05/php-prompt-the-user-to-download-a-specific-file/)

edited May 23 '17 at 12:25

Community

1
1

answered May 02 '12 at 08:05

Fender

3,055
1
17
25

score 1 · Answer 3 · answered May 02 '12 at 08:07

Have an invisible <iframe/> on the page, and create a <form> with attributes method="POST" action="includes/download_pdf.php" target="name_of_the_iframe", add a <input type="hidden" name="file_id" value="the_value"/> into it, and submit it.

All of the above can be done all in JavaScript without the need to put that kind of markup into the page, to keep things clean. And none of this is ajax.

hayonj · Answer 4 · 2015-02-17T18:24:21.417

1

You need to achieve this : I didn't really trace your program but you need the content disposition line in your php to make it work.

<?php
// We'll be outputting a PDF
header('Content-type: application/pdf');

// It will be called downloaded.pdf
**header('Content-Disposition: attachment; filename="downloaded.pdf"');**

// The PDF source is in original.pdf
readfile('original.pdf');
?>

check the manual here

Also you can move the file over onto an iframe but that's a security risk, hence another topic.

edited Feb 17 '15 at 18:24

answered May 20 '13 at 05:51

hayonj

1,429
3
21
28

Good answer, the key is `attachment`, and to download it with javascript: `window.location = "includes/download_pdf.php"`; – jscripter Feb 07 '15 at 20:31

download pdf from ajax post

4 Answers4