from - JavaScript: crear y guardar archivo
javascript download file from url (10)
Este proyecto en github parece prometedor:
https://github.com/eligrey/FileSaver.js
FileSaver.js implementa la interfaz W3C saveAs () FileSaver en navegadores que no lo admiten de forma nativa.
También eche un vistazo a la demostración aquí:
Tengo datos que quiero escribir en un archivo y abro un cuadro de diálogo de archivo para que el usuario elija dónde guardar el archivo. Sería genial si funcionara en todos los navegadores, pero tiene que funcionar en Chrome. Quiero hacer esto todo el lado del cliente.
Básicamente, quiero saber qué poner en esta función:
saveFile: function(data)
{
}
Cuando la función capta datos, el usuario selecciona una ubicación para guardar el archivo y crea un archivo en esa ubicación con esa información.
Usar HTML también está bien, si eso ayuda.
Intenté esto en la consola, y funciona.
var aFileParts = [''<a id="a"><b id="b">hey!</b></a>''];
var oMyBlob = new Blob(aFileParts, {type : ''text/html''}); // the blob
window.open(URL.createObjectURL(oMyBlob));
Javascript tiene una API FileSystem. Si puede hacer que la función solo funcione en Chrome, un buen punto de partida sería: http://www.html5rocks.com/en/tutorials/file/filesystem/ .
No es posible elegir la ubicación para guardar el archivo antes de crearlo. Pero es posible, al menos en Chrome, generar archivos usando solo JavaScript. Aquí hay un viejo ejemplo mío de crear un archivo CSV. Se le pedirá al usuario que lo descargue. Esto, desafortunadamente, no funciona bien en otros navegadores, especialmente en IE.
<!DOCTYPE html>
<html>
<head>
<title>JS CSV</title>
</head>
<body>
<button id="b">export to CSV</button>
<script type="text/javascript">
function exportToCsv() {
var myCsv = "Col1,Col2,Col3/nval1,val2,val3";
window.open(''data:text/csv;charset=utf-8,'' + escape(myCsv));
}
var button = document.getElementById(''b'');
button.addEventListener(''click'', exportToCsv);
</script>
</body>
</html>
No puedes hacer esto simplemente en Javascript. Javascript que se ejecuta en navegadores aún no tiene suficiente permiso (ha habido propuestas) debido a razones de seguridad.
En cambio, recomendaría usar Downloadify :
Una pequeña biblioteca de JavaScript + Flash que permite la creación y descarga de archivos de texto sin la interacción del servidor.
Puede ver una demostración simple here donde proporciona el contenido y puede probar la funcionalidad de guardar / cancelar / manejo de errores.
Para Chrome y Firefox, he estado usando un método puramente JavaScript.
(Mi aplicación no puede hacer uso de un paquete como Blob.js porque se sirve desde un motor especial: un DSP con un servidor WWWeb repleto y poco espacio para nada).
function FileSave(sourceText, fileIdentity) {
var workElement = document.createElement("a");
if (''download'' in workElement) {
workElement.href = "data:" + ''text/plain'' + "charset=utf-8," + escape(sourceText);
workElement.setAttribute("download", fileIdentity);
document.body.appendChild(workElement);
var eventMouse = document.createEvent("MouseEvents");
eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
workElement.dispatchEvent(eventMouse);
document.body.removeChild(workElement);
} else throw ''File saving not supported for this browser'';
}
Notas, advertencias y palabras de comadreja:
- He tenido éxito con este código en clientes de Chrome y Firefox que se ejecutan en entornos Linux (Maipo) y Windows (7 y 10).
- Sin embargo, si
sourceTextes más grande que un MB, Chrome a veces (solo algunas veces) se queda atrapado en su propia descarga sin ninguna indicación de falla; Firefox, hasta ahora, no ha exhibido este comportamiento. La causa puede ser alguna limitación de blob en Chrome. Francamente, simplemente no lo sé; si alguien tiene alguna idea de cómo corregir (o al menos detectar), por favor publica. Si se produce la anomalía de descarga, cuando se cierra el navegador Chrome, genera un diagnóstico como - Este código no es compatible con Edge o Internet Explorer; No he probado Opera o Safari.
Para el último navegador, como Chrome, puede usar File API como en este tutorial :
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTENT, 5*1024*1024 /*5MB*/, saveFile, errorHandler);
Una mejora muy pequeña del código por Awesomeness01 (sin necesidad de etiqueta de anclaje) con una adición como lo sugiere trueimage (soporte para IE):
// Function to download data to a file
function download(data, filename, type) {
var file = new Blob([data], {type: type});
if (window.navigator.msSaveOrOpenBlob) // IE10+
window.navigator.msSaveOrOpenBlob(file, filename);
else { // Others
var a = document.createElement("a"),
url = URL.createObjectURL(file);
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
}
}
Probado para funcionar correctamente en Chrome, Firefox e IE10.
En Safari, los datos se abren en una nueva pestaña y uno tendría que guardar manualmente este archivo.
setTimeout("create(''Hello world!'', ''myfile.txt'', ''text/plain'')");
function create(text, name, type) {
var dlbtn = document.getElementById("dlbtn");
var file = new Blob([text], {type: type});
dlbtn.href = URL.createObjectURL(file);
dlbtn.download = name;
}
<a href="javascript:void(0)" id="dlbtn"><button>click here to download your file</button></a>
function download(text, name, type) {
var a = document.getElementById("a");
var file = new Blob([text], {type: type});
a.href = URL.createObjectURL(file);
a.download = name;
}
<a href="" id="a">click here to download your file</a>
<button onclick="download(''file text'', ''myfilename.txt'', ''text/plain'')">Create file</button>
Y luego descargaría el archivo colocando el atributo de descarga en la etiqueta de anclaje.
La razón por la que me gusta esto es mejor que crear una url de datos es que no tienes que hacer una url grande, solo puedes generar una url temporal.