javascript和html和css从本地导入excle并读取文件用SheetJS或XLSX有没有具体案例
时间: 2024-02-11 22:05:50 浏览: 25
是的,有具体案例。以下是一个使用SheetJS解析Excel文件并在HTML中显示数据的示例代码:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Excel Reader</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
th {
font-weight: bold;
text-align: center;
}
td {
text-align: center;
}
</style>
</head>
<body>
<input type="file" id="fileInput" />
<div id="tableContainer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.1/xlsx.full.min.js"></script>
<script src="app.js"></script>
</body>
</html>
```
JavaScript:
```javascript
const readFile = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = () => {
resolve(reader.result);
};
reader.onerror = reject;
});
};
const parseExcel = async (file) => {
const data = await readFile(file);
const workbook = XLSX.read(data, { type: "array" });
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
return XLSX.utils.sheet_to_json(worksheet, { header: 1 });
};
const createTable = (data) => {
const container = document.getElementById("tableContainer");
const table = document.createElement("table");
const header = table.createTHead();
const row = header.insertRow(0);
for (let i = 0; i < data[0].length; i++) {
const cell = row.insertCell(i);
cell.innerHTML = data[0][i];
}
for (let i = 1; i < data.length; i++) {
const row = table.insertRow(-1);
for (let j = 0; j < data[i].length; j++) {
const cell = row.insertCell(j);
cell.innerHTML = data[i][j];
}
}
container.appendChild(table);
};
const handleFileSelect = async (evt) => {
const file = evt.target.files[0];
const data = await parseExcel(file);
createTable(data);
};
const fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", handleFileSelect);
```
此代码使用`FileReader` API将Excel文件读取为二进制字符串,然后使用SheetJS库解析Excel文件并将其转换为JSON格式。然后,它使用JavaScript动态创建一个HTML表格,并将Excel数据添加到表格中。该代码假设您已经在页面上有一个`<input type="file">`元素,并已将其绑定到`handleFileSelect`函数。