Bagaimana untuk menukar jadual web kepada Excel menggunakan javascript

Dengan penggunaan hamparan yang meluas dalam pengurusan perniagaan dan analisis data, permintaan untuk menukar jadual web kepada format Excel juga semakin meningkat. Fungsi berkuasa dan ciri merentas platform JavaScript menjadikannya pilihan terbaik untuk melaksanakan fungsi ini. Berikut ialah kaedah untuk menggunakan JavaScript untuk menukar jadual web kepada Excel.

1. Pengenalan perpustakaan JavaScript

Pertama, anda perlu memperkenalkan perpustakaan JavaScript yang diperlukan - SheetJS dan FileSaver. SheetJS ialah perpustakaan pemprosesan hamparan berkuasa yang boleh membaca dan menulis format Excel, CSV dan hamparan lain. Pustaka FileSaver menyediakan cara mudah untuk menyimpan HTML atau data binari yang dijana daripada penyemak imbas. Tambahkan kod berikut pada fail HTML untuk memperkenalkan kedua-dua perpustakaan ini.

<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. Cipta kod HTML jadual

Seterusnya, anda perlu mencipta jadual dalam halaman HTML untuk memaparkan data. Di sini kami mencipta jadual ringkas dengan pengepala dan data.

<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. Tulis kod JavaScript

Sekarang kami mula menulis kod JavaScript untuk menukar jadual kepada Excel.

Mula-mula anda perlu mendapatkan jadual, gunakan kaedah document.getElementById() untuk mendapatkan elemen jadual dengan id "jadual".

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

Kemudian dapatkan bilangan baris dan lajur dalam jadual melalui table.rows dan buat tatasusunan kosong untuk menyimpan data jadual.

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

Kemudian anda perlu melintasi semua baris dan lajur dalam jadual dan menyimpan data teks sel ke dalam tatasusunan data. Ini dicapai menggunakan gelung berganda.

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);
}

Akhir sekali, gunakan pustaka SheetJS untuk menukar data kepada data binari dalam format Excel dan gunakan pustaka FileSaver untuk menyimpannya secara setempat. Ini dilaksanakan menggunakan kaedah XLSX.writeFile() SheetJS.

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');

Kod JavaScript lengkap adalah seperti berikut:

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 Uji hasil penukaran

Selepas melengkapkan langkah di atas, buka fail HTML dalam pelayar dan klik butang , fail Excel bernama "table.xlsx" akan dimuat turun secara automatik.

Melalui langkah di atas, kami telah berjaya menukar jadual web kepada format Excel. Kaedah ini berdasarkan JavaScript, mudah untuk dilaksanakan, sangat cekap, dan boleh merentas platform Ia sangat sesuai untuk pemprosesan kumpulan borang web. Sudah pasti ia adalah alat yang baik untuk pengurus perniagaan dan penganalisis data.

Atas ialah kandungan terperinci Bagaimana untuk menukar jadual web kepada Excel menggunakan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!