Create big downloable file from string variable in HTML/Javascript

Question

I created a js script where I can download a file from a string variable:

window.alert("a");
document.getElementById("export-graphml").innerHTML += "<a id=\"dl\" download=\"graph.graphml\">Download</a>"
window.alert("b");
var vdl = document.getElementById("dl");
window.alert(data.length);
vdl.href = "data:text/plain," + encodeURIComponent(data);

It works very good until my string var (data) isn't too big. When my data is too big the last line of the code makes Chrome and Firefox crash and IE has no reaction.

I didn't find any infos on a possible limit of size anywhere.

If you have any idea thanks to share it.

Typically the max length of a URI is 2083 characters. So that's your limit with this method. — Hayden Schiff, Jul 27 '15 at 15:19
https://technomanor.wordpress.com/2012/04/03/maximum-url-size/ — mikeswright49, Jul 27 '15 at 15:19
@oxguy3 Ok thank, how can I make an alternative to make downloable a file from a big string variable? — elpha01, Jul 27 '15 at 15:23
@elpha01 Why not a single line text file and read in chunks? — Obj3ctiv3_C_88, Jul 27 '15 at 15:28
@Obj3ctiv3_C_88 Do you mean to split the text in several chunks? But can I make it downlable in one file? — elpha01, Jul 27 '15 at 15:33
@elpha01 Yes, when you read in the file do it in chunks, appending to a single string. Here's a good article on the process http://www.html5rocks.com/en/tutorials/file/dndfiles/ — Obj3ctiv3_C_88, Jul 27 '15 at 15:36
@Obj3ctiv3_C_88 I'm not sure to quite understand, but my problem is not to read a file but to write it, I don't read any file. I want to output my string as an URI (?). — elpha01, Jul 27 '15 at 15:41
@elpha01 Ohhhh, I was confused by "alternative to make a downloadable from a big string". Then as oxguy said there is a 2083 char limit. You could create a byte array from the string and send it in a JSON node? What is the reason to want to include it in the URI? — Obj3ctiv3_C_88, Jul 27 '15 at 15:44
@Obj3ctiv3_C_88 I used URI because I'm not familiar with node.js. I'll take a look, thank you. — elpha01, Jul 27 '15 at 15:50
You don't need to be familiar with node.js. Any server-side language is going to be able to parse a JSON response assuming it is written in a RESTful design. — Obj3ctiv3_C_88, Jul 27 '15 at 15:52

Alex Nikulin · Accepted Answer · 2015-07-28T09:31:54.630

Try this (works from 10 ie, and on all modern browsers)

    var createObjectURL = (window.URL || window.webkitURL || {}).createObjectURL || function(){}; 
    var blob = null;
    var content = "byte array or string";
    var mimeString = "application/octet-stream"; 
    window.BlobBuilder = window.BlobBuilder || 
                         window.WebKitBlobBuilder || 
                         window.MozBlobBuilder || 
                         window.MSBlobBuilder;  


    if(window.BlobBuilder){
       var bb = new BlobBuilder();
       bb.append(content);
       blob = bb.getBlob(mimeString);
    }else{
       blob = new Blob([content], {type : mimeString});
    }
    var url = createObjectURL(blob);
    var a = document.createElement("a");
    a.href = url
    a.download = "file.txt";
    a.innerHTML = "download file";
    document.body.appendChild(a);

Thank you, it works. There are few mistakes: It's a.download, you forget the 'n'. a.innerText didn't work for me I use a.innerHtml. And you don't use the url variable so I added a.href = url. — elpha01, Jul 28 '15 at 08:25

Create big downloable file from string variable in HTML/Javascript

1 Answers1

Linked