Error de Chrome al descargar el archivo a través del iframe

Question

Estoy enviando datos JSON a un servidor. El servidor genera un archivo PDF y responde con la URL a ese archivo PDF. Luego hago otra solicitud al servidor para descargar el archivo PDF. Para realizar la descarga, creo un iframe oculto y establezco el origen en la URL del PDF. Tenga en cuenta que quiero que el navegador del usuario permanezca en la misma página y se descargue en segundo plano. Se pueden encontrar más detalles sobre lo que estoy haciendo y la solución que encontré en this SO question.

Cada vez que uso esta técnica en Chrome, todo funciona bien. Pero al mirar la consola del desarrollador de Chrome, veo el mensaje de error Failed to load resource. ¿Hay alguna manera de hacer esto de manera diferente para que no obtenga estos errores?

Puede verse un muy simple y funcional example of the problem in action en jsfiddle. Simplemente haga clic en el botón Descargar PDF y mire su consola de Chrome.

El código de esa página es el siguiente:

$(document).ready(function() { 
    var downloadFile = function(url){ 
     var iframe = $("iframe#download"); 
     if (!iframe.length) { 
      iframe = $("<iframe id='download' style='display:none;'/>"); 
      $("body").append(iframe); 
     } 
     iframe.attr("src", url); 
    }; 

    $("button").click(function() {  
     downloadFile("http://www.education.gov.yk.ca/pdf/pdf-test.pdf"); 
    }); 
}); 

Answer 1

Otros encuestados han sugerido cambiar el encabezado de tipo de contenido, que debería funcionar igual de bien, pero hay un encabezado de respuesta específica para instruir al navegador cómo tratar un archivo.

Lo que sigue debe obligar al pdf para ser descargado en lugar de que se muestra en el navegador:

"Content-Disposition: attachment; filename = [nombre de su archivo]"

Answer 2

mover su función fuera de document.ready ...

funciones generales deben estar siempre fuera ... y debe decirse que dondequiera se necesita

$(document).ready(function() {  

    $("button").click(function() {  
     downloadFile("http://www.education.gov.yk.ca/pdf/pdf-test.pdf"); 
    }); 
}); 

    var downloadFile = function(url){ 
      var iframe = $("iframe#download"); 
      if (!iframe.length) { 
       iframe = $("<iframe id='download' style='display:none;'/>"); 
       $("body").append(iframe); 
      } 
      iframe.attr("src", url); 
     }; 

Answer 3

he cambiado el src de la imagen a uno en mi propio servidor web y establecer el "tipo de contenido" de la cabecera de la respuesta a "application/octet-stream" en lugar de "aplic ation/pdf ", y se descargó correctamente en Chrome. Debo señalar que el error todavía apareció en la consola ("Error al cargar el recurso"), pero me incitó a descargar el archivo de todos modos.

Answer 4

Esto está fuera de mi cabeza, creo que me he encontrado con el mismo problema anteriormente. Cuando el iframe se agrega por primera vez al dom, no tiene src, lo que hace que Chrome "NO CARGUE EL RECURSO".

Trate de añadir un src inicial para el iframe -

iframe = $("<iframe id='download' src='about:blank' style='display:none;'/>"); 

Eso debería hacerlo yo creo. (Puede rechazarme un billón de veces si está mal :))

Answer 5

Chrome tiene un built-in PDF espectador. Cuando configuras el src del iframe, Chrome simplemente intenta mostrar el archivo PDF. Como está configurado en display:none, la descarga se cancela y usted recibe ese mensaje.

Pruebe la configuración display a algo que no sea none y coloque el iframe fuera de la pantalla con position:absolute.

Answer 6

var downloadFile = function(url){ 
    var iframe = $("iframe#download"); 
    if (!iframe.length) { 
     iframe = $("<iframe id='download' style='display:none;'/>"); 
     $("body").append(iframe); 
    } 
    iframe.attr("src", url); 
    iframe.on('load',function(){ 
      console.log("error") 
    }); 
}; 

U simplemente prueba esto, funciona, pero esta no es una forma correcta de resolver este problema ...