elementui excel
ElementUI 与 Excel 的集成方法
使用 xlsx 库实现 Excel 导出
安装 xlsx 库：
npm install xlsx --save在 Vue 组件中引入并使用：
import XLSX from 'xlsx'
export default {
methods: {
exportToExcel() {
const data = [
['姓名', '年龄', '性别'],
['张三', 25, '男'],
['李四', 30, '女']
]
const ws = XLSX.utils.aoa_to_sheet(data)
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
XLSX.writeFile(wb, '导出数据.xlsx')
}
}
}ElementUI 表格导出为 Excel
针对 el-table 数据导出：
exportTableToExcel() {
const table = this.$refs.table
const data = table.data
const header = table.columns.map(col => col.label)
const excelData = [header]
data.forEach(row => {
const rowData = []
table.columns.forEach(col => {
rowData.push(row[col.property])
})
excelData.push(rowData)
})
const ws = XLSX.utils.aoa_to_sheet(excelData)
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
XLSX.writeFile(wb, '表格数据.xlsx')
}Excel 导入并解析
实现文件上传和解析：
<el-upload
action=""
:auto-upload="false"
:on-change="handleExcelImport">
<el-button type="primary">导入Excel</el-button>
</el-upload>methods: {
handleExcelImport(file) {
const reader = new FileReader()
reader.onload = e => {
const data = new Uint8Array(e.target.result)
const workbook = XLSX.read(data, { type: 'array' })
const firstSheet = workbook.Sheets[workbook.SheetNames[0]]
const jsonData = XLSX.utils.sheet_to_json(firstSheet)
console.log('导入数据:', jsonData)
// 处理导入数据
}
reader.readAsArrayBuffer(file.raw)
}
}样式与格式处理
添加单元格样式：
const ws = XLSX.utils.aoa_to_sheet(data)
ws['!cols'] = [
{ wch: 20 }, // 第一列宽度
{ wch: 10 }, // 第二列宽度
{ wch: 10 } // 第三列宽度
]常见问题解决
处理中文字符乱码：
XLSX.writeFile(wb, '数据导出.xlsx', { bookType: 'xlsx', type: 'buffer' })处理大数据量导出：
// 分块处理数据
const chunkSize = 10000
for (let i = 0; i < data.length; i += chunkSize) {
const chunk = data.slice(i, i + chunkSize)
// 处理每个数据块
}注意事项
- 确保服务器端设置正确的 Content-Type 响应头
- 处理大量数据时考虑分块处理避免内存问题
- 导入数据时做好数据验证和错误处理
- 考虑添加加载状态提升用户体验
