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''
})...