引入方式:
CDN:
<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
NPM:
npm install xlsx
vue 使用样例
将文件上传与将Excel数据转换为对象数组配合使用,可以实现在前端上传Excel文件并将数据显示在页面上的功能。
<template>
<div>
<input type="file" ref="fileInput" @change="onFileChange" />
<table>
<thead>
<tr>
<th v-for="header in headers">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in rows">
<td v-for="cell in row">{{ cell }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import * as XLSX from 'xlsx';
export default {
data() {
return {
headers: [],
rows: []
};
},
methods: {
onFileChange(e) {
// 获取上传的文件
const file = e.target.files[0];
// 读取Excel文件
const reader = new FileReader();
reader.onload = (e) => {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: 'array' });
// 获取第一个工作表
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
// 将Excel数据转换成对象数组
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
// 设置表头和数据
this.headers = jsonData[0];
this.rows = jsonData.slice(1);
};
reader.readAsArrayBuffer(file);
}
}
};
</script>
网友评论