XMLHttpRequest to open PDF in browser

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?

1. 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).

2. 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

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.

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;
        }    

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);