【jQuery】配列からCSVを生成しダウンロードする方法【コピペOK】

上記への回答（対処方法）を備忘録として残しておきます。具体的には、jQueryを使って配列からCSVを生成し最終的にダウンロードする方法について解説しています。「出力用の配列は用意できたんだけどCSVで出力する方法が分からない」こんな方にオススメです。

配列からCSVを生成しダウンロードする方法【コピペOK】

ボタンを押すと用意した配列からCSVファイルを生成しダウンロードすることができる、これを実装したいと思います、上記は出力されるCSVファイルのイメージです。

実装方法【超簡単です】

実装する際のポイントは下記の通りです。

• 「イベント用のボタン」と「ダウンロード用リンク」の設置
• CSVファイル生成時の文字化け対策

それでは見ていきましょう。

index.php

<p class="btn">エクスポート</p>
<a style="display:none;" id="downloader" href="#"></a>

main.js / jQuery

$(function(){
  $('.btn').on('click',function(){

    // 配列 の用意
    var array_data = [['りんご',1,200],['メロン',2,4000],['バナナ',4,500]];

    // BOM の用意（文字化け対策）
    var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);

    // CSV データの用意
    var csv_data = array_data.map(function(l){return l.join(',')}).join('\r\n');

    var blob = new Blob([bom, csv_data], { type: 'text/csv' });

    var url = (window.URL || window.webkitURL).createObjectURL(blob);

    var a = document.getElementById('downloader');
    a.download = 'data.csv';
    a.href = url;

    // ダウンロードリンクをクリックする
    $('#downloader')[0].click();
    
  });
});

とりあえずコピペすればこれだけで動作するはずです、細かい部分の説明についてはコメントに記している通りです。実際に使う際は、５行目を削除して、１１行目の[array_data]を用意していた配列に置き換えるだけでいいかと思います。

全然難しくありませんね、実装手順は以上です。

注意点について

注意点としては、対応しているブラウザがFireFoxとchromeとエッジだけなのでそれ以外だと動作しません、マジでIEうぜー。

これを回避するとなるとajaxを使ってPHPに配列を渡して処理させてって流れになるかと思います、ちょっとややこしいので全ブラウザに対応させたい方は調べてみてください。

ほんと良い勉強になりました、今回はこれで終わり。

他の人が読んでいる記事