Zenn
😊

Papa parse.jsとtabulator.jsでWEB画面上にエクセル風のテーブルを作る。

2023/06/04に公開
JavaScript
tabulator
papaparce
tech

経緯

  1. 仕事の都合で膨大なデータをCSVで処理することに
  2. 単純なExcelでは、情報更新に限界があったので、VBA(マクロ）の使用許可を会社に求める
  3. セキュリティの関係上、マクロの使用が否決😱　←今ココ

使用可能な環境

  1. ブラウザはEdgeのみ
  2. JSライブラリは使えるが、インターネットに直接繋がらないのでCDNは不可
  3. 使えるエディタはメモ帳のみ（笑）

縛りが厳しすぎますが、この環境でなんとかしなければなりません・・・

とりあえず解決策を考えてみた（技術選考）

  1. ライブラリとCSVは使えるため、CSV操作ライブラリとしてPapa parseを選択。
  2. テーブルの描写を<tr><td>で描くのが面倒くさいので、テーブル描写ライブラリとしてtabulatorを選択。
  3. CSV間のデータを抽出したり集約する予定であるので、使うかわからないけど、配列操作ライブラリとしてLodashを選択。

https://www.papaparse.com/

https://tabulator.info/

https://lodash.com/

図解（単に使ってみたかったMermaid.js）

まずはシンプルにCSVを出力してみる

<!DOCTYPE html>
<html>
<head>
    <title>単純にCSVをテーブルにするだけ</title>
    <link href="tabulator.min.css" rel="stylesheet">
    <script src="tabulator.min.js"></script>
    <script src="papaparse.min.js"></script>
</head>
<body>
    <input type="file" id="csvFile" accept=".csv">
    <div id="table"></div>

    <script>
    document.getElementById('csvFile').addEventListener('change', function(e){
        var file = e.target.files[0];
        Papa.parse(file, {
            header: true,
            complete: function(results) {
                var data = results.data;
                var columns = results.meta.fields.map(function(field){
                    return {title: field, field: field};
                });
                var table = new Tabulator("#table", {
                    data: data, 
                    columns: columns,
                    layout:"fitColumns"
                });
            }
        });
    });
    </script>
</body>
</html>

解説

  1. まずはHTMLでCSVの受け取りと、テーブルを受け取るコードを書きます
    <input type="file" id="csvFile" accept=".csv">
    <div id="table"></div>
  1. 次にdocument.getElementById('csvFile').addEventListener('change', function(e){でCSVが指定された時の動作を決めます。
var file = e.target.files[0]; //id:csvFileがチェンジしたとき、そのCSVを受け取る変数
Papa.parse(file, { //jQueryでもできますが、papaparseでCSVを受け取り
  header: true,
  complete: function(resulelts) { //CSVを読み込み終わった後の動作
	var data = results.data; //読み込まれたCSVがresultsに格納されているため、それをdata変数へ移す
        var columns = results.meta.fields.map(function(field){ //配列のMAP操作を使って、resultsからデータを１つずつ抜き取る
        return {title: field, field: field};
  });
  1. new Tabulatorで新しいtabulatorインスタンスを設定
var table = new Tabulator("#table", {
  data: data, //CSVをdata変数にしたものを、Tabulatorのdataへと移す
  columns: columns,　//CSVから１つずつ抜いたデータをTabulatorのcolumnsへ移す
  layout:"fitColumns"　//tabulatorのレイアウトのひとるfitColumnsを選択

こんな感じになります。

https://clipchamp.com/watch/vPkwJZgurVE

長くなったので、続きはまた別記事にします。

Discussion