2020/04/30 20:24

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

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

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

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

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

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

①テーブルを組む

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

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

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

②DLボタンをつける

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

タグ中に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オブジェクトはもういらないので消去してメモリを開放
}