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.

Tannen

You can find the answer to this from one of the answers to the following post (check out the answer about CODE 13): #9980916 – Parallelogram

Answer 1

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

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

Fret

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. – Symbolism

unless your text has multiple newlines in a row, then you want this to happen – Cy

@Cy - 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. – Colfin

Answer 2

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

Powerhouse

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. – Garcia

@Garcia What is octet/stream? – Halfback

Answer 3

I had a similar problem, when the text arrived from JSON. the solution was:

 textToWrite.replaceAll('\\r\\n',"\r\n")

Cryogen

Answer 4

You should put something like that into your code.

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

Osteomalacia

Also I don't know if <br /> would work for me since the end goal is to have a plain text file with line breaks in it. Not an html file. – Tannen

The blob is expected to be text/plain, not html. – Hearne