Open a pdf content in a new browser tab

Question

I have a GET Ajax Request, that returns me a content, coded in application/pdf form. For example, my requests returns a string of this type:

%PDF-1.4 % 4 0 obj <>stream x endstream endobj 6 0 obj <>stream x ]o 0 + e{Q $ R N @- n wB?L$.JDL| >獝 [ >{ =?_ʻ (寒 1`ؚyW G XϽo 1 6 Ӳ. 4(?u C 8 j H l f6*k Fa^? e G= J0 } 7L z ͺ p H & ɴ ?L? Z

Excuse me for special characters rendered badly: the problem is just that. I would like to take this response, obtained from my request, and print this content correctly in another browser tab. I wrote the code to do this: I used the Blob object. The page for "reading the pdf" is properly opened. However, I see only a pdf document which is completely white, a sign of the fact that my response was not written on the document that has been created.

Below I show you the code of my request:

$.ajax({
    type: "GET",
    url:urll + parameter,
    async: true,
    crossDomain: true,
    accept: {
          pdf: 'application/pdf'
    },
    success:function(response, status, xhr){

        alert("Response: "+response);
        alert("Status: "+status);
        alert("Xhr: "+xhr);

        // check for a filename
        var filename = "";
        var disposition = xhr.getResponseHeader('Content-Disposition');
        if (disposition && disposition.indexOf('attachment') !== -1) {
            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            var matches = filenameRegex.exec(disposition);
            if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
        }

        var type = xhr.getResponseHeader('Content-Type');
        var blob = new Blob([response], { type: type });

        if (typeof window.navigator.msSaveBlob !== 'undefined') {
            // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
            window.navigator.msSaveBlob(blob, filename);
        } else {
            var URL = window.URL || window.webkitURL;
            var downloadUrl = URL.createObjectURL(blob);

            if (filename) {
                // use HTML5 a[download] attribute to specify filename
                var a = document.createElement("a");
                // safari doesn't support this yet
                if (typeof a.download === 'undefined') {
                    //window.location = downloadUrl;
                    window.open(downloadUrl, '_blank');
                } else {                        
                    a.href = downloadUrl;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.setAttribute("target","_blank");
                    a.click();
                }
            } else {
                //window.location = downloadUrl;
                window.open(downloadUrl, '_blank');
            }

            setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
        }
    },
    error: function(xhr,status,error){
        alert("error "+xhr+" "+error+" "+status);
    }
});

Answer 1

As I understand, you use GET and need a pdf file in a new tab. Soo...Why don't you just open this url in a new window like this

var fullUrl = urll + parameter;
window.open(fullUrl);

Answer 2

I had a similar problem using AngularJS (both $resource and $http). The solution in my case was to set responseType: 'arraybuffer' . This is part of the XMLHttpRequest (see https://xhr.spec.whatwg.org/#interface-xmlhttprequest ) but it is not exposed by jQuery.

You can add it to jQuery using this plugin: https://github.com/henrya/js-jquery/tree/master/BinaryTransport

As I said, that's what worked for me in AngularJS. Hopefully it's the solution you're looking for as well :)