Cómo activar una descarga de archivo al hacer clic en un botón HTML o JavaScript

Esto es una locura, pero no sé cómo hacerlo, y debido a lo comunes que son las palabras, es difícil encontrar lo que necesito en los motores de búsqueda. Estoy pensando que esto debería ser fácil de responder.

Quiero una descarga de archivo simple, que haría lo mismo que esto:

<a href="file.doc">Download!</a>

Pero quiero usar un botón HTML, por ejemplo, cualquiera de estos:

<input type="button" value="Download!">
<button>Download!</button>

Del mismo modo, ¿es posible activar una descarga simple a través de JavaScript?

$("#fileRequest").click(function(){ /* code to download? */ });

Definitivamente no estoy buscando una manera de crear un ancla que se parezca a un botón, usar scripts de back-end o jugar con encabezados de servidor o tipos mime.

Para el botón que puedes hacer

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>

Puede activar una descarga con el downloadatributo HTML5 .

<a href="path_to_file" download="proposed_file_name">Download</a>

Dónde:

• path_to_filees una ruta que se resuelve en una URL en el mismo origen . Eso significa que la página y el archivo deben compartir el mismo dominio, subdominio, protocolo (HTTP frente a HTTPS) y puerto (si se especifica). Las excepciones son blob:y data:(que siempre funcionan) y file:(que nunca funciona).
• proposed_file_namees el nombre de archivo para guardar. Si está en blanco, el navegador usa de manera predeterminada el nombre del archivo.

Documentación: MDN , HTML Standard en la descarga , HTML Standard endownload , CanIUse

HTML:

<button type="submit" onclick="window.open('file.doc')">Download!</button>

Con jQuery:

$("#fileRequest").click(function() {
    // // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});

Hilo antiguo pero le falta una solución js simple:

let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)

Puede hacerlo con "truco" con iframe invisible. Cuando configura "src", el navegador reacciona como si hiciera clic en un enlace con el mismo "href". A diferencia de la solución con formulario, le permite incrustar lógica adicional, por ejemplo, activar la descarga después del tiempo de espera, cuando se cumplen algunas condiciones, etc.

También es muy ingenioso, no hay una nueva ventana / pestaña parpadeante como cuando se usa window.open.

HTML:

<iframe id="invisible" style="display:none;"></iframe>

Javascript:

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}

Versión Bootstrap

<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download
</a>

Documentado en Bootstrap 4 docs , y funciona en Bootstrap 3 también.

Creo que esta es la solución que estabas buscando

<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

Tengo un caso en el que mi Javascript genera un archivo CSV. Como no hay una URL remota para descargarlo, uso la siguiente implementación.

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}

Qué pasa:

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">

Puede ocultar el enlace de descarga y hacer que el botón haga clic en él.

<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>

Si está buscando una solución vainilla de JavaScript (sin jQuery) y sin usar el atributo HTML5, puede intentarlo.

const download = document.getElementById("fileRequest");

download.addEventListener('click', request);

function request() {
    window.location = 'document.docx';
}

.dwnld-cta {
    border-radius: 15px 15px;
    width: 100px;
    line-height: 22px
}

<h1>Download File</h1>
<button id="fileRequest" class="dwnld-cta">Download</button>

Esto es lo que finalmente funcionó para mí, ya que el archivo a descargar se determinó cuando se cargó la página.

JS para actualizar el atributo de acción del formulario:

function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}

Llamando a JS para actualizar el atributo de acción del formulario:

<body onLoad="setFormAction();">

Etiqueta de formulario con el botón de enviar:

<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>

Lo siguiente NO funcionó:

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">

Si no puede usar el formulario, otro enfoque con downloadjs encaja bien. Downloadjs usa blob y html 5 file API bajo el capó:

{downloadjs (url, nombre de archivo)}) />

* es la sintaxis jsx / react, pero se puede usar en html puro

En cualquier lugar entre sus etiquetas <body>y </body>, coloque un botón con el siguiente código:

<button>
    <a href="file.doc" download>Click to Download!</a>
</button>

¡Esto seguramente funcionará!

Otra forma de hacerlo en caso de que tenga una URL compleja como file.doc?foo=bar&jon=doeagregar campo oculto dentro del formulario

<form method="get" action="file.doc">
  <input type="hidden" name="foo" value="bar" />
  <input type="hidden" name="john" value="doe" />
  <button type="submit">Download Now</button>
</form>

inspirado en la respuesta @Cfreak que no está completa

puedes agregar etiquetas sin texto pero con enlace. y cuando hace clic en el botón como lo tiene en el código, simplemente ejecute la función $ ("yourlinkclass"). click ().

atributo de descarga hacerlo

 <a class="btn btn-success btn-sm" href="/file_path/file.type" download>
     <span>download </span>&nbsp;<i class="fa fa-download"></i>
 </a>

Si usa la <a>etiqueta, no olvide usar la URL completa que conduce al archivo, es decir:

<a href="http://www.example.com/folder1/file.doc">Download</a>

Para mí, el botón de anuncios en lugar del texto de anclaje funciona muy bien.

<a href="file.doc"><button>Download!</button></a>

Puede que no esté bien según la mayoría de las reglas, pero se ve bastante bien.