JavaScript Crear y guardar archivo

Harshit Jindal 12 octubre 2023
JavaScript Crear y guardar archivo

Este tutorial enseña cómo crear y guardar un archivo en JavaScript.

Es fácil crear archivos y almacenarlos en el lado del servidor NodeJS, pero hay pocas opciones para hacerlo en el lado del cliente. En este tutorial, escribimos una función personalizada que nos ayuda a crear archivos usando datos y luego guardarlos. En los navegadores modernos, obtenemos una función llamada msSaveOrOpenBlob que nos ayuda a guardar un archivo. Pero en los navegadores más antiguos, primero generamos un enlace al archivo y luego lo descargamos agregando el atributo download en la etiqueta de anclaje.

function downloadFiles(data, file_name, file_type) {
  var file = new Blob([data], {type: file_type});
  if (window.navigator.msSaveOrOpenBlob)
    window.navigator.msSaveOrOpenBlob(file, file_name);
  else {
    var a = document.createElement('a'), url = URL.createObjectURL(file);
    a.href = url;
    a.download = file_name;
    document.body.appendChild(a);
    a.click();
    setTimeout(function() {
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }, 0);
  }
}

En la función anterior, verificamos si el navegador tiene soporte para msSaveOrOpenBlob, y si lo encuentra, lo usamos para guardar el archivo. De lo contrario, creamos una etiqueta de anclaje que apunta al archivo creado. Agregamos el atributo de descarga a la etiqueta de anclaje y adjuntamos esa etiqueta al cuerpo del documento. Usamos JavaScript para hacer clic en él, lo que desencadena la descarga, y de esta manera guardamos el archivo. Luego eliminamos esa etiqueta de anclaje del cuerpo y revocamos la URL creada.

Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn