Active7 months ago
Download and open PDF file using Ajax. The above source code is able to download a file using a JQuery Ajax request. Convert HTML + CSS to PDF with PHP? JQuery:Sending pdf to server via ajax [duplicate]. Browse other questions tagged javascript jquery ajax pdf or ask your own. Convert HTML + CSS to PDF with PHP?
I have an action class that generates a PDF. The
contentType
is set appropriately.I call this
action
through an Ajax call. I don't know the way to deliver this stream to browser. I tried a few things but nothing worked.The above gives the error:
Your browser sent a request that this server could not understand.
Mike B.5,5351515 gold badges6060 silver badges9494 bronze badges
NaynNayn1,64677 gold badges3131 silver badges4747 bronze badges
15 Answers
You don't necessarily need Ajax for this. Just an
<a>
link is enough if you set the content-disposition
to attachment
in the server side code. This way the parent page will just stay open, if that was your major concern (why would you unnecessarily have chosen Ajax for this otherwise?). Besides, there is no way to handle this nicely acynchronously. PDF is not character data. It's binary data. You can't do stuff like $(element).load()
. You want to use completely new request for this. For that <a href='pdfservlet/filename.pdf'>pdf</a>
is perfectly suitable.To assist you more with the server side code, you'll need to tell more about the language used and post an excerpt of the code attempts.
BalusCBalusC886k312312 gold badges32563256 silver badges32933293 bronze badges
Here is how I got this working
Updated answer using download.js
Mayur PadshalaMayur Padshala1,47222 gold badges1212 silver badges1919 bronze badges
I don't really think that any of the past answers spotted out the problem of the original poster. They all presume a GET request while the poster was trying to POST data and get a download in response.
In the course of searching for any better answer we found this jQuery Plugin for Requesting Ajax-like File Downloads. Converting pdf to jpg using php.
In its 'heart' it creates a 'temporary' HTML form containing the given data as input fields. This form is appended to the document and posted to the desired URL. Right after that the form is removed again:
Update Mayur's answer looks pretty promising and very simple in comparison to the jQuery plug-in I referred to.
chiccodorochiccodoro10.3k1414 gold badges8181 silver badges126126 bronze badges
This is how i solve this issue.
The answer of Jonathan Amend on this post helped me a lot.
The example below is simplified.
The answer of Jonathan Amend on this post helped me a lot.
The example below is simplified.
For more details, the above source code is able to download a file using a JQuery Ajax request (GET, POST, PUT etc). It, also, helps to upload parameters as JSON and to change the content type to application/json (my default).
The html source:
A simple form with two input text, one select and a button element.
The javascript page source:
A simple event on button click. It creates an AjaxDownloadFile object. The AjaxDownloadFile class source is below.
The AjaxDownloadFile class source:
I created this class to added to my JS library. It is reusable. Hope that helps.
Community♦
George SiggouroglouGeorge Siggouroglou8,59766 gold badges6464 silver badges6565 bronze badges
What worked for me is the following code, as the server function is retrieving
ParParParParFile(memoryStream.GetBuffer(), 'application/pdf', 'fileName.pdf');:
5,18777 gold badges3636 silver badges5050 bronze badges
You could use this plugin which creates a form, and submits it, then removes it from the page.
This worked for me. Found this plugin here
George Siggouroglou8,59766 gold badges6464 silver badges6565 bronze badges
Ijas AmeenudeenIjas Ameenudeen![Jquery ajax tutorial php mysql pdf Jquery ajax tutorial php mysql pdf](https://www.nekosign.com/wp-content/uploads/2011/12/webdesign-arganoil-5.jpg)
7,24733 gold badges3131 silver badges4848 bronze badges
To fix the blank PDF issue in post request to get stream data like PDF, we need to add response type as 'arraybuffer' or 'blob' in request
NinjaNinja
create a hidden iframe, then in your ajax code above:
url:
document.getElementById('myiframeid').src = your_server_side_url
,and remove the
JMaxwindow.open(response);
21.4k1010 gold badges5858 silver badges8585 bronze badges
qalhatqalhat
This snippet is for angular js users which will face the same problem, Note that the response file is downloaded using a programmed click event.In this case , the headers were sent by server containing filename and content/type.
Gihan SandaruGihan Sandaru
MemZMemZ
Do you have to do it with Ajax? Coouldn't it be a possibility to load it in an iframe?
Jquery Ajax Tutorial
Emil VikströmEmil Vikström76.6k1313 gold badges115115 silver badges154154 bronze badges
Concerning the answer given by Mayur Padshala this is the correct logic to download a pdf file via ajax but as others report in the comments this solution is indeed downloads a blank pdf.
The reason for this is explained in the accepted answer of this question: jQuery has some issues loading binary data using AJAX requests, as it does not yet implement some HTML5 XHR v2 capabilities, see this enhancement request and this discussion.
So using
HTMLHTTPRequest
the code should look like this:VpantVpant
Hope this will save you a few hours and spare you from a headache.It took me a while to figure this out, but doing regular $.ajax() request ruined my PDF file, while requesting it through address bar worked perfectly.Solution was this:
Include download.js: http://danml.com/download.html
Then use XMLHttpRequest instead of $.ajax() request.
Jurijs KastanovsJurijs Kastanovs44511 gold badge1111 silver badges2828 bronze badges
Nathan Tuggy2,20499 gold badges2525 silver badges3535 bronze badges
Jquery Ajax Tutorial Php Mysql Pdf
POGSNETPOGSNET
If you have to work with file-stream (so no physically saved PDF) like we do and you want to download the PDF without page-reload, the following function works for us:
HTML
Javascript
Due to the target='pdf-download-output', the response is written into the iframe and therefore no page reload is executed, but the pdf-response-stream is output in the browser as a download.
George MaharisGeorge Maharis