是的，有具体案例。以下是一个使用
Vue和SheetJS解析Excel文件并在页面中显示数据的示例代码：
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>
<
div id="app">
<input type="file" v-on:change="handleFileSelect" />
<
div id="tableContainer">
<table>
<thead>
<tr>
<th v-for="(
header, index) in table
Headers" :key="index">
{{
header }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in tableData" :key="index">
<td v-for="(cell, index) in row" :key="index">{{ cell }}</td>
</tr>
</tbody>
</table>
</
div>
</
div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/
vue/2.6.14/
vue.min.js"></script>
<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 app = new
Vue({
el: "#app",
data: {
table
Headers: [],
tableData: [],
},
methods: {
readFile: function (file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = () => {
resolve(reader.result);
};
reader.onerror = reject;
});
},
parseExcel: async function (file) {
const data = await this.readFile(file);
const workbook = XLSX.read(data, { type: "array" });
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
this.table
Headers = XLSX.utils.sheet_to_json(worksheet, {
header: 1,
range: 0,
})[0];
this.tableData = XLSX.utils.sheet_to_json(worksheet, {
header: 1,
range: 1,
});
},
handleFileSelect: async function (evt) {
const file = evt.target.files[0];
await this.parseExcel(file);
},
},
});
```
此代码使用
Vue框架和SheetJS库解析Excel文件并将其转换为JSON格式。然后，它使用
Vue的数据绑定功能将Excel数据添加到HTML表格中。该代码假设您已经安装了
Vue和SheetJS，并且在页面上有一个
Vue应用程序的根元素`<
div id="app">`。应用程序绑定到一个`<input type="file">`元素，并使用`v-on:change`指令将其绑定到`handleFileSelect`
方法。
1580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
