vue导入excel获取数据
时间: 2023-07-03 20:07:07 浏览: 114
vue.js实现excel和图片的导入
5星 · 资源好评率100%
你可以使用一些现成的库来导入 Excel 数据,比如 `SheetJS` 和 `xlsx`。
首先,在你的 Vue 项目中安装 `xlsx`:
```bash
npm install xlsx --save
```
然后,可以在你的组件中引入 `xlsx`:
```javascript
import XLSX from 'xlsx';
```
接下来,你需要在 HTML 中添加一个文件上传的 input:
```html
<input type="file" ref="fileInput" @change="handleFileUpload">
```
其中 `handleFileUpload` 方法将在选择文件后被触发。你可以在该方法中获取上传的文件,并使用 `XLSX` 库将其转换为 JSON 数据:
```javascript
handleFileUpload() {
const file = this.$refs.fileInput.files[0];
const reader = new FileReader();
reader.onload = (e) => {
const data = e.target.result;
const workbook = XLSX.read(data, { type: 'binary' });
const sheet = workbook.Sheets[workbook.SheetNames[0]];
const jsonData = XLSX.utils.sheet_to_json(sheet);
console.log(jsonData); // 打印导入的 JSON 数据
};
reader.readAsBinaryString(file);
}
```
这样,你就可以在 Vue 中导入 Excel 数据了。
阅读全文