llamar - Usando HTML5/Javascript para generar y guardar un archivo
llamar javascript desde html (15)
Ú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!
¡Solución simple!
<a download="My-FileName.txt" href="data:application/octet-stream,HELLO-WORLDDDDDDDD">Click here</a>
Funciona en todos los navegadores modernos.
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>
Aquí hay un enlace al método de URI de datos que Mathew sugirió, funcionó en un safari, pero no muy bien porque no pude establecer el tipo de archivo, se guarda como "desconocido" y luego tengo que ir allí otra vez y cambiarlo en orden para ver el archivo ...
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, incluye las bibliotecas requeridas:
<a id="lnkDownload" style="display: none" download="client.chroma" href="" target="_blank"></a>
Ahora copie este código y este código descargará un archivo zip con un archivo hello.txt con el contenido de Hello World. Si todo funciona bien, esto descargará un archivo.
var data = animation.saveAnimation();
var uriContent = URL.createObjectURL(data);
var lnkDownload = document.getElementById(''lnkDownload'');
lnkDownload.download = ''theDefaultFileName.extension'';
lnkDownload.href = uriContent;
lnkDownload.click();
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
Bien, creando un dato: ¡URI definitivamente hace el truco por mí, gracias a Matthew y Dennkster que han señalado esa opción! Aquí es básicamente cómo lo hago:
1) obtener todo el contenido en una cadena llamada "contenido" (por ejemplo, al crearlo allí inicialmente o al leer innerHTML de la etiqueta de una página ya construida).
2) Construir el URI de datos:
uriContent = "data:application/octet-stream," + encodeURIComponent(content);
Habrá limitaciones de longitud según el tipo de navegador, etc., pero, por ejemplo, Firefox 3.6.12 funciona hasta al menos 256k. Codificar en Base64 en lugar de usar encodeURIComponent puede hacer que las cosas sean más eficientes, pero para mí eso estuvo bien.
3) abrir una nueva ventana y "redirigirla" a este URI solicita una ubicación de descarga de mi página generada por JavaScript:
newWindow = window.open(uriContent, ''neuesDokument'');
Eso es.
Como se mencionó anteriormente, la API de File , junto con las API de File y FileSystem se pueden usar para almacenar archivos en la máquina de un cliente desde el contexto de una pestaña / ventana del navegador.
Sin embargo, hay varias cosas relacionadas con las dos últimas API que debe tener en cuenta:
- Actualmente, las implementaciones de las API solo existen en navegadores basados en Chromium (Chrome y Opera)
- Ambas API se retiraron de la pista de estándares del W3C el 24 de abril de 2014 y, a partir de ahora, son de propiedad exclusiva.
- La eliminación de las API (ahora propietarias) de la implementación de navegadores en el futuro es una posibilidad
- Una caja de arena (una ubicación en el disco fuera de la cual los archivos no pueden producir ningún efecto) se utiliza para almacenar los archivos creados con las API
- Un sistema de archivos virtual (una estructura de directorios que no necesariamente existe en el disco en la misma forma en que se usa cuando se accede desde el navegador) representa los archivos creados con las API
Aquí hay ejemplos simples de cómo se usan las API, directa e indirectamente, en conjunto para hacer esto:
bakedGoods.get({
data: ["testFile"],
storageTypes: ["fileSystem"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(resultDataObj, byStorageTypeErrorObj){}
});
Uso de las API de archivos sin formato, FileWriter y FileSystem
function onQuotaRequestSuccess(grantedQuota)
{
function saveFile(directoryEntry)
{
function createFileWriter(fileEntry)
{
function write(fileWriter)
{
var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
fileWriter.write(dataBlob);
}
fileEntry.createWriter(write);
}
directoryEntry.getFile(
"testFile",
{create: true, exclusive: true},
createFileWriter
);
}
requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}
var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);
Aunque las API de FileSystem y FileWriter ya no están en el camino de los estándares, su uso puede justificarse en algunos casos, en mi opinión, porque:
- El interés renovado de los proveedores de navegadores que no están implementados puede volver a colocarlos en él.
- La penetración en el mercado de los navegadores de implementación (basados en Chromium) es alta
- Google (el principal contribuyente a Chromium) no ha dado una fecha de finalización de la vida útil a las API.
Si "algunos casos" abarcan los suyos, sin embargo, es para que usted decida.
* BakedGoods es mantenido por nada menos que por este tipo aquí :)
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.
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>
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;
}
HTML5 definió un método window.saveAs(blob, filename) . No es compatible con ningún navegador en este momento. Pero hay una biblioteca de compatibilidad llamada FileSaver.js que agrega esta función a la mayoría de los navegadores modernos (incluido Internet Explorer 10+). Internet Explorer 10 admite el método navigator.msSaveBlob(blob, filename) ( MSDN ), que se usa en FileSaver.js para la compatibilidad con Internet Explorer.
Escribí una publicación de blog con más detalles sobre este problema.
He usado FileSaver ( https://github.com/eligrey/FileSaver.js ) y funciona bien.
Por ejemplo, hice esta función para exportar los registros que se muestran en una página.
Tienes que pasar una matriz para la instanciación del Blob, así que quizás no escribí esto de la manera correcta, pero funciona para mí.
Por si acaso, tenga cuidado con la sustitución: esta es la sintaxis para hacer esto global, de lo contrario solo reemplazará la primera que encuentre.
exportLogs : function(){
var array = new Array();
var str = $(''#logs'').html();
array[0] = str.replace(/<br>/g, ''/n/t'');
var blob = new Blob(array, {type: "text/plain;charset=utf-8"});
saveAs(blob, "example.log");
}
Puede generar un URI de datos . Sin embargo, hay limitaciones específicas del navegador.
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?
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!'');
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();
}