Usar HTML5 / Javascript para generar y guardar un archivo



Answers

Solución simple para navegadores listos para HTML5 ...

function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

Uso

download('test.txt', 'Hello world!');
Question

He estado jugando con WebGL últimamente, y he conseguido que un lector de Collada funcione. El problema es que es bastante lento (Collada es un formato muy detallado), así que voy a comenzar a convertir los archivos a un formato más fácil de usar (probablemente JSON). La cosa es que ya tengo el código para analizar el archivo en Javascript, ¡así que también puedo usarlo como mi exportador! El problema es guardar

Ahora, sé que puedo analizar el archivo, enviar el resultado al servidor y hacer que el navegador solicite el archivo del servidor como descarga. Pero, en realidad, el servidor no tiene nada que ver con este proceso en particular, ¿por qué involucrarse? Ya tengo el contenido del archivo deseado en la memoria. ¿Hay alguna manera de que pueda presentar al usuario una descarga usando javascript puro? (Lo dudo, pero también podría preguntar ...)

Y para ser claros: ¡no estoy intentando acceder al sistema de archivos sin el conocimiento del usuario! El usuario proporcionará un archivo (probablemente mediante arrastrar y soltar), el script transformará el archivo en memoria y se le pedirá al usuario que descargue el resultado. Todas las cuales deberían ser actividades "seguras" en lo que respecta al navegador.

[EDITAR]: No lo mencioné por adelantado, por lo que los carteles que respondieron "Flash" son lo suficientemente válidos, pero parte de lo que estoy haciendo es un intento de resaltar lo que se puede hacer con HTML5 puro ... así que Flash es en mi caso. (Aunque es una respuesta perfectamente válida para cualquiera que haga una aplicación web "real"). Siendo ese el caso, parece que no tengo suerte a menos que quiera involucrar al servidor. ¡Gracias de cualquier manera!




Puede generar un URI de datos . Sin embargo, existen limitaciones específicas del navegador.




Aquí hay un tutorial para exportar archivos como ZIP:

Antes de comenzar, hay una biblioteca para guardar archivos, el nombre de la biblioteca es fileSaver.js, puede encontrar esta biblioteca aquí. Comencemos, ahora, incluya las bibliotecas requeridas:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js" ></script>

Ahora copie este código y este código descargará un archivo zip con un archivo hello.txt con contenido Hello World. Si todo funciona bien, esto descargará un archivo.

<script type="text/javascript">
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "file.zip");
    });
</script>

Esto descargará un archivo llamado file.zip. Puede leer más aquí: http://www.wapgee.com/story/248/guide-to-create-zip-files-using-javascript-by-using-jszip-library




function download(content, filename, contentType)
{
    if(!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], {'type':contentType});
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
}



Encontré dos enfoques simples que funcionan para mí. Primero, usando un elemento ya hecho clic e inyectando los datos de descarga. Y segundo, generar un elemento a con los datos de descarga, ejecutar a.click() y eliminarlo nuevamente. Pero el segundo enfoque solo funciona si lo invoca una acción de clic del usuario. (Algunos) Bloqueo del navegador click() desde otros contextos, como al cargar o desencadenado después de un tiempo de espera (setTimeout).

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function linkDownload(a, filename, content) {
        contentType =  'data:application/octet-stream,';
        uriContent = contentType + encodeURIComponent(content);
        a.setAttribute('href', uriContent);
        a.setAttribute('download', filename);
      }
      function download(filename, content) {
        var a = document.createElement('a');
        linkDownload(a, filename, content);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    </script>
   </head>
  <body>
    <a href="#" onclick="linkDownload(this, 'test.txt', 'Hello World!');">download</a>
    <button onclick="download('test.txt', 'Hello World!');">download</button>
  </body>
</html>



Eche un vistazo a Downloadify de Doug Neiner, que es una interfaz de JavaScript basada en Flash para hacer esto.

Downloadify es una pequeña biblioteca JavaScript + Flash que permite generar y guardar archivos sobre la marcha, en el navegador, sin la interacción del servidor.




Puede usar localStorage. Este es el equivalente de Html5 de las cookies. Parece que funciona en Chrome y Firefox PERO en Firefox, necesitaba subirlo a un servidor. Es decir, las pruebas directamente en la computadora de mi casa no funcionaron.

Estoy trabajando en ejemplos HTML5. Ve a http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html y desplázate al laberinto. La información para volver a construir el laberinto se almacena utilizando localStorage.

Llegué a este artículo buscando HTML5 JavaScript para cargar y trabajar con archivos xml. ¿Es lo mismo que html y JavaScript más antiguos ???






Links