JavaScript: crie e salve o arquivo

Eu tenho dados que quero gravar em um arquivo e abra um diálogo de arquivo para o usuário escolher onde salvar o arquivo. Seria ótimo se funcionasse em todos os navegadores, mas funcionasse no Chrome. Eu quero fazer isso tudo do lado do cliente.

Basicamente eu quero saber o que colocar nessa function:

saveFile: function(data) { } 

Quando a function recebe dados, o usuário seleciona um local para salvar o arquivo e cria um arquivo nesse local com esses dados.

Usar HTML também é bom, se isso ajudar.

Uma melhoria muito pequena do código por Awesomeness01 (sem necessidade de tag âncora) com adição como sugerido por trueimage (suporte 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); } } 

Testado para funcionar corretamente no Chrome, no FireFox e no IE10.

No Safari, os dados são abertos em uma nova guia e é necessário salvar manualmente esse arquivo.

Este projeto no github parece promissor:

https://github.com/eligrey/FileSaver.js

FileSaver.js implementa a interface W3C saveAs () FileSaver em navegadores que não suportam nativamente.

Também dê uma olhada na demonstração aqui:

http://eligrey.com/demos/FileSaver.js/

 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; } 
 click here to download your file  

Escolher o local para salvar o arquivo antes de criá-lo não é possível. Mas é possível, pelo menos no Chrome, gerar arquivos usando apenas JavaScript. Aqui está um exemplo antigo de criação de um arquivo CSV. O usuário será solicitado a fazer o download. Isso, infelizmente, não funciona bem em outros navegadores, especialmente no IE.

    JS CSV       

Para o navegador mais recente, como o Chrome, você pode usar a API de arquivos, como neste tutorial :

 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(window.PERSISTENT, 5*1024*1024 /*5MB*/, saveFile, errorHandler); 
 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; } 
  

Tentei isso no console, e funciona.

 var aFileParts = ['hey!']; var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob window.open(URL.createObjectURL(oMyBlob)); 

Você não pode fazer isso puramente em JavaScript. O Javascript em execução nos navegadores ainda não tem permissão suficiente (houve propostas) por motivos de segurança.

Em vez disso, recomendo usar o Downloadify :

Uma minúscula biblioteca javascript + Flash que permite a criação e o download de arquivos de texto sem interação com o servidor.

Você pode ver uma demonstração simples aqui onde você fornece o conteúdo e pode testar a funcionalidade de salvar / cancelar / lidar com erros.

Javascript tem uma API FileSystem. Se você conseguir que o recurso funcione apenas no Google Chrome, um bom ponto de partida seria: http://www.html5rocks.com/en/tutorials/file/filesystem/ .

Para o Chrome e o Firefox, tenho usado um método puramente JavaScript.

(Meu aplicativo não pode fazer uso de um pacote como o Blob.js porque ele é servido por um mecanismo especial: um DSP com um servidor WWWeb abarrotado e pouco espaço para qualquer coisa.)

 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, advertências e palavras-doninha:

  • Eu obtive sucesso com esse código nos clientes Chrome e Firefox executados em ambientes Linux (Maipo) e Windows (7 e 10).
  • No entanto, se sourceText for maior que um MB, o Chrome às vezes (apenas às vezes) fica preso em seu próprio download sem nenhuma indicação de falha; O Firefox, até agora, não exibiu esse comportamento. A causa pode ser alguma limitação de bolha no Chrome. Francamente, eu simplesmente não sei; Se alguém tiver alguma idéia de como corrigir (ou pelo menos detectar), por favor poste. Se a anomalia do download ocorrer, quando o navegador Chrome for fechado, ele gerará um diagnóstico como Diagnóstico do navegador Chrome
  • Este código não é compatível com o Edge ou o Internet Explorer; Eu não tentei o Opera ou o Safari.