Create Text file from String using JS and html5
Solution 1
i ended up using this code instead. it creates a link to download the url of the file.
window.URL = window.webkitURL || window.URL;
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
file = new WebKitBlobBuilder();
file.append(output);
var a = document.getElementById("downloadFile");
a.hidden = '';
a.href = window.URL.createObjectURL(file.getBlob('text/plain'));
a.download = 'filename.txt';
a.textContent = 'Download file!';
}
also this way adds less to the website making it a lighter website for slow connections. my html has a empty div in which this appends to.
<div class ='paginationLIST' id='pagination'></div>
Solution 2
Convert your object
to a JSON string.
var json_string = JSON.stringify(object, undefined, 2);
Notes:
- If you already have a string, skip the step above.
- If you don't want it to be formatted nicely, remove the
, undefined, 2
.
Create a download link and click it:
var link = document.createElement('a');
link.download = 'data.json';
var blob = new Blob([json_string], {type: 'text/plain'});
link.href = window.URL.createObjectURL(blob);
link.click();
Solution 3
BlobBuilder is now obsolete. Use this instead:
https://developer.mozilla.org/en-US/docs/Web/API/Blob#Blob_constructor_example_usage
GreenGiant
Co-op Student working for research Java, JS, HTML5, C, CSS, best in Java, current project is in HTML5
Updated on August 27, 2020Comments
-
GreenGiant over 3 years
i want to create a text file from a string. currently i am using a function which takes an array and makes it into a string then using that string i want to create a local text file the user downloads. i have tried using this method
function createFile(){ //creates a file using the fileLIST list var output= 'Name \t Status\n'+ fileLIST[0][0].name+'\t'+fileLIST[0][1]+'\n'; var Previous = fileLIST[0]; for (var i=1; i<fileLIST.length; i++) if (fileLIST[i][1] =='none' || fileLIST[i][1] == Previous[1]) continue else { Previous = fileLIST[i] output = output + fileLIST[i][0].name +'\t'+fileLIST[i][1] + '\n';} window.open("data:text/json;charset=utf-8," + escape(output));//should create file display(); }
i am using chrome as my browser. also i would prefer JS or HTML5 answer.
thank you in advance
-
GreenGiant almost 12 yearshow would you go about using the iframe to create the file? changing the "text/json" did not change anything
-
Joseph almost 12 years@GreenGiant see the demo I provided. it's a fiddle that auto downloads a file. also, instead of using
window.open(url)
, set the hidden iframe's url instead. -
GreenGiant almost 12 yearsi get a error when running your fiddle the error is" Resource interpreted as Document but transferred with MIME type text/octet-stream: "data:text/octet-stream,foo".
-
Andrea Rastelli over 10 yearsmaybe i miss something, but the code souldn't be something like:
file = new BlobBuilder
because you have assigned to this object the Webkit or Moz BlodBuilder.. Am I right? -
Fred over 2 yearsThank you so much! Works like a charm :-)