需求:本地上传excel文件,但需要对excel文件的内容进行某些操作(增删改等)后再上传到后端服务器中,则需要前端解析excel文件。
好处:不使用后台读取Excel数据回显表格数据,减少前后端交互,降低后端服务器的压力,使用前端便可进行操作。
实现:通过xlsx库实现
1、下载依赖
npm install xlsx --save
2、页面使用
import * as XLSX from 'xlsx' // vue3可用此引入
import XLXS from "xlsx"; // vue2可用此引入
3、页面代码写法
<input
type="file"
accept=".xls,.xlsx"
class="upload-file"
@change="changeExcel($event)" />
const tableData = ref([])
function changeExcel(e){
const files = e.target.files
if (files.length <= 0) {
return false
} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
console.log('上传格式不正确,请上传xls或者xlsx格式')
return false
}
// 读取表格
const fileReader = new FileReader()
fileReader.onload = ev => {
const workbook = XLSX.read(ev.target.result, {
type: "binary"
})
const wsname = workbook.SheetNames[0]
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
console.log('ws:',ws) // 转换成json的数据
// dealExcel(ws) ...对数据进行自己需要的操作
tableData.value = ws
}
fileReader.readAsBinaryString(files[0])
}
4、转换成的json数据不是我们需要数据结构,此时就能通过以下方法转换
- 转换前结构
- 转换后结构
- 转换的方法
function dealExcel(ws){
let keymap = {
// 我们要转换的开头
"员工": "name",
"工号": 'num',
"登录账号": 'account',
"部门": 'department'
}
ws.forEach(sourceObj => {
Object.keys(sourceObj).map(keys => {
let newKey = keymap[keys]
if (newKey) {
sourceObj[newKey] = sourceObj[keys]
delete sourceObj[keys]
}
})
})
tableData.value = ws
}