Bagaimana untuk mendapatkan data Excel dalam HTML? Import fail Excel: Gunakan elemen Menghuraikan fail Excel: gunakan perpustakaan xlsx atau fungsi penyemak imbas. Dapatkan data: Dapatkan objek lembaran kerja, termasuk data baris dan lajur. Paparkan data: Gunakan elemen HTML seperti jadual untuk memaparkan data.

Mendapatkan Data daripada Excel melalui HTML: Panduan Komprehensif

Dalam pembangunan web moden, mendapatkan data daripada pelbagai sumber adalah penting. Satu sumber biasa ialah Microsoft Excel. Mendapatkan data daripada Excel melalui HTML boleh menambah banyak nilai pada aplikasi anda.

Panduan ini akan memandu anda melalui langkah demi langkah cara mendapatkan data daripada fail Excel menggunakan HTML.

Langkah 1: Import Fail Excel

<input type="file" id="excel-file-input">

Kod ini akan mencipta elemen input fail yang boleh digunakan pengguna untuk memilih fail Excel untuk diimport.

Langkah 2: Menghuraikan fail Excel

Selepas mengimport fail, anda mesti menghuraikannya ke dalam format yang boleh dibaca HTML. Anda boleh melakukan ini menggunakan pustaka pihak ketiga seperti [xlsx](https://github.com/SheetJS/js-xlsx) atau fungsi penyemak imbas terbina dalam.

Gunakan pustaka xlsx: xlsx 库：

const reader = new FileReader();
reader.onload = function() {
  const data = reader.result;
  const workbook = XLSX.read(data, {type: 'binary'});
};
reader.readAsBinaryString(file);

步骤 3：获取数据

解析文件后，你可以使用 workbook

const cellValue = workbook.Sheets.Sheet1['A1'].v;

Langkah 3: Dapatkan data

Selepas menghuraikan fail, anda boleh menggunakan objek buku kerja untuk mendapatkan data. Ia mengandungi tatasusunan objek lembaran kerja yang mengandungi data baris dan lajur.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

Langkah 4: Paparkan data dalam HTML

Selepas mendapatkan data, anda boleh menggunakan elemen HTML untuk memaparkannya pada halaman. Sebagai contoh, anda boleh menggunakan jadual:

const tableBody = document.querySelector('tbody');
for (const row of data) {
  const newRow = document.createElement('tr');
  const name = document.createElement('td');
  name.innerText = row.name;
  const age = document.createElement('td');
  age.innerText = row.age;
  newRow.appendChild(name);
  newRow.appendChild(age);
  tableBody.appendChild(newRow);
}

rrreee

Contoh praktikal:

Atas ialah kandungan terperinci . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!