É possível escrever dados para arquivo usando apenas JavaScript?
quero escrever dados para um ficheiro existente usando JavaScript.
Não quero imprimi-lo na consola.
Eu quero realmente escrever dados para abc.txt
.
Eu li muitas perguntas respondidas, mas todos os lugares onde eles estão imprimindo no console.
em algum lugar eles deram código, mas não está funcionando.
Então, por favor, qualquer um pode me ajudar a realmente escrever dados para arquivo.
Uncaught TypeError: Illegal constructor
em cromado e
SecurityError: The operation is insecure.
Em Mozilla
var f = "sometextfile.txt";
writeTextFile(f, "Spoon")
writeTextFile(f, "Cheese monkey")
writeTextFile(f, "Onion")
function writeTextFile(afilename, output)
{
var txtFile =new File(afilename);
txtFile.writeln(output);
txtFile.close();
}
Então ... podemos realmente escrever dados para arquivo usando apenas Javascript ou não?
Por favor, ajuda-me
Obrigado antecipadamente.
7 answers
- Se está a tentar escrever um ficheiro na máquina do cliente,não pode fazer isto de forma cruzada. O IE tem métodos para activar as aplicações "confiáveis" para usar os objectos ActiveX para ler/escrever o ficheiro.
- Se está a tentar gravá-lo no seu servidor, então simplesmente passe os dados de texto para o seu servidor e execute o código de escrita do ficheiro usando alguma linguagem do lado do servidor.
- para guardar algumas informações do lado do cliente que são consideravelmente pequeno, podes ir comer biscoitos.
- Usando a API HTML5 para armazenamento Local.
Você pode criar ficheiros no navegador usando Blob
e URL.createObjectURL
. Todos os navegadores recentes suportam isto .
Você não pode salvar diretamente o arquivo que você cria, uma vez que isso causaria enormes problemas de segurança, mas você pode fornecê-lo como um link de download para o usuário. Você pode sugerir um nome de arquivo através do download
atributo da ligação, nos navegadores que suportam o atributo download. Como em qualquer outro download, o usuário baixando o arquivo terá o a última palavra no nome do ficheiro.
var textFile = null,
makeTextFile = function (text) {
var data = new Blob([text], {type: 'text/plain'});
// If we are replacing a previously generated file we need to
// manually revoke the object URL to avoid memory leaks.
if (textFile !== null) {
window.URL.revokeObjectURL(textFile);
}
textFile = window.URL.createObjectURL(data);
// returns a URL you can use as a href
return textFile;
};
Aqui está um exemplo que usa esta técnica para salvar texto arbitrário de um textarea
.
Se quiser iniciar imediatamente a transferência em vez de exigir que o utilizador carregue numa ligação, poderá usar os Eventos do rato para simular um botão do rato na ligação como O Lifecube's } respondeu. Criei um exemplo atualizado que usa esta técnica.
var create = document.getElementById('create'),
textbox = document.getElementById('textbox');
create.addEventListener('click', function () {
var link = document.createElement('a');
link.setAttribute('download', 'info.txt');
link.href = makeTextFile(textbox.value);
document.body.appendChild(link);
// wait for the link to be added to the document
window.requestAnimationFrame(function () {
var event = new MouseEvent('click');
link.dispatchEvent(event);
document.body.removeChild(link);
});
}, false);
Se está a falar do navegador javascript, não pode escrever dados directamente para um ficheiro local por razões de segurança. A nova API HTML 5 só lhe permite ler arquivos.
Mas se quiser escrever dados, e permitir que o utilizador baixe como um ficheiro para o local. o seguinte código funciona:
function download(strData, strFileName, strMimeType) {
var D = document,
A = arguments,
a = D.createElement("a"),
d = A[0],
n = A[1],
t = A[2] || "text/plain";
//build download link:
a.href = "data:" + strMimeType + "charset=utf-8," + escape(strData);
if (window.MSBlobBuilder) { // IE10
var bb = new MSBlobBuilder();
bb.append(strData);
return navigator.msSaveBlob(bb, strFileName);
} /* end if(window.MSBlobBuilder) */
if ('download' in a) { //FF20, CH19
a.setAttribute("download", n);
a.innerHTML = "downloading...";
D.body.appendChild(a);
setTimeout(function() {
var e = D.createEvent("MouseEvents");
e.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(e);
D.body.removeChild(a);
}, 66);
return true;
}; /* end if('download' in a) */
//do iframe dataURL download: (older W3)
var f = D.createElement("iframe");
D.body.appendChild(f);
f.src = "data:" + (A[2] ? A[2] : "application/octet-stream") + (window.btoa ? ";base64" : "") + "," + (window.btoa ? window.btoa : escape)(strData);
setTimeout(function() {
D.body.removeChild(f);
}, 333);
return true;
}
Para o usar:
download('the content of the file', 'filename.txt', 'text/plain');
A resposta acima é útil mas, encontrei o código que o ajuda a transferir o ficheiro de texto directamente no botão, carregue.
Neste código você também pode mudar filename
como desejar. É uma função javascript pura com HTML5.
Por mim tudo bem!
function saveTextAsFile()
{
var textToWrite = document.getElementById("inputTextToSave").value;
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null)
{
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
}
else
{
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
}
No caso de não ser possível utilizar a nova Blob
solução, que é com certeza a melhor solução no navegador moderno, ainda é possível usar essa abordagem mais simples, que tem um limite no tamanho do arquivo pelo caminho:
function download() {
var fileContents=JSON.stringify(jsonObject, null, 2);
var fileName= "data.json";
var pp = document.createElement('a');
pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
pp.setAttribute('download', fileName);
pp.click();
}
setTimeout(function() {download()}, 500);
$('#download').on("click", function() {
function download() {
var jsonObject = {
"name": "John",
"age": 31,
"city": "New York"
};
var fileContents = JSON.stringify(jsonObject, null, 2);
var fileName = "data.json";
var pp = document.createElement('a');
pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
pp.setAttribute('download', fileName);
pp.click();
}
setTimeout(function() {
download()
}, 500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="download">Download me</button>
Use o código pelo utilizador @useless-code above ( https://stackoverflow.com/a/21016088/327386 ) para gerar o ficheiro.
Se quiser obter o ficheiro automaticamente, passe o textFile
que foi gerado para esta função:
var downloadFile = function downloadURL(url) {
var hiddenIFrameID = 'hiddenDownloader',
iframe = document.getElementById(hiddenIFrameID);
if (iframe === null) {
iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
iframe.src = url;
}
O botão para criar o blob e o link de download pode ser combinado em um link, uma vez que o elemento link pode ter um atributo onclick. (O inverso parece não ser possível, adicionar um href a um botão não funciona.)
Você pode classificar a ligação como um botão usando bootstrap
, que ainda é javascript puro, exceto para o estilo.
Este exemplo só precisa de um botão para criar o texto-blob e transferi-lo:
<a id="a_btn_writetofile" download="info.txt" href="#" class="btn btn-primary"
onclick="exportFile('This is some dummy data.\nAnd some more dummy data.\n', 'a_btn_writetofile')"
>
Write To File
</a>
<script>
// URL pointing to the Blob with the file contents
var objUrl = null;
// create the blob with file content, and attach the URL to the downloadlink;
// NB: link must have the download attribute
// this method can go to your library
function exportFile(fileContent, downloadLinkId) {
// revoke the old object URL to avoid memory leaks.
if (objUrl !== null) {
window.URL.revokeObjectURL(objUrl);
}
// create the object that contains the file data and that can be referred to with a URL
var data = new Blob([fileContent], { type: 'text/plain' });
objUrl = window.URL.createObjectURL(data);
// attach the object to the download link (styled as button)
var downloadLinkButton = document.getElementById(downloadLinkId);
downloadLinkButton.href = objUrl;
};
</script>