要在前端使用xlsx插件读取Excel文件数据,你需要先安装xlsx插件。可以使用以下命令来安装:
npm install xlsx
安装完成后,你可以在前端代码中导入xlsx模块,并使用它提供的方法来读取Excel文件数据。
import XLSX from ‘xlsx’;
// 读取Excel文件数据,使用readAsArrayBuffer格式
function readExcelFile(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: ‘array’ });
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
resolve(jsonData);
};
reader.onerror = (e) => {
reject(e);
};
reader.readAsArrayBuffer(file);
});
}
我们定义了一个readExcelFile函数来读取Excel文件数据。该函数使用FileReader对象将文件读取为二进制数据,然后使用XLSX.read方法将二进制数据解析为工作簿对象,再使用XLSX.utils.sheet_to_json方法将工作表数据转换为JSON格式。最后,我们使用Promise来返回读取到的数据。
// 选择文件并读取数据
document.getElementById(‘file-input’).addEventListener(‘change’, (e) => {
const file = e.target.files[0];
if (file) {
readExcelFile(file).then((data) => {
console.log(data);
// 在这里处理读取到的Excel数据
}).catch((error) => {
console.error(error);
});
}
});
我们使用元素来选择Excel文件,并通过change事件监听文件选择的变化。当用户选择文件后,我们调用readExcelFile函数来读取文件数据,并在then回调中处理读取到的数据。