2010-05-20 64 views
8

bastante embarazoso cantidad de tiempo que paso tratando de llegar a descargar un archivo zip desde un botón ....jQuery descargar un archivo zip desde un botón?

<button type='button' id='button-download'>download zipfile</button> 


$("#button-download").live("click", function() { 
    $.get("http://localhost/admin/zip/002140.zip"); // doesn't work? 
}) 

necesito algo a prueba de balas aquí, es por eso que pido aquí, gracias.

Respuesta

7

Utilice una llanura:

<a href="http://localhost/admin/zip/002140.zip" id="button-download">download zipfile</a> 

enlace. Entonces funcionará bien (incluso a prueba de balas) sin JavaScript disponible. También ofrece más de las ventajas tradicionales que los usuarios pueden esperar de un enlace de descarga, como hacer clic con el botón derecho del ratón en el menú Guardar como, o arrastrar y soltar.

Por supuesto, puede usar CSS para que parezca un botón en lugar de un enlace. Pero lo que realmente es, es un enlace. Así que así es como debe marcarse.

+0

Gracias, estoy usando esto como la copia de seguridad en "problemas de descarga?" Está en JavaScript pero es un panel de administración y mis usuarios necesitan JavaScript habilitado en cualquier lugar. – FFish

5

Se debe establecer la propiedad location.href para causar la navegación:

$("#button-download").live("click", function() { 
    location.href = "http://localhost/admin/zip/002140.zip"; 
}); 

También podría tener un simple elemento <a>, estilo como si se tratara de un botón, de esa manera incluso los usuarios que ha inhabilitado JavaScript será capaz de descargar el archivo

+0

¡Gee, location.href, es hora de irse a la cama! – FFish

+0

En realidad tengo un problema, al usar esto o también window.location estoy perdiendo mi DOM creado por jQuery. Eso no es un problema aunque lo peor es que la página va -1, como presionar el botón Atrás. ¿WTF? – FFish

+0

Si visitas aquí desde 5 años después de esta publicación, '.live()' se eliminó en jquery 1.9, por lo tanto, usa '.on()'. (gracias PaparazzoKid a continuación) –

1

Eso está enviando una solicitud de AJAX.

No he intentado esto, pero debería funcionar en teoría. Si intenta ir a la ubicación de un archivo que se descarga, le solicita que lo descargue en lugar de llevarlo a esa página.

<button type='button' id='button-download'>download zipfile</button> 


$("#button-download").live("click", function() { 
    window.location = "http://localhost/admin/zip/002140.zip"; 
}) 
+1

Para futuros navegantes, en lugar de '.live()' use '.on()'. '.live()' fue eliminado en jQuery 1.9. – TheCarver

1

Llegué tarde a la fiesta, pero pensé en compartir mi solución como nadie más lo hizo.

Puede tener lo mejor de ambos mundos; un simple enlace HTML y una función JS, sin perder los usuarios que no son JS.

<a id="download" href="http://www.example.com/download.zip">Download</a> 

$("#download").on("click", function(e) { 

    // cancel the link's original functionality 
    e.preventDefault(); 

    // do something before downloading 
    alert("Thanks for downloading!"); 

    // download file 
    location.href = "http://www.example.com/download.zip"; 

}); 
Cuestiones relacionadas