前端excel文件上传

使用element-plus上传ecxcel文件

步骤

1. 下载xlsx库：npm install xlsx
2. 导入xlsx:import * as XLSX from ‘xlsx’
3. 使用element-plus的el-upload组件
4. 编写文件上传函数

 
拖拽文件到此处或者 点击上传

uploadHandler(data) {//安装xlsx库// npm install xlsx//这是文件上传const file = data.fileconsole.log(file)//创建一个文件读取的实例const reader = new FileReader()console.log(reader)//读取成一个Buffer格式文件reader.readAsArrayBuffer(file)//当onload执行时，文件已经读取完成reader.onload = async (e) => {console.log(e.target.result)const fileData = e.target.result//利用XLSX对数据进行解析const wordbook = await XLSX.read(fileData, { type: Array })console.log(wordbook, "wordbook")//获取一张表的表名const sheetName = wordbook.SheetNames[0]//根据表名拿到表里面的内容const sheetData = wordbook.Sheets[sheetName]//解析成JSONconst json = XLSX.utils.sheet_to_json(sheetData)console.log(json, "json")this.tableData = json}
 

效果图：


注意：以上就是今天的分享啦