vue导入excel文件
时间: 2023-07-03 17:22:19 浏览: 101
要在Vue中导入Excel文件,你可以使用以下步骤:
1. 安装依赖项:`xlsx`和`file-saver`
```
npm install xlsx file-saver --save
```
2. 在Vue组件中添加一个文件上传的input元素,并监听change事件
```
<template>
<div>
<input type="file" @change="handleFileUpload" />
</div>
</template>
<script>
import XLSX from 'xlsx'
import { saveAs } from 'file-saver'
export default {
methods: {
handleFileUpload(event) {
const files = event.target.files
if (files && files[0]) {
const reader = new FileReader()
reader.onload = (e) => {
const workbook = XLSX.read(e.target.result, { type: 'binary' })
const sheetName = workbook.SheetNames[0]
const worksheet = workbook.Sheets[sheetName]
const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
// 处理json数据
saveAs(new Blob([JSON.stringify(json)], { type: 'application/json' }), 'data.json')
}
reader.readAsBinaryString(files[0])
}
}
}
}
</script>
```
3. 在组件中引入`XLSX`和`saveAs`,并在`handleFileUpload`方法中使用`XLSX`读取Excel文件,然后将其转换为JSON格式,并保存在文件中。
注意:上面的示例代码仅仅是一种实现方式,你可以根据你的实际需求进行修改。
阅读全文