JavaScript Crear y guardar archivo

Harshit Jindal 12 octubre 2023 JavaScript
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.

¿Disfrutas de nuestros tutoriales? Suscríbete a DelftStack en YouTube para apoyarnos en la creación de más guías en vídeo de alta calidad. Suscríbete
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