@TOC# 学习目标：
提示：这里可以添加学习目标
例如：一周掌握 Java 入门知识
学习内容：前端项目中导出excel和解析excel
提示：这里可以添加要学的内容
例如：
1、 解析excel
2、 导出excel
解决方案： 1.解析exce
vue2+elementui(二次封装的组件 UploadExecl.vue)
前提资源下载: npm i xlsx@0.17.4
点击上传 将文件拖到此处
使用
注意点:传入两个函数onSuccess(文件导入成功的回调),beforeUpload(文件解析前的回调2)
2.前端导出execlmethods:{ async onSuccess({ header, results }) { // 把execl中的中文字符修改为英文的并且和后端对应 const userRelations = { 入职日期: 'timeOfEntry', 手机号: 'mobile', 姓名: 'username', 转正日期: 'correctionTime', 工号: 'workNumber', } const newArr = results.map((item) => { const newObj = {} Object.keys(item).forEach((item2) => { if ( userRelations[item2] === 'timeOfEntry' || userRelations[item2] === 'correctionTime' ) { newObj[userRelations[item2]] = this.formatDate(item[item2]) return } newObj[userRelations[item2]] = item[item2] }) return newObj }) console.log(newArr, '4') }, // excel时间格式处理 formatDate(numb) { const time = new Date((numb - 1) * 24 * 3600000 - 8 * 24 * 60 * 60) time.setYear(time.getFullYear() - 70) return time }, }
npm i xlsx@0.17.4
在utils下新建excel.js
import XLSX from 'xlsx'
function autoWidthFunc(ws, data) {
// set worksheet max width per col
const colWidth = data.map((row) =>
row.map((val) => {
var reg = new RegExp('[\u4E00-\u9FFF]+', 'g') //检测字符串是否包含汉字
if (val == null) {
return { wch: 10 }
} else if (reg.test(val)) {
return { wch: val.toString().length * 2 }
} else {
return { wch: val.toString().length }
}
})
)
// start in the first row
const result = colWidth[0]
for (let i = 1; i < colWidth.length; i++) {
for (let j = 0; j < colWidth[i].length; j++) {
if (result[j].wch < colWidth[i][j].wch) {
result[j].wch = colWidth[i][j].wch
}
}
}
ws['!cols'] = result
}
function jsonToArray(key, jsonData) {
return jsonData.map((v) =>
key.map((j) => {
return v[j]
})
)
}
const exportArrayToExcel = ({ key, data, title, filename, autoWidth }) => {
const wb = XLSX.utils.book_new()
const arr = jsonToArray(key, data)
arr.unshift(title)
const ws = XLSX.utils.aoa_to_sheet(arr)
if (autoWidth) {
autoWidthFunc(ws, arr)
}
XLSX.utils.book_append_sheet(wb, ws, filename)
XLSX.writeFile(wb, filename + '.xlsx')
}
export default {
exportArrayToExcel
}
在使用的地方导入使用
import excel from './utils/excel'
methods:{
exportExcel() {
const params = {
title: ['date', 'name', 'address', 'imgae'],
key: ['date', 'name', 'address', 'imgae'],
data: this.tableData, // 数据源
autoWidth: true, //autoWidth等于true，那么列的宽度会适应那一列最长的值
filename: '清单',
}
excel.exportArrayToExcel(params)
},
}
