CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: JavaScript: Create download link of JS generated data  (Read 809 times)

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
JavaScript: Create download link of JS generated data
« on: 1 Feb 2020, 04:59:03 pm »
Whilst for the most part one should always try to make downloads be a server-handled thing, sometimes it's faster/easier to generate data in JavaScript... but how do you take a JavaScript variable and make a download out of it without spitting it back to the server?

Well, here's how:

Code: [Select]
function fileDownload(filename, content, mimeType) {
var a = document.createElement('a');
a.download = filename;
a.href = 'data:' + (
mimeType || 'text/plain'
) + ';charset=utf-8,' + encodeURIComponent(content);
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
} // _.fileDownload

We make an anchor element, we set the download attribute to our desired filename, then in the href we set data:text/plain (or whatever mime-type you want) with the charset followed by a comma, then a URI encoded version of our data. This anchor when clicked on will magically turn that data: into a download with the DL attribute as the filename.

From there we just make sure it's display:none, append it to the body, trigger its click even, then remove/delete it.

so:

Code: [Select]
fileDownload('test.txt', 'This is a test');

Will trigger a browser download "test.txt" which contains "this is a test". Easy-peasy lemon squeezy.

« Last Edit: 4 Feb 2020, 11:40:56 pm by Jason Knight »
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

jmrker

  • Junior Member
  • *
  • Posts: 43
  • Karma: +1/-0
Re: JavaScript: Create download link of JS generated data
« Reply #1 on: 4 Feb 2020, 11:35:12 pm »
Wasn't sure what this suggested function was supposed to do, but I tried it.

Did not work until I discovered that 'd' in the statement:    var a = d.createElement('a');
was supposed to be document as it had not been defined.

Worked fine as a simulated file load after that.
Looking forward to a chance to incorporate it sometime in the future.
:)

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: JavaScript: Create download link of JS generated data
« Reply #2 on: 4 Feb 2020, 11:45:58 pm »
was supposed to be document as it had not been defined.

oops, thought I got 'em all after removing it from the SIF/IIFE... missed one.

Thing I found it useful for was making a download direct from a CANVAS context, since you can toDataUrl into a base64 png.. in which case you don't even have to encodeURIComponent it or say data:mime-type as it's already on it.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

Just gut the routine down to:

Code: [Select]
function dataURLToFileDownload(filename, content) {
var a = document.createElement('a');
a.download = filename;
a.href = content;
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
} // dataURLToFileDownload

Feed it Canvas.toDataURL's output and you're off to the races.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

 

SMF spam blocked by CleanTalk

Advertisement