¿Cómo puedo crear un enlace de descarga en HTML?

Tengo una idea básica de HTML. Quiero crear el enlace de descarga en mi sitio web de muestra, pero no tengo idea de cómo crearlo. ¿Cómo hago un enlace para descargar un archivo en lugar de visitarlo?

Esta respuesta está desactualizada. Ahora tenemos el downloadatributo . (vea también este enlace a MDN )

Si por "el enlace de descarga" se refiere a un enlace a un archivo para descargar, use

  <a href="http://example.com/files/myfile.pdf" target="_blank">Download</a>

la target=_blankhará aparecer una nueva ventana del navegador antes de que comience la descarga. Esa ventana generalmente se cerrará cuando el navegador descubra que el recurso es una descarga de archivos.

Tenga en cuenta que los tipos de archivos conocidos por el navegador (por ejemplo, imágenes JPG o GIF) generalmente se abrirán dentro del navegador.

Puede intentar enviar los encabezados correctos para forzar una descarga como se describe, por ejemplo, aquí . (para ello se requiere una secuencia de comandos del lado del servidor o acceso a la configuración del servidor).

En los navegadores modernos que admiten HTML5, es posible lo siguiente:

<a href="link/to/your/download/file" download>Download link</a>

También puedes usar esto:

<a href="link/to/your/download/file" download="filename">Download link</a>

Esto le permitirá cambiar el nombre del archivo que se está descargando.

Además (o en reemplazo) del <a downloadatributo de HTML5 ya mencionado,
el comportamiento de descarga al disco del navegador también puede ser activado por el siguiente encabezado de respuesta http:

Content-Disposition: attachment; filename=ProposedFileName.txt;

Esta era la forma de hacerlo antes de HTML5 (y aún funciona con navegadores compatibles con HTML5).

Un enlace de descarga sería un enlace al recurso que desea descargar. Se construye de la misma manera que cualquier otro enlace sería:

<a href="path to resource.name of file">Link</a>

<a href="files/installer.exe">Link to installer</a>

Para vincular al archivo, haga lo mismo que cualquier otro vínculo de página:

<a href="...">link text</a>

Para forzar la descarga de cosas incluso si tienen un complemento incrustado (Windows + QuickTime = ugh), puede usar esto en su htaccess / apache2.conf:

AddType application/octet-stream EXTENSION

Este hilo es probablemente antiguo por ahora, pero esto funciona en html5 para mi archivo local.

Para pdfs:

<p><a href="file:///........example.pdf" download target="_blank">test pdf</a></p>

Esto debería abrir el pdf en una nueva ventana y permitirle descargarlo (al menos en Firefox). Para cualquier otro archivo, simplemente conviértalo en el nombre del archivo. Sin embargo, para las imágenes y la música, querrás almacenarlas en el mismo directorio que tu sitio. Entonces sería como

<p><a href="images/logo2.png" download>test pdf</a></p>

El atributo de descarga no funciona en IE, ignora la "descarga" por completo. La descarga no funciona en Firefox si href apunta a un sitio remoto. Entonces el ejemplo de Odin no funciona en Firefox 41.0.2.

Hay una sutileza más que puede ayudar aquí.

Quiero tener enlaces que permitan la reproducción y visualización en el navegador, así como uno solo para descargar. El nuevo atributo de descarga está bien, pero no funciona todo el tiempo porque la compulsión del navegador para reproducir o mostrar el archivo sigue siendo muy fuerte.

PERO ... esto se basa en el examen de la extensión en el nombre de archivo de la URL. No desea jugar con el mapeo de extensión del servidor porque desea entregar el mismo archivo de dos maneras diferentes. Entonces, para la descarga, puede engañarlo haciendo un enlace suave del archivo a un nombre que sea opaco a esta asignación de extensión, señalándolo y luego usando la función de cambio de nombre de la descarga para corregir el nombre.

<a target="_blank" download="realname.mp3" href="realname.UNKNOWN">Download it</a>
<a target="_blank" href="realname.mp3">Play it</a>

Esperaba simplemente lanzar una consulta ficticia al final o ofuscar la extensión de otra manera funcionaría, pero lamentablemente, no lo hace.

El atributo de descarga es nuevo para la <a>etiqueta en HTML5

<a href="http://www.odin.com/form.pdf" download>Download Form</a>
o
<a href="http://www.odin.com/form.pdf" download="Form">Download Form</a>

Prefiero el primero, es preferible con respecto a cualquier extensión.

Puedes descargar de varias maneras puedes seguir mi camino. Aunque es posible que los archivos no se descarguen debido a que el permiso 'permitir ventanas emergentes' no está configurado, pero en su entorno, esto funcionará perfectamente

<div className="col-6">
                    <a  download href="https://www.w3schools.com/images/myw3schoolsimage.jpg" >Test Download </a>
                </div>

otro este también fallará debido a 'X-Frame-Options' a 'sameorigin'.

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download>
  <img src="https://www.w3schools.com/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>

Me gusta esto

<a href="www.yoursite.com/theThingYouWantToDownload">Link name</a>

Entonces, un archivo name.jpg en un sitio example.com se vería así

<a href="www.example.com/name.jpg">Image</a>

Sé que llego tarde, pero esto es lo que obtuve después de 1 hora de búsqueda

 <?php 
      $file = 'file.pdf';

    if (! file) {
        die('file not found'); //Or do something 
    } else {
       if(isset($_GET['file'])){  
        // Set headers
        header("Cache-Control: public");
        header("Content-Description: File Transfer");
        header("Content-Disposition: attachment; filename=$file");
        header("Content-Type: application/zip");
        header("Content-Transfer-Encoding: binary");
        // Read the file from disk
        readfile($file); }
    }

    ?>

y para el enlace descargable hice esto

<a href="index.php?file=file.pdf">Download PDF</a>