HTML 与 Excel 交互：读取数据详解

Cara membaca data Excel dalam HTML: Gunakan JavaScript FileReader API untuk memuatkan fail Excel ke dalam FileReader. Tukar kandungan fail Excel kepada rentetan binari. Gunakan perpustakaan XLSX untuk menghuraikan rentetan binari untuk mendapatkan data bagi lembaran kerja pertama. Simpan data lembaran kerja dalam tatasusunan JavaScript. Gunakan JavaScript untuk membuat jadual dan memaparkan data daripada tatasusunan.

Interaksi antara HTML dan Excel: Penjelasan terperinci tentang membaca data

Pengenalan

Interaksi antara HTML dan Excel boleh meningkatkan kecekapan analisis dan visualisasi data. Dengan membenamkan data Excel dalam halaman HTML, kami boleh mencipta papan pemuka dan carta dinamik dan interaktif. Artikel ini akan memperkenalkan cara membaca data Excel dalam HTML dan menyediakan kes praktikal untuk menggambarkan penggunaannya.

Baca data Excel melalui JavaScript

Coretan kod berikut menunjukkan cara membaca data Excel menggunakan JavaScript:

function readExcelData(file) {
  // 将 Excel 文件加载到 FileReader 中
  var reader = new FileReader();
  reader.onload = function() {
    // 将 Excel 文件的内容转换为二进制字符串
    var data = reader.result;

    // 使用 XLSX 库解析二进制字符串
    var workbook = XLSX.read(data, {type: 'binary'});

    // 获取第一个工作表中的数据
    var worksheet = workbook.Sheets[workbook.SheetNames[0]];

    // 将工作表中所有数据存储在 JavaScript 数组中
    var dataArray = XLSX.utils.sheet_to_json(worksheet);

    // 将 JavaScript 数组中的数据显示在页面上
    displayData(dataArray);
  };
  reader.readAsBinaryString(file);
}

function displayData(data) {
  // 在页面上创建一个表格来显示数据
  var table = document.createElement('table');

  // 遍历数据并将其添加到表中
  for (var i = 0; i < data.length; i++) {
    var row = table.insertRow();
    for (var key in data[i]) {
      var cell = row.insertCell();
      cell.innerHTML = data[i][key];
    }
  }

  // 将表格添加到文档中
  document.body.appendChild(table);
}

Kes praktikal

Berikut ialah kes praktikal yang menunjukkan cara menggunakan HTML dan JavaScript untuk membaca Data Excel daripada fail Excel Baca data dalam:

1. Buat fail HTML dan rujuk perpustakaan XLSX.
2. Tambah elemen 3525558f8f338d4ea90ebf22e5cde2bc untuk membolehkan pengguna memilih fail Excel. a2dc5349fb8bb852eaec4b6390c03b14 元素，允许用户选择一个 Excel 文件。
3. 添加一个按钮元素，当用户单击时触发 readExcelData() 函数。
4. 在 readExcelData() 函数中，使用 JavaScript FileReader API 读取 Excel 文件并将其转换为二进制字符串。
5. 使用 XLSX 库解析二进制字符串并获取第一个工作表中的数据。
6. 将工作表数据存储在 JavaScript 数组中，然后使用 displayData()
Tambahkan elemen butang yang mencetuskan fungsi readExcelData() apabila pengguna mengkliknya.

Dalam fungsi readExcelData(), gunakan JavaScript FileReader API untuk membaca fail Excel dan menukarnya menjadi rentetan binari. Gunakan perpustakaan XLSX untuk menghuraikan rentetan binari dan dapatkan data dalam lembaran kerja pertama.

Simpan data lembaran kerja dalam tatasusunan JavaScript dan kemudian paparkannya dalam halaman HTML menggunakan fungsi displayData().

🎜🎜🎜Kesimpulan🎜🎜🎜Dengan membenamkan data Excel dalam HTML, kami boleh mencipta papan pemuka dan carta yang berkuasa dan interaktif. Artikel ini menerangkan cara menggunakan JavaScript untuk membaca data Excel dan menyediakan kes praktikal untuk menggambarkan penggunaannya. Menguasai teknik ini boleh meningkatkan kecekapan analisis dan visualisasi data. 🎜

Atas ialah kandungan terperinci HTML 与 Excel 交互：读取数据详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!