JavaScriptでtableタグをエクセルファイル(xlsx)としてダウンロードさせる方法
2025/06/21
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でエクセルファイル化できるというのは驚いた。
参考サイト
関連記事
-
-
JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法
電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...
-
-
jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法
あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...
-
-
JavaScriptにて「loglevel」ライブラリを利用して環境及びレベルによりログを出し分けする方法
JavaScriptにて何らかの確認の際にconsole.logを使うことが多い ...
-
-
JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法
サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...
-
-
JavaScriptでランダムなカラーコードを生成する「RandomColor」ライブラリの利用方法
先日PHPでランダムなカラーコードを生成する「RandomColor.php」ラ ...