XMLHttpRequest to open PDF in browser

Question

I want to do XMLHttpRequest and then open a PDF in the Browser by sending the filename by POST method.

   xmlhttp.open("POST","pdf.php",true); //CHANGE
   xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xmlhttp.send("file="+input);

Is that possible or XMLHttpRequest is just for HTML?

Yes! Maybe this will help: http://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit — user583311, Jan 20 '11 at 17:46

DVK · Accepted Answer · 2011-01-20T17:59:59.040

It is not possible to do via XMLHttpRequest if the URL you are querying actually returns the PDF data.

Why? Because the response is an HTTP response which contains raw PDF data. There is no JavaScript ability to replace the current document's DOM contents with a rendering of a PDF contained in that data, even though you DO have access to the data via responseText` attribute (also see http://www.w3.org/TR/XMLHttpRequest/#the-responsetext-attribute).
What you CAN do is to generate a PDF file into a temporary file accessible via a URL from your web server, and then have the script send back the URL for accessing that file.

When your response handler processes the URL, it can either:
- Re-load the current page by changing window.location.href = new_pdf_url
- Load it in an <iframe> inside the current document by changing iframe's src attribute
- Open it in a separate window by window.open(new_pdf_url, XXX)
  
  Please note that you STILL need a URL to a temp file location to open a new window

@user583311 - You can only open a new window if you have the URL pointing to a temp PDF file. Basically, there's no native JavaScript mechanism to generate a "DOM document" out of a non-HTML content. Your browser MAY have a plug-in to render that content, but you can't force that plugin to render unless the browser's document is (re-)loaded from scratch. Why don't you simply do `window.open('pdf.php?file='+input, XXX)` ? — DVK, Jan 20 '11 at 18:01

score 0 · Answer 2 · answered Jan 20 '11 at 17:46

If you're opening the PDF in the same window there's no point in using an XmlHttpRequest, just set window.location (window.location.assign("http://example.com/location/file.pdf"), window.location.href="http://etc) from your javascript, instead of invoking XmlHttpRequest. (if you've received the PDF bytes from the XmlHttpRequest how are you going to convince the browser to display it with PdfPluginX anyway?)

If you want the PDF in a new browser window just use window.open(...) directly from your javascript.

I don't want to reveal the location of the PDF's at dropbox. I have a pdf.php that receives POST value and shows the PDF. I just need to find a wait to send the POST to pdf.php by javacript. — user583311, Jan 20 '11 at 17:52

score 0 · Answer 3 · answered Apr 29 '21 at 12:32

Yes, it's possible to do that, first you need to get file as arrayBuffer, then create an object url with a new blob, and then assign to the src.

    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.type = 'arraybuffer';
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200){
           var blobSrc = window.URL.createObjectURL(new Blob([this.response], { type: 'application/pdf' }));
           // assign to your iframe or to window.open
           yourIframe.src = blobSrc;
        }

score -1 · Answer 4 · edited Nov 22 '15 at 21:53

You can try this one:

    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)           {
       var file = window.URL.createObjectURL(xmlHttp.response);
        var a = document.createElement("a");
        a.href = file;      window.open(file);
            }
    }
    xmlHttp.open("GET", '/pdf', true); // true for asynchronous     xmlHttp.responseType= "blob";
    xmlHttp.send(null);

XMLHttpRequest to open PDF in browser

4 Answers4

Linked