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.
A Blob is an opaque reference to, or handle for, a chunk of data. The name comes from SQL databases, where it means “Binary Large Object.” In JavaScript, Blobs often represent binary data, and they can be large, but neither is required: a Blob could also represent the contents of a small text file.
BLOB is used for storing binary data while Text is used to store large string. BLOB values are treated as binary strings (byte strings). They have no character set, and sorting and comparison are based on the numeric values of the bytes in column values. TEXT values are treated as nonbinary strings (character strings).
I ran into the same problem. This seems to be working for me:
textToWrite = textToWrite.replace(/\n/g, "\r\n");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With