vue3+ts+element-plus 导入导出excel 前端

npm run install xlsx //安装
import * as XLSX from "xlsx"; //引入

首先我们看导出   表头需要的字段都要写

//点击事件	
<el-dropdown-item @click="exportModelSpice ">导出型号</el-dropdown-item>
const userData = ref<any>([]);//这是绑定表格的
const exportData = ref<any>([])
const exportModelSpice = () => {

	//导出数据结构构造
  
	userData.value.forEach((item:any) => {
		exportData.value.push({
           //这是你表头里面所有需要的字段  我的字段比较多
			modelNumber: item.modelNumber ? item.modelNumber : '',
			setType: item.setType ? item.setType : '',
			description: item.description ? item.description : '',
			productionPlaceCode: item.productionPlaceCode ? item.productionPlaceCode:'',
			productLife: item.productLife ? item.productLife : '',
			productLifeUnit: item.productLifeUnit ? item.productLifeUnit : '',
			storageConditions: item.storageConditions ? item.storageConditions : '',
			sterilizationMode: item.sterilizationMode ? item.sterilizationMode : '',
			useNum: item.useNum ? item.useNum : '',
			Icon_1: item.Icon_1 ? item.Icon_1 : '',
			Icon_2: item.Icon_2 ? item.Icon_2 : '',
			Icon_3: item.Icon_3 ? item.Icon_3 : '',
			Icon_4: item.Icon_4 ? item.Icon_4 : '',
			Icon_5: item.Icon_5 ? item.Icon_5 : '',
			Icon_6: item.Icon_6 ? item.Icon_6 : '',
			powerConnection: item.powerConnection ? item.powerConnection : '',
			inputPower: item.inputPower ? item.inputPower : '',
			typ: item.typ ? item.typ : '',
			stickLable: item.stickLable ? item.stickLable : '',
			setDescription: item.setDescription ? item.setDescription : '',
			incidentalVersion: item.incidentalVersion ? item.incidentalVersion : '',
		})
	})
	//表头数据切换
	const list = exportData.value.map((item:any) => {
		const obj = {}
		for (const k in item) {
			if (downHead[k]) {
				obj[downHead[k]] = item[k]
			}
		}
		return obj
	})
	// 创建工作表
	const data = XLSX.utils.json_to_sheet(list)
	// 创建工作簿
	const wb = XLSX.utils.book_new()
	// 将工作表放入工作簿中
	XLSX.utils.book_append_sheet(wb, data, 'data')
	// 生成文件并下载
	XLSX.writeFile(wb, '导出型号规格.xlsx')
}

导入 用到了element-plus    on-change事件

	<el-dropdown-menu>
		<el-upload ref="uploadRef" class="upload-demo" :before-upload="
			() => {return false;}" :auto-upload="false" :on-change="submitUploadAddress" :show-file-list="false">
	<template #trigger>
		<el-dropdown-item>导入数据</el-dropdown-item>
	</template>
	    </el-upload>
</el-dropdown-menu>


//导入地址
const submitUploadAddress = (e: any) => {
	const file = e.raw
	const reader = new FileReader()
	reader.readAsArrayBuffer(file)
	reader.onload = (ev: any) => {
		let data = ev.target.result
		const workbook = XLSX.read(data, { type: 'binary', cellDates: true })
		const wsname = workbook.SheetNames[0]
		const getData = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
		
		switch (state.activeName) {  //我这里是有三个表 我用了判断  只有一个表直接赋值
			case 'productionAddress':
				addressData.value = getData
				break
			case 'modelSpeci':
			modelSpeciList.value = getData
				break
			case 'erpsModel':
			erpsModelData.value = getData
				break

		}

	}
}