download cómo insertar - Usando HTML5 / Javascript para generar y guardar un archivo





7 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!');
type= text/javascript src=

Últimamente he estado jugando con WebGL y he conseguido que funcione un lector Collada. El problema es que es bastante lento (Collada es un formato muy detallado), así que comenzaré a convertir 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 el ahorro.

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

Y para ser claros: ¡No estoy intentando acceder al sistema de archivos sin que los usuarios lo sepan! El usuario proporcionará un archivo (probablemente mediante arrastrar y soltar), el script transformará el archivo en la memoria y se le solicitará al usuario que descargue el resultado. Todo lo cual debería ser una actividad "segura" en lo que concierne al navegador.

[EDIT]: no lo mencioné por adelantado, por lo que los carteles que respondieron "Flash" son 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 Justo en mi caso. (Aunque es una respuesta perfectamente válida para cualquiera que esté haciendo una aplicación web "real"). Por lo que parece, no tengo suerte a menos que quiera involucrar al servidor. ¡Gracias de cualquier manera!




Guardando archivos grandes

Los URI de datos largos pueden dar problemas de rendimiento en los navegadores. Otra opción para guardar los archivos generados del lado del cliente, es poner su contenido en un objeto Blob (o Archivo) y crear un enlace de descarga usando URL.createObjectURL(blob) . Esto devuelve una URL que se puede utilizar para recuperar el contenido del blob. El blob se almacena dentro del navegador hasta que se URL.revokeObjectURL() a la URL.revokeObjectURL() en la URL o se cierre el documento que lo creó. La mayoría de los navegadores web tienen soporte para URL de objetos , Opera Mini es el único que no los admite.

Forzando una descarga

Si los datos son texto o una imagen, el navegador puede abrir el archivo, en lugar de guardarlo en el disco. Para hacer que el archivo se descargue al hacer clic en el enlace, puede utilizar el atributo de download . Sin embargo, no todos los navegadores web tienen soporte para el atributo de descarga . Otra opción es usar application/octet-stream como el tipo mime del archivo, pero esto hace que el archivo se presente como un blob binario que es especialmente hostil si no lo hace o no puede especificar un nombre de archivo. Consulte también ' Forzar para abrir la ventana emergente "Guardar como ..." abrir en el enlace de texto, haga clic para pdf en HTML '.

Especificando un nombre de archivo

Si el blob se crea con el constructor de archivos, también puede establecer un nombre de archivo, pero solo algunos navegadores web (incluidos Chrome y Firefox) tienen soporte para el constructor de archivos . El nombre de archivo también se puede especificar como el argumento del atributo de download , pero esto está sujeto a un montón de consideraciones de seguridad . Internet Explorer 10 y 11 proporciona su propio método, msSaveBlob , para especificar un nombre de archivo.

Código de ejemplo

var file;
var data = [];
data.push("This is a test\n");
data.push("Of creating a file\n");
data.push("In a browser\n");
var properties = {type: 'text/plain'}; // Specify the file's mime-type.
try {
  // Specify the filename using the File constructor, but ...
  file = new File(data, "file.txt", properties);
} catch (e) {
  // ... fall back to the Blob constructor if that isn't supported.
  file = new Blob(data, properties);
}
var url = URL.createObjectURL(file);
document.getElementById('link').href = url;
<a id="link" target="_blank" download="file.txt">Download</a>




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 de JavaScript + Flash que permite generar y guardar archivos sobre la marcha, en el navegador, sin interacción con el servidor.




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




Encontré dos enfoques simples que funcionan para mí. Primero, utilizando un elemento ya pulsado e inyectando los datos de descarga. Y segundo, generar un elemento a con los datos de descarga, ejecutar a.click() y eliminarlo de nuevo. Pero el segundo enfoque funciona solo si es invocado por una acción de clic del usuario también. (Algunos) Bloqueo del navegador, click() desde otros contextos, como al cargar o desencadenar 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>



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

Estoy trabajando en ejemplos de HTML5. Vaya a http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html y desplácese hasta el laberinto. La información para reconstruir el laberinto se almacena utilizando localStorage.

Vine a este artículo buscando HTML5 JavaScript para cargar y trabajar con archivos xml. ¿Es lo mismo que el antiguo html y JavaScript?




Este hilo fue invaluable para descubrir cómo generar un archivo binario y un mensaje para descargar el archivo nombrado, todo en código de cliente sin un servidor.

El primer paso para mí fue generar el blob binario a partir de los datos que estaba guardando. Hay muchas muestras para hacer esto para un solo tipo binario, en mi caso tengo un formato binario con varios tipos que puede pasar como una matriz para crear el blob.

<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>

El siguiente paso es hacer que el navegador solicite al usuario que descargue este blob con un nombre predefinido.

Todo lo que necesitaba era un enlace con nombre que agregué en el HTML5 que podría reutilizar para cambiar el nombre del nombre de archivo inicial. Lo mantuve oculto ya que el enlace no necesita mostrarse.

<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>

El último paso es pedir al usuario que descargue el archivo.

saveAnimation: function() {

    var device = this.Device;
    var maxRow = ChromaAnimation.getMaxRow(device);
    var maxColumn = ChromaAnimation.getMaxColumn(device);
    var frames = this.Frames;
    var frameCount = frames.length;

    var writeArrays = [];


    var writeArray = new Uint32Array(1);
    var version = 1;
    writeArray[0] = version;
    writeArrays.push(writeArray.buffer);
    //console.log('version:', version);


    var writeArray = new Uint8Array(1);
    var deviceType = this.DeviceType;
    writeArray[0] = deviceType;
    writeArrays.push(writeArray.buffer);
    //console.log('deviceType:', deviceType);


    var writeArray = new Uint8Array(1);
    writeArray[0] = device;
    writeArrays.push(writeArray.buffer);
    //console.log('device:', device);


    var writeArray = new Uint32Array(1);
    writeArray[0] = frameCount;
    writeArrays.push(writeArray.buffer);
    //console.log('frameCount:', frameCount);

    for (var index = 0; index < frameCount; ++index) {

      var frame = frames[index];

      var writeArray = new Float32Array(1);
      var duration = frame.Duration;
      if (duration < 0.033) {
        duration = 0.033;
      }
      writeArray[0] = duration;
      writeArrays.push(writeArray.buffer);

      //console.log('Frame', index, 'duration', duration);

      var writeArray = new Uint32Array(maxRow * maxColumn);
      for (var i = 0; i < maxRow; ++i) {
        for (var j = 0; j < maxColumn; ++j) {
          var color = frame.Colors[i][j];
          writeArray[i * maxColumn + j] = color;
        }
      }
      writeArrays.push(writeArray.buffer);
    }

    var blob = new Blob(writeArrays, {type: 'application/octet-stream'});

    return blob;
}



Related