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でエクセルファイル化できるというのは驚いた。
参考サイト
関連記事
-
-
バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Tom Select」の利用方法
先日バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装でき ...
-
-
JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法
電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...
-
-
JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法
JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...
-
-
JavaScriptでCookieを取り扱う「js-cookie」ライブラリの利用方法
「jquery-cookie」プラグイン開発終了に伴い「js-cookie」ライ ...
-
-
JavaScriptでフォームのバリデート時に便利な「validator.js」ライブラリの利用方法
JavaScriptでフォームのバリデートを行う際、「半角英数字 正規表現」等で ...