javascript - pagina - crear botones en html y css
Cómo activar una descarga de archivos al hacer clic en un botón HTML o JavaScript (19)
Con jQuery:
$("#fileRequest").click(function() {
// // hope the server sets Content-Disposition: attachment!
window.location = ''file.doc'';
});
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 archivos 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 vea como un botón, usar scripts de back-end o meterse con los encabezados de servidor o tipos mime.
Creo que esta es la solución que estabas buscando.
<button type="submit" onclick="window.location.href=''file.doc''">Download!</button>
Hade un caso donde mi Javascript generó un archivo CSV. Como no hay una URL remota para descargarla, 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);
}
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 es seguro para trabajar!
Esto es lo que finalmente funcionó para mí desde que se determinó el archivo a descargar cuando se carga 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();">
HTML:
<button type="submit" onclick="window.open(''file.doc'')">Download!</button>
He investigado un poco y he encontrado la mejor respuesta. Puedes activar una descarga usando el nuevo atributo de download HTML5.
<a href="path_to_file" download="proposed_file_name">Download</a>
Dónde :
-
path_to_filees una ruta absoluta o relativa, -
proposed_file_nameel nombre de archivo en el que se guardará (puede estar en blanco y, por defecto, el nombre de archivo real).
Espero que esto sea de ayuda.
Hilo viejo pero le falta una solución js simple:
let a = document.createElement(''a'')
a.href = item.url
a.download = item.url.split(''/'').pop()
a.click()
Otra forma de hacerlo en caso de que tenga una URL compleja como file.doc?foo=bar&jon=doe es agregar un campo oculto dentro del formulario
<form method="get" action="file.doc">
<input ty=''hidden'' name=''foo'' value=''bar''/>
<input ty=''hidden'' name=''john'' value=''doe''/>
<button type="submit">Download Now</button>
</form>
Inspirado en la respuesta @Cfreak que no está completa
Para el botón que puedes hacer.
<form method="get" action="file.doc">
<button type="submit">Download!</button>
</form>
Para mí, el botón de agregar en lugar del texto de anclaje funciona muy bien.
<a href="http://www.example.com/folder1/file.doc">Download</a>
Puede que no esté bien según la mayoría de las reglas, pero se ve bastante bien.
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>
Puedes hacerlo con "truco" con iframe invisible. Cuando configura "src", el navegador reacciona como si hiciera clic en un enlace con el mismo "href". Al contrario de la solución con formulario, le permite integrar lógica adicional, por ejemplo, activar la descarga después de un tiempo de espera, cuando se cumplen algunas condiciones, etc.
También es muy silencioso, 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";
}
Qué pasa:
<input type="button" value="Download Now!" onclick="window.location = ''file.doc'';">
Si está buscando una solución de JavaScript de vainilla (sin jQuery) y sin usar el atributo HTML5, puede probar esto.
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>
Si no puede usar el formulario, otro enfoque con downloadjs ajusta bien. Downloadjs usa blob y el archivo html 5 API bajo el capó:
{downloadjs (url, nombre de archivo)}) />
* es la sintaxis jsx / react, pero se puede usar en HTML puro
Si usa la etiqueta <a> , no olvide usar la url completa que lleva al archivo, es decir:
<a href="file.doc"><button>Download!</button></a>
Use un enlace normal y ajústelo para que se vea como un botón, usando CSS.
Versión Bootstrap
<a class="btn btn-danger" role="button" href="path_to_file" download="proposed_file_name">Download</a>
Documentado en documentos de Bootstrap 4 , y también funciona en Bootstrap 3.
<a href="complexDownload" download="file.doc" onclick="this.href=''file.doc'';">
<button>Download <i>File.doc</i> Now!</button>
</a>
No parece funcionar en Safari, pero sí funcionó en Chrome. Además, cambiar el atributo href del enlace una vez que el usuario hizo clic en él pareció hacerlo funcionar en versiones anteriores de IE, pero no en las últimas versiones de IE o Edge.