Unable to retain line breaks when writing text file as blob

Question

I have a text area that contains text that I want to output to a text file for users to download.

I'm using this function to grab it when users click the save button

function saveTextAsFile()
{
    var textToWrite = document.getElementById("inputText").value;
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
    alert(textFileAsBlob);
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    if (window.webkitURL != null)
    {
        // Chrome allows the link to be clicked
        // without actually adding it to the DOM.
        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    }
    else
    {
        // Firefox requires the link to be added to the DOM
        // before it can be clicked.
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
    }

    downloadLink.click();
}

But the line breaks aren't retained. They exist in document.getElementById("inputText").value; but not in the text file created from the blob.

You can find the answer to this from one of the answers to the following post (check out the answer about CODE 13): http://stackoverflow.com/questions/9980416/how-can-i-insert-new-line-carriage-returns-into-an-element-textcontent — Matthew Herbst, Dec 07 '13 at 08:30

score 38 · Accepted Answer · edited May 14 '15 at 08:52

38

I ran into the same problem. This seems to be working for me:

textToWrite = textToWrite.replace(/\n/g, "\r\n");

edited May 14 '15 at 08:52

Dyrandz Famador

4,499
5
25
40

answered Apr 23 '14 at 19:35

nihlton

659
6
7

1

Actually, you should do like this: `.replace(/([^\r])\n/g, "$1\r\n");`. This way, it avoids matching `\r\n`, which would end up as `\r\r\n`. – Ismael Miguel May 14 '15 at 08:56
unless your text has multiple newlines in a row, then you want this to happen – quemeful Feb 21 '18 at 16:39
1

@quemeful - you want what to happen? The original answer code? Or Ismael's suggested change? Put another way - what if my text has single newlines in some places, and multiple newlines in others - what is the correct code for this? The answer supplied seems to work for this scenario. – youcantryreachingme Feb 25 '18 at 02:51

Vinu · Answer 2 · 2018-09-11T15:08:03.047

4

change

var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});

to

var textFileAsBlob = new Blob([textToWrite], {type:'text/plain',endings:'native'});

May not work in IE and I dont know how to fix it

edited Sep 11 '18 at 15:08

answered Sep 11 '18 at 14:44

Vinu

89
5

Worked in IE too. Both `new Blob([content], { type: "octet/stream", endings: "native" })` and `new Blob([content], { type: "text/plain", endings: "native" })` worked in IE11. – SNag Mar 09 '21 at 14:04
@SNag What is `octet/stream`? – IS4 Mar 27 '22 at 19:08

score -5 · Answer 3 · answered Oct 06 '13 at 15:13

-5

You should put something like that into your code.

textToWrite.replace(/\r?\n/g, '<br />');

answered Oct 06 '13 at 15:13

Lambros

151
2
14

Also I don't know if
would work for me since the end goal is to have a plain text file with line breaks in it. Not an html file. – Matt Oct 07 '13 at 12:45
2

The blob is expected to be `text/plain`, not html. – madfriend Sep 26 '14 at 14:12

Unable to retain line breaks when writing text file as blob

3 Answers3

Linked