11

I have a large data in form of JSON object in the javascript. I have converted it into the string using JSON.stringify(). Now my use case is to provide this large string in a text file to the user. So for this i have written below code.

HTML code

  <button id='text_feed' type="submit">Generate ION Feed</button>

  <a href="data:attachment/txt" id="textLink" download="feed.txt"></a>

Javascript code

 var text = //huge string  

 $("#text_feed").click(function() {
        _generateFeed(text);
 });

 var _generateFeed = function(text) {
    //some code here
    $("#textLink").attr("href",
                          "data:attachment/txt," + encodeURIComponent(text))  [0].click();
    });
 };

Problem: When the string length is small , i am able to download the data . But when the string length goes higher (> 10^5) , my page crashes. This occurred because "encodeUriComponet(text)" is not able to encode large data.

I also tried window.open("data:attachment/txt," + encodeURIComponent(text)); But again my page got crashed because of the same reason that encodeURIComponet was unable to encode such a large string.

Another approach: I was also thinking of writing the data into a file using HTML5 File write API , but it has support only in Chrome web browser , but i need to make this work for atleast firefox and chrome both.

Use Case I don't want to do multiple downloads by breaking the data, as i need to have data in a single file in the end.

And my target is to support string of aprroximately 10^6 length. Can anyone help me how to download/write this amount of data into a single file.

ankur37
  • 111
  • 2
  • 5
  • 7
    How about `URL.createObjectURL (new Blob(text, {type : 'text/plain'}));` - does that work? – CodingIntrigue May 11 '15 at 12:15
  • @RGraham Agreed, try the [Blob API](https://developer.mozilla.org/en/docs/Web/API/Blob)! – Sebastian Simon May 11 '15 at 12:16
  • 2
    [Here’s a demo of that](http://jsfiddle.net/efLfqp3f/). Blob compiles a megabyte of text like it’s nothing. – Sebastian Simon May 11 '15 at 12:26
  • 1
    @RGraham and Xufox thanks. It works for me :) – ankur37 May 11 '15 at 12:53
  • Except don't forget to check the [compatibility](https://developer.mozilla.org/en-US/docs/Web/API/URL) of URL and createObjectURL. – chris May 11 '15 at 13:25
  • @user2509908 Don't worry, it's got better support than the `[download]` attribute itself :) @user3704217 you should leave an answer with the code to demonstrate how you solved it in the context of the problem! – CodingIntrigue May 11 '15 at 13:27
  • @RGraham Fair enough. I didn't mean to undermine your answer. Just thought worth noting that many of these techniques are not as compatible as we think. You are correct, however. I can delete my comments if you wish :) – chris May 11 '15 at 13:37
  • Not at all! That's not what I was getting at, just pointing out that if the `[download]` attribute it being used, that will most likely be the compatibility bottleneck :) Your comment is certainly valid! – CodingIntrigue May 11 '15 at 13:38
  • 1
    I solved it as below. `var _generateFeed = function(text) { /*some code here*/ var url = URL.createObjectURL( new Blob( [text], {type:'text/plain'} ) ); $("#textLink").attr("href",url)[0].click(); };` – ankur37 May 11 '15 at 14:27
  • wich one is your server? maybe a expressjs server?? It has a limit to json files.. – Alejandro Teixeira Muñoz Jun 08 '15 at 17:47
  • @ankur37 This question should be closed if you found a solution. There's no need for it to appear on the unanswered list. – Brett Sep 14 '15 at 13:49
  • "...must be released by calling URL.revokeObjectURL() when you no longer need them. Browsers will release these automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so." (from https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL ) – Doku-so Jun 16 '16 at 12:02
  • @Xufox, the demo do not work for me. Improve it by add download attribute to element. See [this demo](https://jsfiddle.net/efLfqp3f/8/) – aruku7230 Jan 13 '18 at 09:03

1 Answers1

1

From the OP:

I solved it as below.

var _generateFeed = function(text) {
    /*some code here*/
    var url = URL.createObjectURL( new Blob( [text], {type:'text/plain'} ) );
    $("#textLink").attr("href",url)[0].click();
};

Notes:

  • URL.createObjectURL() is compatible with modern browsers and IE10+, but it is an unstable, experimental technology.
  • Objects created using URL.createObjectURL() "must be released by calling URL.revokeObjectURL() when you no longer need them." - MDN
Community
  • 1
  • 1
JDB
  • 25,172
  • 5
  • 72
  • 123