• HOME
  • CODE
  • [Javascript]テーブルから任意のデータ一覧をCSVでダウンロードできるボタンの実装

2020/04/30 20:24

[Javascript]テーブルから任意のデータ一覧をCSVでダウンロードできるボタンの実装

テーブル等に一覧表示させたものをCSVファイルとしてダウンロードする方法です。

以前に案件で実装して欲しいという要望がありましてやってみました。

どっかの記事から引っ張ってきたものをシンプルにカスタムしただけです。

けっこう簡単にできるのでオススメですよ。

 

 

やり方は簡単3ステップ!

 

①テーブルを組む

 

テーブルタグでテーブルを組みます。

表示させたいデータをPHPでループさせたりして内容を引っ張って表示させたりすればいいかと。

繰り返しフィールドとの組み合わせやDBから引っ張って表示、みたいな使い方でまずは一覧表示させる。

 

②DLボタンをつける

 

DL用のボタンはaタグでおkです。

タグ中にJSを読ませる記述なんかが書かれてます。

 

③JSで制御

 

BOMと呼ばれるやつ(UTF-8とかの為の)を含ませてエクセルでそのまま開く事ができる仕様になってます。

処理内容としてはテーブルタグの中身を引っ張ってそれをCSV出力させるというシンプルなものです。

HTML側のIDとかを読み込んでるのでいじる際は注意。

 

 

実装コード

 

ではコード記述例です。

 

 

【HTML】

 

<table id="table1">

<tr>

<th>受付番号</th>

<th>予約日</th>

<th>メニュー</th>

</tr>

 

<tr>

<td>1</td>

<td>2019/1/1</td>

<td>ラーメン</td>

<tr>

 

<tr>

<td>2</td>

<td>2019/2/1</td>

<td>つけ麺</td>

<tr>

 

<tr>

<td>3</td>

<td>2019/3/1</td>

<td>ぼくイケメン</td>

<tr>

 

</table>

<a id="download" href="#" download="download.csv" onclick="handleDownload()">ダウンロード</a>

 

 

 

【Javascript】

 

//CSV出力&ダウンロード

function handleDownload() {

var bom = new Uint8Array([0xEF, 0xBB, 0xBF]); //文字コードをBOM付きUTF-8に指定

var table = document.getElementById('table1'); //id=table1という要素を取得

var data_csv=""; //ここに文字データとして値を格納していく

 

for(var i = 0;  i < table.rows.length; i++) {

for(var j = 0; j < table.rows[i].cells.length; j++) {

data_csv += table.rows[i].cells[j].innerText; //HTML中の表のセル値をdata_csvに格納

if(j == table.rows[i].cells.length-1) data_csv += "\n"; //行終わりに改行コードを追加

else data_csv += ","; //セル値の区切り文字として,を追加

}

}

 

var blob = new Blob([ bom, data_csv], { "type" : "text/csv" }); //data_csvのデータをcsvとしてダウンロードする関数

if (window.navigator.msSaveBlob) { //IEの場合の処理

window.navigator.msSaveBlob(blob, "test.csv");

//window.navigator.msSaveOrOpenBlob(blob, "test.csv");// msSaveOrOpenBlobの場合はファイルを保存せずに開ける

} else {

document.getElementById("download").href = window.URL.createObjectURL(blob);

}

 

delete data_csv; //data_csvオブジェクトはもういらないので消去してメモリを開放

}

 

 

上記が記述例となります。

 

保存する名前の付け方とかはカスタマイズしてみてください。

 

 

現場から以上です!

6208

PICK UP