質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • HTML

    11122questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    7977questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSV

    834questions

    CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 155

K.tukapon

score 9

実現したいこと

HTML内に動的に追加されたtableをjs(jQuery)を使用してCSVファイルとしてダウンロードする。

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

▼CSVとして保存される理想の状態
書き出し後の理想の状態

発生しているエラー

書き出し後の状態が以下のように横一列で書き出されてしまいます。
現在の書き出し後の状態
書き出しの際、どのようにすれば体裁をそろえた状態で書き出せるのかがわかりません。

現在のコード

<table>
  <tbody>
    <tr>
      <th>コンテンツ1</th>
      <th>コンテンツ2</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ファイルなどを文字化けさせずに出力する方法

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+3

行ごとに改行コードを挿入する処理がされていないのが問題に見えます。
全く試していませんが、こんな感じで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の場合の改行コード
        }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/15 09:37 編集

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

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

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

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

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

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

    キャンセル

  • 2019/04/15 10:02 編集

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

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

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

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

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

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

    キャンセル

  • 2019/04/15 11:34

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

    キャンセル

  • 2019/04/15 12:00

    > moredeepさん

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

    キャンセル

  • 2019/04/16 14:35

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

    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'); //回答いただいたコード

    キャンセル

同じタグがついた質問を見る

  • HTML

    11122questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    7977questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSV

    834questions

    CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。