【カスタムブロック】エクセルを読み込んでテーブルで表示する

hayase

2020.06.16

ブロックエディタ

【カスタムブロック】エクセルを読み込んでテーブルで表示する

カスタムブロックでは独自のブロックを追加できますが、今回はエクセルファイルをアップロードすると自動的にテーブルに変換してくれるブロックを作成してみます。

実用的に使えるので是非お試しください。
※ ブラウザ Safari ではセキュリティ上の制限により動作しません。

カスタムブロックの作成

カスタムブロックは左メニューのカスタムブロック＞新規から作成できます。今回は以下で設定してください。

カスタムブロックの編集ページの右上の読み込むボタンから以下のファイルを読み込んでも同じものが作成できます。

excel.jsonをダウンロード

名前：エクセル
識別子：excel
ブロック：何もしない
ブロックの追加と削除：チェックを外す

カスタムスクリプトには以下を挿入してください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.2/xlsx.full.min.js" integrity="sha256-SOeQ8yqDi+NlDLrc0HMhyEdsXn+Z/TPVSjhAukwBiyU=" crossorigin="anonymous"></script>
<script>
function excelToTable(file) {
  var reader = new FileReader();

  reader.onload = function (e) {
    var data = e.target.result;
    var workbook = XLSX.read(data, {
      type: "binary",
    });

    workbook.SheetNames.forEach(function (sheetName) {
      var rows = XLSX.utils.sheet_to_row_object_array(
        workbook.Sheets[sheetName]
        , {header:1}
      );

      var html = "<table>";

      html += "<thead><tr>";
      rows.shift().forEach(function (v) {
        html += "<th>" + v + "</th>";
      });
      html += "</tr></thead>";

      html += "<tbody>";
      rows.forEach(function (row) {
        html += "<tr>";
        row.forEach(function (v) {
          html += "<td>" + v + "</td>";
        });
        html += "</tr>";
      });
      html += "</tbody></table>";

      MTBlockEditorSetCompiledHtml(html, { addEditHistory: true });
    });
  };

  reader.onerror = function (e) {
    alert(e);
  };

  reader.readAsBinaryString(file);
}

document.addEventListener("DOMContentLoaded", async () => {
  if (!document.body.dataset.hasCompiledHtml) {
    document.body.textContent = "エクセルファイルをドロップしてください";
    Object.assign(document.body.style, {
      textAlign: "center",
      paddingTop: "40px",
    });
  }

  MTBlockEditorAddDroppable((ev) => {
    const files =
      ev.type === "change" ? ev.target.files : ev.dataTransfer.files;
    for (let i = 0; i < files.length; i++) {
      excelToTable(files[i]);
    }
  });
});
</script>

以上の設定で保存すれば作成完了です。