javascript - open - Cree y sirva correctamente PDF Blob a través de las API de archivos y URL de HTML5

window.download javascript

Question

Ok, digamos que tengo datos de documentos almacenados en algún lugar, tomemos arbitrariamente este pdf .

Problema # 1. Lo que quiero hacer es hacer una llamada AJAX a esta URL (porque necesito pasar algunos encabezados de autenticación y es de dominio cruzado). Luego tome los datos devueltos, cree una url de blob para ello, agregue un iFrame al DOM y dirija el src a la url de blob.

Actualmente mi código se ve así:

$.ajax({
  url:''http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf''
}).done(function(data){
   var file = new Blob([data], {type:''application/pdf''}),
       url = URL.createObjectURL(file),
       _iFrame = document.createElement(''iframe'');
      _iFrame.setAttribute(''src'', url);
      _iFrame.setAttribute(''style'', ''visibility:hidden;'');
      $(''#someDiv'').append(_iFrame);
});

Desafortunadamente, obtengo un ''Fallo al renderizar PDF'' en el iFrame.

Problema # 2. Me gustaría que esto resulte en un aviso de descarga de archivos. No estoy seguro de cómo garantizar esto, dado que los PDF, naturalmente, solo se mostrarán en el iFrame.

Answer 1

He usado la respuesta de @Ciantic para adaptar mi respuesta. He evitado usar iframe obj y el usuario puede descargar el archivo directamente desde la página.

var link = ''http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf'';
$("body").addClass("loading"); // adding the loading spinner class

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

Answer 2

jQuery.ajax actualmente no admite blobs, vea este informe de error # 7248 que está cerrado como wontfix.

Sin embargo, es fácil hacer XHR para blobs sin 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();

HTML5rocks descaradamente de HTML5rocks .

Si jQuery admite el tipo Blob , podría ser tan simple como:

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