Bagaimana untuk mengimport excel ke dalam javascript

Excel ialah alat yang sangat biasa digunakan semasa melakukan pemprosesan data, tetapi ia biasanya hanya boleh digunakan pada komputer. Untuk menggunakan dan memaparkan data Excel dalam halaman web, kami boleh mengimport fail Excel ke dalam JavaScript untuk operasi dan paparan. Artikel ini akan memperkenalkan cara mengimport Excel ke dalam JavaScript.

1. Jenis data Excel

Pertama sekali, anda perlu memahami jenis data dalam Excel. Terdapat jenis data berikut dalam Excel:

1. Nilai Boolean: TRUE dan FALSE (1 dan 0 juga boleh digunakan).
2. Nilai berangka: sebarang nombor, termasuk perpuluhan dan nombor negatif.
3. Tarikh dan masa: Excel menggunakan format khusus untuk memaparkan maklumat tarikh dan masa.
4. String: sebarang teks, boleh termasuk nombor dan aksara khas.

2. Tukar fail Excel kepada format JSON

Cara paling biasa untuk mengimport jadual Excel ke dalam JavaScript ialah menukar jadual kepada format JSON dalam JavaScript. Berikut ialah contoh jadual Excel:

Tukar jadual di atas ke dalam format JSON, kodnya adalah seperti berikut:

[
  {"姓名": "John", "年龄": 25, "职业": "工程师"},
  {"姓名": "Mary", "年龄": 30, "职业": "教师"},
  {"姓名": "Mike", "年龄": 35, "职业": "律师"},
  {"姓名": "Lisa", "年龄": 40, "职业": "医生"}
]

Oleh itu, kita perlu menggunakan perpustakaan untuk menghuraikan fail Excel ke dalam Objek dalam format JSON. Terdapat banyak perpustakaan seperti SheetJS dan Papa Parse dll. SheetJS akan digunakan di sini.

3 Gunakan perpustakaan SheetJS untuk mengimport Excel ke dalam JavaScript

Untuk menggunakan pustaka SheetJS, anda perlu memperkenalkan fail JS yang berkaitan ke dalam fail HTML terlebih dahulu:

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

Seterusnya, kami Kod perlu ditulis untuk menukar fail Excel kepada format JSON:

var oReq = new XMLHttpRequest();
oReq.open("GET", "data.xlsx", true);  // data.xlsx为Excel文件名
oReq.responseType = "arraybuffer";  // 二进制数据流
oReq.onload = function(e) {
  var arraybuffer = oReq.response;
  var data = new Uint8Array(arraybuffer);
  var workbook = XLSX.read(data,{type:"array"});  // 读取Excel文件
  var first_sheet_name = workbook.SheetNames[0];  // 获取第一个sheet的名称
  var worksheet = workbook.Sheets[first_sheet_name];  // 获取第一个sheet对象
  var result = XLSX.utils.sheet_to_json(worksheet);  // 将sheet对象转换为JSON格式
};
oReq.send();

Pada ketika ini, kami telah berjaya mengimport data Excel ke dalam JavaScript dan menukarnya kepada format JSON. Seterusnya, data boleh dimanipulasi dan dipaparkan.

4 Memanipulasi dan memaparkan data Excel

Dengan data Excel dalam format JSON, kami boleh menggunakannya untuk melaksanakan pelbagai operasi dan paparan. Sebagai contoh, buat jadual. Berikut ialah contoh mudah:

Kod HTML:

<table id="excel_table" border="1"></table>

Kod JavaScript:

var table = document.getElementById('excel_table');
for (var i = 0; i < result.length; i++) {
  var row = table.insertRow(i);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = result[i].姓名;
  cell2.innerHTML = result[i].年龄;
  cell3.innerHTML = result[i].职业;
}

Kod di atas memasukkan data Excel ke dalam jadual HTML.

Selain itu, anda juga boleh menggunakan pelbagai perpustakaan carta JavaScript untuk memaparkan data, seperti HighCharts, D3.js, dsb.

5. Kesimpulan

Melalui kaedah di atas, kami boleh mengimport data Excel dengan mudah ke dalam JavaScript untuk operasi dan paparan. Ini bukan sahaja meningkatkan kecekapan pemprosesan data, tetapi juga membolehkan persembahan dan interaksi data yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk mengimport excel ke dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!