JavaScriptでtableタグをエクセルファイル(xlsx)としてダウンロードさせる方法
table内のデータを何らかのファイルでダウンロードさせたい。通常PHPでCSVファイル化する方法を取るが、ASPを利用したサイトのためPHPは使えないという制限があった。「FileSaver.js」と「SheetJS」を使用するとJavaScriptにてエクセルファイル形式でダウンロード可能。以下に実装方法をメモ。
目次
サンプル
https://taitan916.info/sample/table_to_xlsx/
FileSaver.js
公式サイト
https://github.com/eligrey/FileSaver.js
CDN
以下で呼び出す。
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script></head>
異なるバージョンを使用したい場合は以下から探す。
https://cdnjs.com/libraries/FileSaver.js/2.0.0
SheetJS
公式サイト
リファレンス
https://docs.sheetjs.com/docs/
CDN
以下で呼び出す。
<script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
異なるバージョンを使用したい場合は以下のReleases部分から探す。
実装方法
ソースコード
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTMLのtableタグをxlsxファイルに変換</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script></head>
<body>
<div class="container">
<div class="card mt-3 mb-3">
<div class="card-header">都道府県一覧</div>
<div class="card-body">
<button type="button" class="btn btn-primary mb-3" id="xlsx_dlbtn">エクセルファイルDL</button>
<table class="table table-bordered table-condensed table-to-export" data-sheet-name="都道府県一覧">
<tr>
<th>都道府県コード</th>
<th>都道府県 県なし</th>
<th>都道府県 県あり</th>
<th>都道府県 ひらがな</th>
<th>都道府県 ローマ字</th>
</tr>
<tr>
<th>1</th>
<td>北海道</td>
<td>北海道</td>
<td>ほっかいどう</td>
<td>hokkaido</td>
</tr>
<tr>
<th>2</th>
<td>青森</td>
<td>青森県</td>
<td>あおもり</td>
<td>aomori</td>
</tr>
<!-- 省略 -->
<tr>
<th>47</th>
<td>沖縄</td>
<td>沖縄県</td>
<td>おきなわ</td>
<td>okinawa</td>
</tr>
</table>
</div>
</div>
</div>
<script>
$(`#xlsx_dlbtn`).on('click', function () {
const file_name = `test.xlsx`;
const wopts = {
bookType: 'xlsx',
bookSST: false,
type: 'binary'
};
const workbook = {SheetNames: [], Sheets: {}};
$.each($(`.table-to-export`), function( index, val ){
let sheet_name = val.getAttribute('data-sheet-name');
if( !sheet_name ){
sheet_name = 'Sheet' + index;
}
workbook.SheetNames.push(sheet_name);
workbook.Sheets[sheet_name] = XLSX.utils.table_to_sheet(val, wopts);
});
const wbout = XLSX.write(workbook, wopts);
function s2ab(s) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for( let i = 0; i != s.length; ++i ){
view[i] = s.charCodeAt(i) & 0xFF;
}
return buf;
}
saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), file_name);
});
</script>
</body>
</html>ファイル名
file_name部分でエクセルファイル名を指定する。
シート名
tableタグのdata-sheet-name部分でシート名を指定する。尚、tableタグを複数記述した場合、同一エクセルファイル内で複数シートが生成される。
CSVファイル化したい場合
エクセルではなくCSVファイル化したい場合はfile_nameの拡張子をcsvにするのとwoptsのbookTypeをcsvで指定すること。
便利ツール
エクセル→tableタグへの変換ツール
https://html-css-javascript.com/excel-table-html/
所感
今回の対応方法はtable内に全データが表示されている必要があり、ページャー付きのデータ一覧ページとかだと使えないが引き出しの一つとして覚えておきたい。
それにしてもJavaScriptでエクセルファイル化できるというのは驚いた。
参考サイト
関連記事
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)
あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...
-
ローソク足のグラフをJavaScriptで描写する方法(highstock)
株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...
-
Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...
-
JavaScriptにて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)
JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...