tableタグ内のデータをCSV形式でダウンロードできる「jQuery-csvExport」ライブラリの使用方法

HTMLのtableタグ内のデータをCSV形式でエクスポートさせたいケースがあった。ただ、サーバサイド言語は使用できない制約があった。以前に似たようなライブラリをメモしたが、CSVだけを取り扱う場合は「jQuery-csvExport」の方がシンプルに実装できそう。以下にサンプルと実装方法をメモ。

サンプル

https://taitan916.info/sample/JQuery-csvExport/

JQuery-csvExport

Github

https://github.com/Zenoo/JQuery-csvExport

CDN

CDNで使う場合は以下を記述する。jQuery必須な点に注意。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://unpkg.com/csvexporter@1.4.0/csvExport.min.js"></script>

異なるバージョンを利用したい場合は以下から探す。

https://app.unpkg.com/csvexporter@1.4.0

実装方法

ソースコード

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://unpkg.com/csvexporter@1.4.0/csvExport.min.js"></script>

<script>
$(function(){
    $(`#dl_btn`).on(`click`, function(){
        const option = {
            title: `sample.csv`, //CSVのファイル名
        };
        $(`#data_table`).csvExport(option);
    });
});
</script>