CSV書き出し後にデータがすべて横一列になって表示されてしまう

Question

#実現したいこと
HTML内に動的に追加されたtableをjs（jQuery）を使用してCSVファイルとしてダウンロードする。

▼動的に作成された以下のtableをCSVとして保存したい

▼CSVとして保存される理想の状態

#発生しているエラー
書き出し後の状態が以下のように横一列で書き出されてしまいます。

書き出しの際、どのようにすれば体裁をそろえた状態で書き出せるのかがわかりません。
#現在のコード

<table>
  <tbody>
    <tr>
      <th>コンテンツ１</th>
      <th>コンテンツ２</th>
    </tr>
    <tr>
      <td>hoge</td>
      <td>huga</td>
    </tr>
  </tbody>
</table>

$(function() {
    $('.csvDownload').click(function() {
        var data = [];
        var tr = $('table tr'); //テーブルの全行を取得
        for (var i = 0, l = tr.length; i < l; i++) {
            var cells = tr.eq(i).children(); //1行目から順番に列を取得(th、td)
            for (var j = 0, m = cells.length; j < m; j++) {
                if (typeof data[i] == 'undefined')
                    data[i] = [];
                data[i][j] = cells.eq(j).text(); //i行目j列の文字列を取得
            }
        }

        console.log(data);

        //ファイル名
        var file_name = 'filelist.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, data], { type: 'text/csv' });
            window.navigator.msSaveOrOpenBlob(blob, file_name);
        } else if (window.webkitURL && window.webkitURL.createObjectURL) {
            // for chrome (and safari)
            blob = new Blob([bom, data], { type: 'text/csv' });
            link.setAttribute('download', file_name);
            link.setAttribute('href', window.webkitURL.createObjectURL(blob));
            link.click();
        } else if (window.URL && window.URL.createObjectURL) {
            // for firefox
            blob = new Blob([bom, data], { type: 'text/csv' });
            link.setAttribute('download', file_name);
            link.setAttribute('href', window.URL.createObjectURL(blob));
            link.click();
        }
    });
});

#参考サイト
テーブル情報を二次元配列に格納！jQueryで簡単にセル値を取得する方法！
JavaScriptでCSVファイルなどを文字化けさせずに出力する方法

Answer 1

行ごとに改行コードを挿入する処理がされていないのが問題に見えます。
全く試していませんが、こんな感じでforの外側のループ（=行のループ）毎に改行コードを加えてあげればいけるんじゃないでしょうか。

• 改行コードはOSによって扱いが異なるので、対応するOS毎に改行コードを分岐させるような処理を追加してあげて下さい。

        for (var i = 0, l = tr.length; i < l; i++) {
            var cells = tr.eq(i).children(); //1行目から順番に列を取得(th、td)
            for (var j = 0, m = cells.length; j < m; j++) {
                if (typeof data[i] == 'undefined')
                    data[i] = [];
                data[i][j] = cells.eq(j).text(); //i行目j列の文字列を取得
            }
            data[i].push("\r\n"); //windowsの場合の改行コード
        }

Comments

[Webtuuuu]

回答ありがとうございます。
記述頂いたコードを参考に改行コードを追加するようにしたところ横一列にはならず理想に近い状態となりました。

しかし、書き出した後なぜかは理由がわかりませんが、
1行目のタイトル部分（画像で言うコンテンツ１、コンテンツ２の部分）は問題ないですが
2行目以降がA列が空白になるようになってしまいました。

具体的には、
1行目：A列・B列にタイトル
2行目：A列空白、B列hoge、C列huga
3行目以降：2行目と同じ

上記のようになっています。
記載頂いた下記が原因となっているのかはわかりませんが、もし原因がわかればご教示いただくことは可能でしょうか…？

data[i].push("\r\n"); //windowsの場合の改行コード

※ちなみに一旦今はWindowsだけで動作すればOKです

[tanat]

改行コードを入れる場所が若干ずれているのかも?
もしくは入れ方が間違っているか。
(試してもいないコードなので、何かミスがあるんだと思います)

以下にデバッグ方法を書いてみるので、デバッグしてみて下さい。

まずは改行コードを表示、指定できるテキストエディタを用意して、理想的なCSV(エクセルで作るでも何でも良いです)を開いて、作るべきCSVが改行コードを含めてどうなっているのか確認して下さい。

確認出来たら、今回のCSVと比較して何が違うかを検証し、その違いを埋める様に色々試して見てください。

その際、もう少しミニマムなコードで検証すると、それぞれのコードで何をしているか把握できます。

参考
http://do-aki.hatenablog.jp/entry/20130225/1361763613

[moredeep]

Blobが2次元配列だろうが1行分のデータとしてみて、改行文字の後にもカンマを付けてしまっているんじゃないでしょうか。だから、改行後の１文字目にカンマが入っていると。ループ毎に改行は入れずに、手動でJoinしてしまった方がいいと思います。
data = data.map((d)=>d.join(',')).join('\r\n');

[tanat]

> moredeepさん

補足ありがとうございます。
ご指摘の通りだと思います。

[Webtuuuu]

返答が遅くなり申し訳ございません。
回答ありがとうございました。

moredeepさんがおっしゃるとおりに実装したところ理想通りの挙動となりました。

以下理想の挙動のコード

var data = [];
var tr = $('table tr'); //テーブルの全行を取得
for (var i = 0, l = tr.length; i < l; i++) {
var cells = tr.eq(i).children().not('.sheethidden'); //1行目から順番に列を取得(th、td)
for (var j = 0, m = cells.length; j < m; j++) {
if (typeof data[i] == 'undefined')
data[i] = [];
data[i][j] = cells.eq(j).text(); //i行目j列の文字列を取得
}
}
data = data.map((d)=>d.join(',')).join('\r\n'); //回答いただいたコード