Download attribute, new line in text file

Question

I’m trying to download a text file with information coming from a array but would like to separate these values in new line... tried some bad approaches unsuccessfully the result remains in only one line.

let codes = [
    'sajkhasjdgsa456456',
    'hjkgd576k3nt67sdffd',
    'kjhkdgyfg8677dsfbjk',
    'mcvsaud423409878gsad',
    '123786dhjfsd734234ds45'
]

$('#download-link').on('click', function(code) {
   let data = ''
   for (let i = 0; i < codes.length; i++) {
        data += codes[i] + '\n'
   }
   $(this).attr('href', 'data:text/plain;charset=utf-8,' + data)
})

$('#download-link2').on('click', function(code) {
   let data = codes.join('\n')
   $(this).attr('href', 'data:text/plain;charset=utf-8,' + data)
})

<a id="download-link" href="" download="codes.txt">baixar</a>
<br>
<a id="download-link2" href="" download="codes-2.txt">baixar 2</a>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

Just use escape (since it doesn’t have accents or anything like that), it should look like this:

If you have to work with accents or have spaces or the sign + you may have to use encodeURI or encodeURIComponent in place of escape, in your example as it only has "random" characters like A-Z and 0-9 the escape should work well

let codes = [
    'sajkhasjdgsa456456',
    'hjkgd576k3nt67sdffd',
    'kjhkdgyfg8677dsfbjk',
    'mcvsaud423409878gsad',
    '123786dhjfsd734234ds45'
]

$('#download-link').on('click', function(code) {
   let data = ''
   for (let i = 0; i < codes.length; i++) {
        data += codes[i] + '\n'
   }

   data = escape(data);

   $(this).attr('href', 'data:text/plain;charset=utf-8,' + data)
})

$('#download-link2').on('click', function(code) {
   let data = codes.join('\n');

   data = escape(data);

   $(this).attr('href', 'data:text/plain;charset=utf-8,' + data)
})

<a id="download-link" href="" download="codes.txt">baixar</a>
<br>
<a id="download-link2" href="" download="codes-2.txt">baixar 2</a>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Line break in "Notepad" (Notepad.exe)

The line break \n does not work in some programs with the notepad.exe Windows, this might be because of some need with backward compatibility (Backwards Compatibility)

To make the document visible on notepad.exe you should exchange \n for \r\n, then to explain:

• \n is the line feed (LF)
• \r is Carriage Return (CR)

The LF was used as line breaking in Linux and Unix-based systems, CR was used by Mac systems (before OSX), CRLF was used by older Microsoft systems, however I believe that today all systems use only LF, the reason Notepad.exe still uses CRLF should be to maintain compatibility with old files and clear that today we have software that replaces well the traditional Windows Notepad (such as Notepad++, Sublimetext, etc), so if you want to maintain a backward compatibility change in your code the .join('\n') for .join('\r\n')

Example:

let codes = [
    'sajkhasjdgsa456456',
    'hjkgd576k3nt67sdffd',
    'kjhkdgyfg8677dsfbjk',
    'mcvsaud423409878gsad',
    '123786dhjfsd734234ds45'
]

$('#download-link').on('click', function(code) {
   let data = ''
   for (let i = 0; i < codes.length; i++) {
        data += codes[i] + '\r\n'
   }

   data = escape(data);

   $(this).attr('href', 'data:text/plain;charset=utf-8,' + data)
})

$('#download-link2').on('click', function(code) {
   let data = codes.join('\r\n');

   data = escape(data);

   $(this).attr('href', 'data:text/plain;charset=utf-8,' + data)
})

<a id="download-link" href="" download="codes.txt">baixar</a>
<br>
<a id="download-link2" href="" download="codes-2.txt">baixar 2</a>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Change the \n for %0D%0A that will already work.
Source: response in Stackoverflow.