español - javascript operator

¿Es posible transmitir un flujo de octetos que se genera en javascript?

Question

Supongamos un caso en el que se genera una cadena enorme a partir de una cadena pequeña que utiliza alguna lógica javascript, y luego el archivo de texto se fuerza a descargar en el navegador.

Esto es posible usando una descarga de flujo de octetos poniéndolo como un href, como se menciona en esta respuesta:

Cree un archivo en la memoria para que el usuario lo descargue, no a través del servidor .

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

Pero esta solución requiere que el ''texto'' se genere por completo antes de ser empujado para la descarga, por lo tanto, tendrá que mantenerse por completo en la memoria del navegador.

¿Es posible transmitir el texto a medida que se genera utilizando ÚNICAMENTE LÓGICA DEL LADO DEL CLIENTE?

Por ejemplo :

var inputString = "A";
var outStr = "";
for(var i = 0; i < 10000000 ; i++)
{
/* concatenate inputString to output on the go */
}

Answer 1

Hay una forma de hacerlo, pero se basa en una API del sistema de archivos solo para Chrome. Crearemos y escribiremos en un archivo temporal en un sistema de archivos de espacio aislado y lo copiaremos en el sistema de archivos normal una vez que hayamos terminado. De esta manera usted no tiene que almacenar todo el archivo en la memoria. La versión asíncrona de la API de Chrome no está siendo considerada actualmente para la estandarización por W3C, pero la versión síncrona (que utiliza trabajadores web) es. Si el soporte del navegador es una preocupación, entonces esta respuesta no es para ti.

La API funciona así: primero, obtenemos la función requestFileSystem() del navegador. Actualmente tiene el prefijo "webkit":

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;

A continuación, solicitamos un sistema de archivos temporal (de esta manera no necesitamos pedir permiso al usuario):

var fileSystem; //This will store the fileSystem for later access
var fileSize = 1024*1024 //Our maximum file system size.
function errorHandler(e) {
console.log(''Error: '' + e.name);
}
window.requestFileSystem(window.TEMPORARY, fileSize, function (fs) { fileSystem = fs; }, errorHandler);

Ahora que tenemos acceso al sistema de archivos, es hora de crear un archivo:

var fileOptions = {
create: true, //If the file is not found, create it
exclusive: false //Don''t throw an error if the file doesn''t exist
};

Aquí llamamos a la función getFile() , que puede crear un archivo si no existe. Dentro de la devolución de llamada, podemos crear un nuevo fileWriter para escribir en el archivo. El fileWriter se mueve al final del archivo, y creamos un nuevo blob de texto para adjuntarlo.

fileSystem.root.getFile(fileName, fileOptions, function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
fileWriter.seek(fileWriter.length);
var blob = new Blob([STRING_TO_WRITE], {type: ''text/plain''});
fileWriter.write(blob);
}, errorHandler);
});

Tenga en cuenta que esta API no se guarda en el sistema de archivos normal del usuario. En su lugar, se guarda en una carpeta de espacio aislado especial. Si desea guardarlo en el sistema de archivos del usuario, puede crear un filesystem: enlace. Cuando el usuario haga clic en él, se le pedirá que lo guarde. Después de guardarlo, puede eliminar el archivo temporal.

Esta función genera el enlace del filesystem utilizando la fileEntry toURL() :

var save = function () {
var download = document.querySelector("a[download]");
if (!fileSystem) { return; }
fileSystem.root.getFile(fileName, {create: false, exclusive: true}, function(fileEntry) {
download.href = fileEntry.toURL();
}, errorHandler);
}

El uso de un enlace con el atributo de descarga forzará la descarga del archivo.

<a download></a>

Aquí hay un plunker que demuestra esto: http://plnkr.co/edit/q6ihXWEXSOtutbEy1b5G?p=preview

Esperemos que esto logre lo que quieres. Puede agregarse continuamente al archivo, no se guardará en la memoria, pero estará en el sistema de archivos de espacio aislado hasta que el usuario lo guarde en el sistema de archivos normal.

Para obtener más información, eche un vistazo a este artículo de HTML5rocks o este si desea utilizar la API de trabajador web sincrónica más nueva.

Answer 2

Lo habría sugerido de la forma en que lo describes @quantumwannabe, usando un archivo de espacio de prueba temporal para agregar fragmentos.

Pero hay una nueva forma que se puede usar hoy (detrás de una bandera) pero se habilitará en la próxima versión de chrome (52)

Y aquí es donde haré que @ KeenanLidral-Porter responda incorrectamente. Y @quantumwannabe responde un paso innecesario.
Porque ahora hay una manera de escribir un flujo al sistema de archivos directamente: StreamSaver.js

Actúa como si hubiera un servidor que envía un encabezado de flujo de octetos y le indica al navegador que descargue fragmentos de datos con la ayuda de un trabajador de servicio

const writeStream = streamSaver.createWriteStream(''filename.txt'')
const encoder = new TextEncoder
let data = ''a''.repeat(1024) // Writing some stuff triggers the save dialog to show
let uint8array = encoder.encode(data + "/n/n")
writeStream.write(uint8array) // Write some data when you got some
writeStream.close() // End the saving

Answer 3

Si no. No, porque no hay una forma de escribir en archivos con solo javascript del lado del cliente. Un poco Puede solicitar a un usuario que descargue y guarde un archivo, pero como mencionó, el código debe generar todo el archivo antes de que se realice la descarga. Nota: Por "flujo" asumo que quiere decir flujo a archivo (escribir constantemente en un archivo) y por "SOLO LÓGICA LATERAL DEL CLIENTE" Supongo que quiere decir en el navegador.

Parece que Mozilla ha estado trabajando para que el código del lado del cliente interactúe con los archivos. Aquí viene el sí. Mas o menos. Tienen su propia API de sistema de archivos que le permite interactuar con (escribir en) el sistema de archivos de las máquinas locales. Específicamente, hay una función que le permite escribir un flujo de entrada a un archivo . Sin embargo, hay algunos asteriscos:

1) parece que todo el sistema está en desuso; alientan a los desarrolladores a usar OS.file sobre File I / O

2) Tienes que usar XPConnect , un sistema que te permite acceder a XPCOM (biblioteca de componentes) de Mozilla en javascript. Si desea hacer esto en el navegador, parece que solo las extensiones de Firefox tienen los permisos adecuados para interactuar con esos componentes (). Si no desea hacer esto en el navegador, obviamente solo puede usar el nodo.

Seguramente, se presentarán más complicaciones durante la implementación. Pero este parece ser el camino más seguro hacia adelante, ya que OS.File le brinda acceso a funciones como OS.File.writeAtomic() y escritura básica en el archivo.

Dicho esto, no es un camino tan bueno, pero espero que esto le brinde un punto de partida sólido. Como mencionó @dandavis, los navegadores (es decir, la "lógica del lado del cliente") están diseñados para no permitir este tipo de cosas. Sería un defecto de supervisión / seguridad increíblemente grande si un sitio web pudiera interactuar con el sistema de archivos local de cualquier usuario.

Recursos adicionales:
Wikipedia en XPConnect
Guía sobre cómo trabajar con XPCOM en javascript : puede que no sea tan útil