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.

Dapatkan nilai sel tertentu:

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

Kemudian, anda boleh menggunakan JavaScript untuk mengisi data secara dinamik dalam jadual:

rrreee

Contoh praktikal:

🎜🎜Pertimbangkan kedai dalam talian yang perlu mendapatkan senarai produk daripada Fail Excel. Dengan mengikut langkah dalam panduan ini, anda boleh mengimport fail anda dengan mudah, menghuraikan data dan memaparkannya pada halaman web supaya pelanggan boleh menyemak imbas produk anda. 🎜🎜Panduan ini menyediakan arahan langkah demi langkah untuk mendapatkan data daripada fail Excel, termasuk mengimport, menghuraikan dan memaparkan data. Dengan mengikuti langkah ini, anda boleh menyepadukan data Excel dengan mudah ke dalam aplikasi web anda. 🎜

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