在 Vue 项目中,可以使用第三方库 xlsx 来实现 Excel 文件的导入和处理。以下是一个简单的实现步骤:
导入
- 安装 xlsx 库 可以通过 npm 安装:
npm install xlsx --save
- 在 Vue 组件中引入并使用 xlsx 库
<template>
<div>
<input type="file" ref="fileInput" @change="handleFileUpload">
</div>
</template>
<script>
import XLSX from 'xlsx'
export default {
methods: {
handleFileUpload(e) {
const file = e.target.files[0]
const reader = new FileReader()
reader.onload = (e) => {
const data = new Uint8Array(e.target.result)
const workbook = XLSX.read(data, { type: 'array' })
const worksheet = workbook.Sheets[workbook.SheetNames[0]]
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
// 处理 jsonData 数组数据
}
reader.readAsArrayBuffer(file)
}
}
}
</script>
导出
exportToExcel() {
/* 用于保存导出的数据的数组 */
var data = []
/* 添加表头 */
var header = ["Name", "Age", "City"]
data.push(header)
/* 添加数据 */
var row1 = ["Alice", 25, "New York"]
var row2 = ["Bob", 30, "San Francisco"]
var row3 = ["Charlie", 35, "Chicago"]
data.push(row1)
data.push(row2)
data.push(row3)
/* 创建 Excel 文件 */
var wb = XLSX.utils.book_new()
/* 创建一个名为 Sheet1 的工作表 */
var ws = XLSX.utils.aoa_to_sheet(data)
XLSX.utils.book_append_sheet(wb, ws, "Sheet1")
/* 导出 Excel 文件 */
XLSX.writeFile(wb, "data.xlsx")
}