Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
115
Help us understand the problem. What is going on with this article?
@tomgoodsun

HTMLのTableをExcelに出力するJavaScript

More than 3 years have passed since last update.

概要

管理システムや業務システムを作っているとウェブにtableタグで表示したものをCSVやExcelで出力したい場面が出てきます。
以前は、サーバーサイドで出力処理を書いていたのですが、「いや、表示したものそのまま出せばサーバーサイドの実装しなくてよね?」ってことで、いろいろ試行錯誤しながらやってみました。

ちなみにこの手のJavaScriptライブラリはあるにはあるのですが、複数のシートに出力するのに対応してなかったりします。
今回は複数のtableをシートに分けて1つのブックとして出力できるようにしています。

Sheet.js

これはかなり使えそうです。
これを使うと、HTML上の複数のテーブルを1つのExcelブック内にシートに分けて出力することができます。
出力形式は.xlsx

デフォルトではそういった関数はないので、少し独自でコードを書く必要はありますが、比較的簡単に実装できます。

必要なファイル

SheetJSは.xls.xlsxに対応したものがありますが、後者のものからdist/xlsx.full.jsまたはdist/xlsx.full.min.jsを読み込みます。
ファイルとしてダウンロードさせるにはFileSaver.jsが必要ですので、これも読み込んでおきます。
(サンプルコードやデモはCDNから取得)

実装

この辺りを参考に作ります。

index.html
<button type="button" id="dl-xlsx">Download XLSX</button>
<h3>東京都区一覧</h3>
<table class="table-to-export" data-sheet-name="東京都区一覧">
  <thead>
    <tr><th>番号</th><th>特別区</th><th>推計人口</th><th>面積</th><th>人口密度</th></tr>
  </thead>
  <tbody>
    <tr><td>01</td><td>千代田区</td><td>59,441人</td><td>11.66km2</td><td>5,100人/km2</td></tr>
    <tr><td>02</td><td>中央区</td><td>147,620人</td><td>10.21km2</td><td>14,460人/km2</td></tr>
    ...
    <tr><td>23</td><td>江戸川区</td><td>685,899人</td><td>49.90km2</td><td>13,750人/km2</td></tr>
  </tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.9.10/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="export-xlsx.js"></script>
export-xlsx.js
document.getElementById('dl-xlsx').addEventListener('click', function () {
  var wopts = {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary'
  };

  var workbook = {SheetNames: [], Sheets: {}};

  document.querySelectorAll('table.table-to-export').forEach(function (currentValue, index) {
    // sheet_to_workbook()の実装を参考に記述
    var n = currentValue.getAttribute('data-sheet-name');
    if (!n) {
      n = 'Sheet' + index;
    }
    workbook.SheetNames.push(n);
    workbook.Sheets[n] = XLSX.utils.table_to_sheet(currentValue, wopts);
  });

  var wbout = XLSX.write(workbook, wopts);

  function s2ab(s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) {
      view[i] = s.charCodeAt(i) & 0xFF;
    }
    return buf;
  }

  saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), 'test.xlsx');
}, false);

サンプル作りました。
demo

115
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tomgoodsun
プログラマやってます。サーバー構築からウェブアプリ作成まで。分類はPHPer属だと思います。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
115
Help us understand the problem. What is going on with this article?