Descargar archivo usando jQuery


113

¿Cómo puedo solicitar una descarga para un usuario cuando hace clic en un enlace?

Por ejemplo, en lugar de:

<a href="uploads/file.doc">Download Here</a>

Podría usar:

<a href="#">Download Here</a>

 $('a').click... //Some jquery to download the file

De esta manera, Google no indexa mis archivos HREF y privados.

¿Se puede hacer esto con jQuery? Si es así, ¿cómo? ¿O debería hacerse con PHP o algo así?


Posible duplicado del archivo
Liam

Respuestas:


165

Podría sugerir esto, como una solución más degradante, usando preventDefault:

$('a').click(function(e) {
    e.preventDefault();  //stop the browser from following
    window.location.href = 'uploads/file.doc';
});

<a href="no-script.html">Download now!</a>

Incluso si no hay Javascript, al menos de esta manera el usuario obtendrá algunos comentarios.


20
jQuery es la respuesta.
Esteban Küber

Gracias, esto es lo que estaba buscando. Normalmente uso "preventDefault", simplemente lo dejé fuera porque estaba siendo vago. ;-)
Dodinas

2
Funciona muy bien, pero obtiene algunos errores de tipo MIME. ¿Tienes curiosidad por saber si hay alguna forma de superarlos?
Nathan Hangen

2
¿Resolviste la advertencia de tipo MIME? Recibo "Recurso interpretado como Documento pero transferido con tipo MIME ..." Muchas gracias.
user1824269

22

Si no desea que los motores de búsqueda indexen ciertos archivos, puede usar robots.txt para decirles a las arañas web que no accedan a ciertas partes de su sitio web.

Si confía solo en javascript, algunos usuarios que navegan sin él no podrán hacer clic en sus enlaces.


1
Es bueno saber sobre el 'robots.txt'. Gracias.
Dodinas

@Rob, si necesita que las URL sean "privadas", robots.txtno ayudaría porque aún se almacenarían en el historial del navegador y en los servidores intermediarios.
Pacerier

3
6 años después: ¿navegar sin javascript? - Bueno, también podrías ir a caminar.
low_rents

casi 10 años después: ¡lo mismo! o
toing_toing

18

Aquí hay un buen artículo que muestra muchas formas de ocultar archivos de los motores de búsqueda:

http://antezeta.com/news/avoid-search-engine-indexing

JavaScript no es una buena forma de no indexar una página; no evitará que los usuarios se vinculen directamente a sus archivos (y así lo revelen a los rastreadores) y, como dijo Rob, no funcionaría para todos los usuarios.
Una solución fácil es agregar el rel="nofollow"atributo, aunque nuevamente, no está completo sin robots.txt.

<a href="uploads/file.doc" rel="nofollow">Download Here</a>

2
Aquí hay otro artículo de la Ayuda de Google para webmasers que me ayuda mucho a comprender el rel "nofollow" o "yo".
000

12

Sí, tendría que cambiar window.location.href por la URL del archivo que desea descargar.

window.location.href = 'http://www.com/path/to/file';

¿Qué pasa si la extensión del archivo es .html, en lugar de descargarlo, se redireccionará a ese archivo html?
Kaleem Nalband

9
 var link=document.createElement('a');
 document.body.appendChild(link);
 link.href=url;
 link.click();

no hay error, solo la descarga no estaba comenzando. Creo que tal vez me falta algún punto al crear el elemento.
shyammakwana.me

verifique en su html si un elemento <a> fue creado o no y verifique el enlace de su archivo.
EL missaoui habib

una etiqueta estaba allí, en el cuerpo. y haciendo clic manualmente en la imagen de descarga. sin embargo, no es necesario ahora, utilicé esta solución vanillaJS.
shyammakwana.me

no hay ninguna razón para no funcionar si el enlace es correcto. pruebe el enlace directamente en la navegación
EL missaoui habib

$('blah').each(function(){ $('body').append('<a href="'+xxx+'" download="'+dynamicname+'" />'); }) $('a').trigger('click');Yo usé eso.
shyammakwana.me

7
  • Usando la función jQuery

        var valFileDownloadPath = 'http//:'+'your url';
    
       window.open(valFileDownloadPath , '_blank');

6

Al indicar window.location.href = 'uploads/file.doc';que muestra dónde almacena sus archivos. Por supuesto, puede usar .htacess para forzar el comportamiento requerido para los archivos almacenados, pero esto no siempre puede ser complicado ...

Es mejor crear un archivo php del lado del servidor y colocar este contenido en él:

header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename='.$_REQUEST['f']);
readfile('../some_folder/some_subfolder/'.$_REQUEST['f']); 
exit;

Este código devolverá CUALQUIER archivo como descarga sin mostrar dónde lo almacena.

Abre este archivo php a través de window.location.href = 'scripts/this_php_file.php?f=downloaded_file';


Esta solución me ayudó a solucionar los problemas de descarga en mi sitio, ¡gracias!
Denniz

3

Los iframes ocultos pueden ayudar


var redeemFrame = document.createElement ("iframe"); var src = "doDownload.php"; redeemFrame.setAttribute ("src", src); redeemFrame.setAttribute ("estilo", "pantalla: ninguno"); document.body.appendChild (redeemFrame);
DarthRez

3

Le sugiero que use el evento mousedown, que se llama ANTES del evento de clic. De esa manera, el navegador maneja el evento de clic de forma natural, lo que evita cualquier rareza del código:

(function ($) {


    // with this solution, the browser handles the download link naturally (tested in chrome and firefox)
    $(document).ready(function () {

        var url = '/private/downloads/myfile123.pdf';
        $("a").on('mousedown', function () {
            $(this).attr("href", url);
        });

    });
})(jQuery);

0

Consulte aquí una publicación similar sobre el uso de jQuery para borrar formularios: Restablecimiento de un formulario de varias etapas con jQuery

También puede encontrarse con un problema en el que los valores se repoblan mediante la pila de valores de struts. En otras palabras, envía su formulario, hace lo que sea en la clase de acción, pero no borra los valores de campo relacionados en la clase de acción. En este escenario, el formulario parecería mantener los valores que envió anteriormente. Si los persiste de alguna manera, simplemente anule cada valor de campo en su clase de acción después de persistir y antes de devolver SUCCESS.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.