1

This is something that I feel should be very simple, but haven't been able to solve so far.

I'm working with a vendor system which has implemented a very basic API for our use. We send a GET request with an authentication token in the header, the server then returns us a PDF document in the body of the response.

All I want to do is display the PDF in the browser, any method would be fine, in a new tab or iframe etc.

I have managed to get this working in both firefox and chrome utilising the answer at: Request a file with a custom header But this does not work with IE 11, and IE11 is the only supported browser within our organisation.

Request headers are: 

   Accept:*/*
   Accept-Encoding:gzip, deflate, sdch
   Accept-Language:en-US,en;q=0.8
   Authorization:bearer ZYFXVEnE2Uf3kU0Ud8rFvq5pbV2IfrNzzJBAu8lI8p73reZ6-vdeChtXlGGN7NwUNvo2-5LKNd9FniZlcElplycBL4f2qu6EaHkO-Xb_-G5DR07p62UYq_DErl937Yc-mpLMphBBHC7-0uqYNfrivkbc3xeOvEBnRRtfagz7dYJ8EJive6QjwWjYgGj9HRQUAbcOggbJGxZDXmrlWTveUji-5CKb7w5guBUOhjyDkyB53r8rm2qptGfsp1NsKLU4h4kEDlNaxbbzB_oJQbuyIoG80BTnP-NB0bqOtPJ09FrM9AFVfrdJM0fRwS3BfxRgVNm01FgW-jQwp1GgzeAbS-3uRR1G92Y-rw6L8R17l31PPFlV_CNeK_oAG-AJldmn2lgv6a6l6Cj9s2OqOfXyX09iZIN6vIKXAqedSWb708GTNfJ7iLKjdGVYCYW1zZ9IZKXMyeMoK7nW_rDuMzmoXeLY3tGFeeOf27vuI4RdSaGVCD5kIynrYPe8fU1sp-KZE0i1aJ0qqQ9g7Nvg42ZsFIFHBqhRIY-k4Dxjm1jPloGNbFqhdc-GK5LYHcg_u3DwFbSUKWpXdzCPBn43qJ_yVfDqffQDsDafvGDKP0U4duq0eYNXYWKnB8VR7xytykWjXAj70a9SFPRocqhugiqJIwBMS6a5gfqlUssgEnCfhVGE_eGUSGrYdCvfHHKb-13O9m6dXomYFuK8Ql7H73MjDgzTihtYLULh3nAHrU-FehrBRsUeKpc32hKUVhVvTlw2lTOUcMhlC99EKPMT0hZhLy4t8e-icL2aqcKdN-S1rt-HU60cukw4SnLyM_Nfa-ytD8vtUwMLAV9K5h4DdK7H3LpfbQNbaHRfBjRk5aQ7Q2o
   Content-type:application/json
   Host: /vendor_URL/
   Origin:null
   Proxy-Connection:keep-alive
   User-Agent:Mozilla/5.0 (Windows NT 6.3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36

Response Headers:

   Accept-Ranges:none
   Access-Control-Allow-Origin:*
   Cache-Control:no-cache
   Content-Disposition:inline; filename=GoToPlan.pdf
   Content-Length:372483
   Content-Type:application/pdf
   Date:Wed, 26 Oct 2016 19:41:04 GMT
   Expires:-1
   Pragma:no-cache
   Proxy-Connection:keep-alive
   Server:Microsoft-IIS/7.5
   Via:1.1 /proxy_URL/
   X-AspNet-Version:4.0.30319
   X-Powered-By:ASP.NET

Code that currently works in firefox and Chrome:

   var document_http = new XMLHttpRequest();    
        var url = /document_URL/
        document_http.open("GET", url, true);
        //DOn'y know why, but needs this to display correctly
        document_http.overrideMimeType( "application/octet-stream; charset=x-user-defined;" );
        //Send the proper header information along with the request
        document_http.setRequestHeader("Content-type", "application/json");
        document_http.setRequestHeader("Authorization", "bearer " + auth_response[3]);

        document_http.onreadystatechange = function() {//Call a function when the state changes.
            if (document_http.readyState == 4 & document_http.status == 200) {
                var data = toBinaryString(this.responseText);
                data = "data:application/pdf;base64,"+btoa(data);
                window.open(data);

            }
        }           
        document_http.send(params);

function toBinaryString(data) {
var ret = [];
var len = data.length;
var byte;
for (var i = 0; i < len; i++) { 
    byte=( data.charCodeAt(i) & 0xFF )>>> 0;
    ret.push( String.fromCharCode(byte) );
}

return ret.join('');

}

Community
  • 1
  • 1
R.Gush
  • 31
  • 4

1 Answers1

1

Data URIs are subject to browsers' limitations on URLs. You can't reliably use them to display long content.

You can load the document as a blob, then use it in a iframe:

var xhr = new XMLHttpRequest();
xhr.open("GET", "/path/to/file.pdf");
xhr.responseType = "blob";
xhr.onload = function(res) {
    iframe.src = URL.createObjectURL(res.response);
};
xhr.send();

This should work in every major browser. URL.createObjectURL will create a string of the form blob:http://host/unique-id that is a reference to the blob object.

Remember to call URL.revokeObjectURL on the given string when you're done showing the PDF. This will discard the reference to the blob, which can be safely garbage collected.

MaxArt
  • 22,200
  • 10
  • 82
  • 81