jQuery/Javascript create a text file for user download

Question

I have a form on my website that creates output for the user based on the input. I want to create a text file with this output for the user to download (with browser download prompt, no security problems).

Is there a way to do this with Javascript/jQuery without using PHP to create the file on the server first?

Can I use some kind of Javascript object to serve as a dummy-file so that the user can download it (to solve the problem that there isn't a real txt file for the user to download from the server)?

Only with Javascript or JQuery it's not possible i think. You need server side script — vamsi
– vamsi, Commented Oct 10, 2016 at 12:04
For older browsers (and simple plaintext files) you can open a window in that document mode. Take a look at this answer http://stackoverflow.com/questions/7338640/document-opentext-plain-formatting-ignored-in-webkit-safari-chrome — Emil S. Jørgensen
– Emil S. Jørgensen, Commented Oct 10, 2016 at 12:14

Fabian Schultz · Accepted Answer · 2016-10-10 12:22:48Z

3

You can achieve that by using Blob (browser support, polyfill). Check out this example by @UselessCode:

(function () {
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);

    return textFile;
  };


  var create = document.getElementById('create'),
    textbox = document.getElementById('textbox');

  create.addEventListener('click', function () {
    var link = document.getElementById('downloadlink');
    link.href = makeTextFile(textbox.value);
    link.style.display = 'block';
  }, false);
})();

<textarea id="textbox">Type something here</textarea> <button id="create">Create file</button> <a download="info.txt" id="downloadlink" style="display: none">Download</a>

edited Oct 10, 2016 at 12:22

answered Oct 10, 2016 at 12:09

Fabian Schultz

18.6k6 gold badges54 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fabian Schultz Over a year ago

There's a Blob polyfill for browsers that don't support it: github.com/eligrey/Blob.js

Collectives™ on Stack Overflow

jQuery/Javascript create a text file for user download

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related