JavaScriptでCSVファイルなどを文字化けさせずに出力する方法

JavaScriptでCSVやテキストファイルなどを出力したとき、環境や見るツールによっては文字化けしてしまう。たとえばCSVで出力して、テキストエディタでは読めるけど、Excelで開くと文字化けするなど。

結論からいうと、テキストの先頭にBOMをつければ解消される。
ということで、各ブラウザ（IE, Safari, Firefox, Chrome, Opera...）でファイルを出力するときに文字化けさせない方法をまとめる。

BOM（Byte Order Mark）とは

そもそもBOMとはなんぞや？

Unicodeの符号化形式で符号化したテキストの先頭につける数バイトのデータのことである。このデータを元にUnicodeで符号化されていることおよび符号化の種類の判別に使用する。

バイトオーダーマーク - Wikipedia

具体的に説明すると、Unicodeが登場したころ各国でいろんな文字コードが使われていた。日本ならSJIS、アメリカならASCIIといった具合に。

そこでUnicodeなのかSJIS,ASCIIなのかを明確に区別する必要があり、テキストの先頭に特定のコードを埋め込み区別できるようにしていた。そのコードがBOM。
ちなみにUTF-8の場合は「0xEF 0xBB 0xBF」という3バイトを先頭につける。

BOM付きファイルを出力する

var csv = 'ここにCSVのデータを入れる';

var link = document.createElement('a');
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
var blob;

if (window.navigator.msSaveOrOpenBlob) {
  // for ie
  blob = new Blob([bom, csv], {type: 'text/csv'});
  window.navigator.msSaveOrOpenBlob(blob, csvName);
} else if (window.webkitURL && window.webkitURL.createObjectURL) {
  // for chrome (and safari)
  blob = new Blob([bom, csv], {type: 'text/csv'});
  link.setAttribute('download', csvName);
  link.setAttribute('href', window.webkitURL.createObjectURL(blob));
  link.click();
} else if (window.URL && window.URL.createObjectURL) {
  // for firefox
  blob = new Blob([bom, csv], {type: 'text/csv'});
  link.setAttribute('download', csvName);
  link.setAttribute('href', window.URL.createObjectURL(blob));
  link.click();
}

new Uint8Array([0xEF, 0xBB, 0xBF]) がUTF-8のBOMになる。
new Blob([bom, csv]) でBOM付きのファイルをつくる。

あとはブラウザによって出力方法を変えている。
ただし、Safariの場合はうまく動作しないので注意！

「IE○ね!!」ってより「Safari○ね!!」と思うことが多いのは、私だけだろうか？




より具体的な実装方法を知りたい方は、以下の記事を参照してください。

参考リンク

• Uint8Array - JavaScript | MDN
• Blob - Web API インターフェイス | MDN
• ブラウザだけで Excel 向け日本語 CSV ファイルを作る方法 - do_akiの徒然想記

以上

written by @bc_rikko