JavaScriptを使用してWebテーブルをExcelに変換する方法

経営管理やデータ分析でスプレッドシートが広く使われるようになったことで、Web テーブルを Excel 形式に変換する需要も高まっています。 JavaScript の強力な機能とクロスプラットフォームの特性により、この機能を実装するのが最良の選択となります。 JavaScriptを使用してWebテーブルをExcelに変換する方法を紹介します。

1.JavaScript ライブラリの導入

まず、必要な JavaScript ライブラリ (SheetJS と FileSaver) を導入する必要があります。 SheetJS は、Excel、CSV、その他のスプレッドシート形式の読み取りと書き込みができる強力なスプレッドシート処理ライブラリです。 FileSaver ライブラリは、ブラウザから生成された HTML またはバイナリ データを保存する簡単な方法を提供します。次のコードを HTML ファイルに追加して、これら 2 つのライブラリを導入します。

<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>

2. テーブルの HTML コードを作成する

次に、データを表示するために HTML ページにテーブルを作成する必要があります。ここでは、ヘッダーとデータを含む単純なテーブルを作成します。

<table id="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>40</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

3. JavaScript コードの作成

次に、表を Excel に変換する機能を実現する JavaScript コードの作成を開始します。

最初にテーブルを取得する必要があります。document.getElementById() メソッドを使用して、ID「table」を持つテーブル要素を取得します。

const table = document.getElementById('table');

次に、table.rows を通じてテーブル内の行と列の数を取得し、テーブル データを保存するための空の配列を作成します。

const rowLength = table.rows.length;
const colLength = table.rows[0].cells.length;
const data = [];

次に、テーブル内のすべての行と列を走査し、セルのテキスト データをデータ配列に格納する必要があります。これは二重ループを使用して実現されます。

for (let i = 0; i < rowLength; i++) {
  const rowData = [];
  for (let j = 0; j < colLength; j++) {
    rowData.push(table.rows[i].cells[j].textContent);
  }
  data.push(rowData);
}

最後に、SheetJS ライブラリを使用してデータを Excel 形式のバイナリ データに変換し、FileSaver ライブラリを使用してローカルに保存します。これは SheetJS の XLSX.writeFile() メソッドを使用して実装されます。

const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, 'table.xlsx');

完全な JavaScript コードは次のとおりです:

const table = document.getElementById('table');
const rowLength = table.rows.length;
const colLength = table.rows[0].cells.length;
const data = [];

for (let i = 0; i < rowLength; i++) {
  const rowData = [];
  for (let j = 0; j < colLength; j++) {
    rowData.push(table.rows[i].cells[j].textContent);
  }
  data.push(rowData);
}

const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, 'table.xlsx');

4. 変換結果をテストします

上記の手順を完了した後、ブラウザで HTML ファイルを開き、ボタンをクリックすると、「table.xlsx」という名前の Excel ファイルが自動的にダウンロードされます。

上記の手順により、Web テーブルを Excel 形式に変換することができました。このメソッドは JavaScript に基づいており、実装が簡単で効率性が高く、クロスプラットフォームで使用できます。Web フォームのバッチ処理に非常に適しており、ビジネス マネージャーやデータ アナリストにとって間違いなく優れたツールです。

以上がJavaScriptを使用してWebテーブルをExcelに変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。