htmlで作成した配列をcsvファイルにしたいが文字化けする。

Question

前提・実現したいこと

参考URL

このサイトを参考に
ローカルのhtmlで作成した配列に入ってるデータをcsvにいれて、ダウンロードしたいと考えています。
しかし開いたcsvファイルが下のようになります。

ちなみに配列に入ってるデータは下のようになっているはずです。

なにが原因なのでしょうか＿

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<script>
  var arr = new Array();
  value = data.getInt16(0);//2Byteの場合のフォーマット

  value2 = data.getInt16(2);


  arr.push([value,value2])

  value = data.getInt16(0);//2Byteの場合のフォーマット

  value2 = data.getInt16(2);


  arr.push([value,value2])
// (1) BOM の用意
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
// (2) CSV データの用意
var csv_data =arr.map(function(l){return l.join(',')}).join('\r\n');
// (3) BOM 付き CSV ファイルの元となる Blob を作成
var blob = new Blob([bom, csv_data], { type: 'text/csv' });
// (4) createObjectURL を使って Blob URL を構築
var url = (window.URL || window.webkitURL).createObjectURL(blob);
// (5) Blob URL をダウンロードさせるリンクを作る
var a = document.getElementById('js-download');
a.download = '2data.csv';
a.href = url;
</script>

試したこと

// (1) BOM の用意
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
参考URLは3列で、私のは2列分のデータしかないので
var bom = new Uint8Array([0xEF, 0xBB]);
とすると出力されるcsvファイルの中身が・
だけになりました。
arrの値はconsole.table(arr)で確認できています。

補足情報（FW/ツールのバージョンなど）

google chrome を使っています。

Answer 1

// (1) BOM の用意
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
// (2) CSV データの用意
var csv_data =arr.map(function(l){return l.join(',')}).join('\r\n');
// (3) BOM 付き CSV ファイルの元となる Blob を作成
var blob = new Blob([bom, csv_data], { type: 'text/csv' });
// (4) createObjectURL を使って Blob URL を構築
var url = (window.URL || window.webkitURL).createObjectURL(blob);
// (5) Blob URL をダウンロードさせるリンクを作る
var a = document.getElementById('js-download');
a.download = '2data.csv';
a.href = url;
この処理を書く場所を変えたらうまく動作しました