macoblog

「ゲーム × プログラミング」で生きていく

アプリ検索ツール(β版)を公開

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

JavaScript プログラミング

maco

maco(筆者)
「見積りフォームで用意した配列を、ボタンを押す事でCSVファイルとしてダウンロード出来るようにしたい」

こんな事がありまして、忘れそうなので備忘録としてシェアしておきます。

本記事では、jQuery(javascript)を使って配列からCSVを生成し最終的にダウンロードする方法について解説しています。「出力用の配列は用意できたんだけどCSVで出力する方法が分からない」こんな方にオススメです。

「聞きかじった知識でajax触ると泥沼にハマルぞ」

目次【本記事の内容】

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

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

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

実装方法【超簡単です】

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

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

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

index.php

下記をコピペしてください。

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

1行目がクリックする用のボタンです、ここをクリックすることでイベントを発火させます。

2行目がダウンロードリンクです、style="display:none;"をしている事から分かるように、表示させません、javascriptでCSV出力させるにはここの扱い方が鍵になります。

jQuery(javascript)

下記をscriptタグを使うか、jsファイルを用意してそこにコピペして読み込ませてください。

$(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();
    
  });
});

とりあえずコピペすればこれだけで動作するはずです、細かい部分の説明についてはコメントアウトしている通りです。

実際に使う際には、5行目を削除して、11行目の[array_data]を用意していた配列に置き換えるだけでいいかと思います。

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

・参考にした記事(ありがとうございました)
ブラウザだけで Excel 向け日本語 CSV ファイルを作る方法

注意点について

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

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

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