読者です 読者をやめる 読者になる 読者になる

7cc@はてなブログ

JavaScriptとかとか

a.download + data:text/plain or Blob でテキストを保存したら改行がLFになった

JavaScript

一行ならCRLF, 改行があるとLFで保存されて困った。
CRLFなので当然環境はWindows

JavaScriptを用いたファイル保存の方法は方法は2つあるようだが、どちらでも同じ問題が出た。

原因

textarea.valuenode.textContentの改行は\nになる。
\rが無いので、そのまま保存するとLFとなる

対処

navigator.userAgentでWindowsなら\r\nに変えてやる
ちなみにtextareaのvalueを直接書き換えても\rは反映されない

CRLFで保存されるようにしたコード

<textarea id="source"></textarea>
<a id="save_source" href="#">save as text</a>
<a id="invisible_save_source" aria-hidden="true"></a>
function saveText(ev) {
  ev.preventDefault()
  var data = document.getElementById("source").value
  if ( ~navigator.userAgent.indexOf("Windows") ) {
    data = data.replace(/\n/g, "\r\n").replace(/\r\r/g, "\r")
  }
  var blob = new Blob([data], { type: 'text/plain' })
  var url = URL.createObjectURL(blob);
  var filename = prompt("この名前で保存する", document.title) 
  var fileType = '.txt'
  var a = document.getElementById("invisible_save_source")
  a.download = filename + fileType
  a.href = url
  if (!filename) { return }
  a.click()
}

document.getElementById("save_source").addEventListener("click", saveText, false)

promptのところはオサレなダイアログでも使えばいいと思います。

demo