JavaScript代码无法生成多行文本文件，下载后内容均为单行

嘿，我一眼就看出问题在哪了！你现在的代码里，下载的文本本身就没有实际的换行符，而且就算有，也没做跨平台的换行处理，所以才会全部挤成一行。

问题根源 #

• 你定义的text变量里是一整段连续的字符串，模板字符串虽然支持换行，但你写的时候没真正换行，所以字符串里没有\n这类换行标识；
• 就算你加了\n，有些系统（比如Windows的记事本）只认\r\n（CRLF格式）的换行，单纯的\n（LF）可能不会被解析成换行。

修改后的代码 #

先看调整后的JavaScript代码：

function download(filename, text) { 
  // 把LF换行替换成CRLF，确保Windows系统也能正确识别换行
  const formattedText = text.replace(/\n/g, '\r\n');
  var element = document.createElement('a'); 
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(formattedText)); 
  element.setAttribute('download', filename); 
  element.style.display = 'none'; 
  document.body.appendChild(element); 
  element.click(); 
  document.body.removeChild(element); 
} 

// 绑定下载按钮事件
document.getElementById("dwn-btn").addEventListener('click', function(){ 
  // 这里直接在模板字符串里换行，让文本自带\n标识
  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);

HTML部分保持不变：

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

关键改动说明 #

• 给文本添加实际换行：在模板字符串里直接换行（就像上面的text变量那样），这样字符串内部就会包含\n换行符；
• 兼容跨平台换行：通过replace(/\n/g, '\r\n')把所有LF格式的换行转换成CRLF格式，这样不管是Windows还是Unix-like系统，打开下载的文本文件都能正确显示换行；
• encodeURIComponent的作用：它会把\r\n转换成%0D%0A，这在data URI里是标准的换行编码，浏览器下载后会自动解析成文本的换行。

如果你的文本是来自用户输入或者其他数据源，只要确保原始文本里包含正确的换行符，再经过这步转换，就能完美解决单行显示的问题啦！

内容的提问来源于stack exchange，提问作者NRav