Properly Create and Serve PDF Blob via HTML5 File and URL APIs

jQuery.ajax does not currently support blobs, see this bug report #7248 which is closed as wontfix.

However it's easy to do XHR for blobs without jQuery:

var xhr = new XMLHttpRequest();xhr.open('GET', 'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf', true);xhr.responseType = 'blob';xhr.onload = function(e) {  if (this.status == 200) {    // Note: .response instead of .responseText    var blob = new Blob([this.response], {type: 'application/pdf'}),        url = URL.createObjectURL(blob),        _iFrame = document.createElement('iframe');    _iFrame.setAttribute('src', url);    _iFrame.setAttribute('style', 'visibility:hidden;');    $('#someDiv').append(_iFrame)          }};xhr.send();

Shamelessly copied from HTML5rocks.

If jQuery did support the Blob type, it could be as simple as:

$.ajax({  url:'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf',  dataType:'blob'})...

I have used @Ciantic answer to adapt my answer. I have avoided using iframe obj and the user can download the file directly from the page.

var link = 'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf';$("body").addClass("loading"); // adding the loading spinner classvar xhr = new XMLHttpRequest();xhr.open('GET',link,true);xhr.responseType = 'blob';        xhr.onload = function(e){                 if (this.status == 200) {                    var a = document.createElement('a');                    var url = window.URL.createObjectURL(new Blob([this.response], {type: 'application/pdf'}));                    a.href = url;                    a.download = 'report.pdf';                    a.click();                    window.URL.revokeObjectURL(url);                    $('body').removeClass("loading"); //removing the loading spinner class                  }else{                      $('body').removeClass("loading") //removing the loading spinner class                      console.log(this.status);                      alert('Download failed...!  Please Try again!!!');                  }            };            xhr.send();

var src_url = your url here;var contentDisposition = 'AlwaysInline';var src_new = src_url.replace(/(ContentDisposition=).*?(&)/, '$1' + contentDisposition + '$2');

By doing this you will be able to view pdf instead of downloading it,

Header ContentDisposition should be 'AlwaysInline' then only it displays your file instead of downloading it.