create multiline text file from javascript code

Question

I have found this code, but am unable to create a multi-line text file when I click the 'download' button. It seems to be all in one string of text... I have tried different ways of concatenate but none have worked ...

I cannot figure out what piece I am missing!

Cheers :)

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// Start file download.
document.getElementById("dwn-btn").addEventListener('click', function(){
  // Generate download of hello.txt file with some content
  var text = `A rather long string of English text, an error message
actually that just keeps going and going -- an error
message to make the Energizer bunny blush (right through
those Schwarzenegger shades)! Where was I? Oh yes,
you\'ve got an error and all the extraneous whitespace is
just gravy.  Have a nice day`;

  var filename = "hello.txt";

  download(filename, text);
}, false);

<input type="button" id="dwn-btn" value="Download" />

use back ticks and it should work just fine. so multiline text should be like Your multiline text — binariedMe
– binariedMe, Commented May 10, 2018 at 16:38
I modified the OG code so you guys can see the result .... still not saving/generating a multi-line text file... — NRav
– NRav, Commented May 10, 2018 at 16:48

Mr. Polywhirl · Accepted Answer · 2018-05-10 17:52:29Z

1

See: Multiline strings in ES6 JavaScript

Your issue is that you are not retrieving the text from a word processor or notepad (which preserves new lines). You are defining the string value IN-LINE with the code.

Update: Incorporated a function call into the string.

You either need to place literal new-lines at the end of each line.

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);
  element.style.display = 'none';
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

function getLastUpdated() {
  return `\nLast updated: ${new Date().toISOString()}`;
}

// Start file download.
document.getElementById("dwn-btn").addEventListener('click', function(){
  // Generate download of hello.txt file with some content
  var text = `A rather long string of English text, an error message \n
actually that just keeps going and going -- an error \n
message to make the Energizer bunny blush (right through \n
those Schwarzenegger shades)! Where was I? Oh yes, \n
you\'ve got an error and all the extraneous whitespace is \n
just gravy.  Have a nice day \n
${getLastUpdated()}`;

  var filename = "hello.txt";

  download(filename, text.replace(/\n/g, '\n\r')); // Convert LF ro LFCR
}, false);

<input type="button" id="dwn-btn" value="Download" />

Or, join the lines together inside of an array. There is no other way to do this. The back-ticks and back-slashes ignore new lines. Visually having new-lines in the code does not translate to new-lines in the text. It just makes it easier for YOU to see the new lines.

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);
  element.style.display = 'none';
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

function getLastUpdated() {
  return `\n\nLast updated: ${new Date().toISOString()}`;
}

// Start file download.
document.getElementById("dwn-btn").addEventListener('click', function(){
  // Generate download of hello.txt file with some content
  var text = [
    'A rather long string of English text, an error message',
    'actually that just keeps going and going -- an error',
    'message to make the Energizer bunny blush (right through',
    'those Schwarzenegger shades)! Where was I? Oh yes,',
    'you\'ve got an error and all the extraneous whitespace is',
    'just gravy.  Have a nice day',
    getLastUpdated()
  ].join('\n');

  var filename = "hello.txt";

  download(filename, text.replace(/\n/g, '\r\n')); // Convert LF ro CRLF
}, false);

<input type="button" id="dwn-btn" value="Download" />

edited May 10, 2018 at 17:52

answered May 10, 2018 at 17:24

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

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

4 Comments

NRav Over a year ago

LEGEND. Here is my final question - I have another bit of javascript code that generates one line and displays the result of the function when run; <p id="output"></p> --- how can I integrate this in to var text as an independent line ?

Mr. Polywhirl Over a year ago

@NicholasRavanelli Not sure I follow, but you may need to update your question or create a new one.

NRav Over a year ago

I asked this question a couple days ago, I am essentially using this code as is (just instead of running code as it changes, I implemented a button) stackoverflow.com/a/50106858/4449817 ---- What I am after is embedding the string text formed into the middle of the array as you've elegantly created.

NRav Over a year ago

I somehow cannot integrate both functions to communicate... here is my jsfiddle I am trying to muck around with; jsfiddle.net/bonj609g

binariedMe · Accepted Answer · 2018-05-10 16:41:26Z

0

Can you use back-ticks (`) for this use case?

something like this :

var text = `A rather long string of English text, an error message 
actually that just keeps going and going -- an error 
message to make the Energizer bunny blush (right through 
those Schwarzenegger shades)! Where was I? Oh yes,
you've got an error and all the extraneous whitespace is
just gravy.  Have a nice day.`;

answered May 10, 2018 at 16:41

binariedMe

4,3291 gold badge20 silver badges34 bronze badges

Collectives™ on Stack Overflow

create multiline text file from javascript code

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related