vue3 导入excel数据

所需包

bash 复制代码
"xlsx": "^0.18.5"

页面导入包

bash 复制代码
import * as XLSX from 'xlsx';
import {genFileId,  UploadProps, UploadRawFile,ElTable } from 'element-plus';

页面

bash 复制代码
	<el-upload  accept=".xlsx" :on-change="changeExcel" :on-exceed="handleExceed" :limit="1" :auto-upload="false" :show-file-list="false"  ref="upload">
		<el-button type="primary" size="default">导入Excel</el-button>
	</el-upload>



//js
let tableData=ref([])
const upload = ref<InstanceType<typeof ElTable>>();
const handleExceed: UploadProps['onExceed'] = (files) => {
	upload.value!.clearFiles();
	const file = files[0] as UploadRawFile;
	file.uid = genFileId();
	upload.value!.handleStart(file);
};


function changeExcel(e, fileList) {
	console.log('changeExcelProject---------->');
	if (fileList.length > 1) {
		fileList.splice(0, 1);
	}
	const files = e.raw;
	console.log('files------>', files);
	// 读取表格
	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], {
			defval: '',
		});
		console.log('ws=', ws); // 转换成json的数据
		//可以选择构建列
		let columnsproject = [];
		if (ws && ws.length > 0) {
			const obj = ws[0] as Object;
			for (const key in obj) {
				if (obj.hasOwnProperty(key)) {
					columnsproject.push({
						label: key,
						prop: key,
					});
				}
			}
		}

		tableDataproject.value = [...ws];
		fieldMap.set('姓名', 'name');
		fieldMap.set('年龄', 'age');
		fieldMap.set('性别', 'sex');
	

		let	tableDataArr = [...ws];
		let dataNew: any[] = [];
		for (let i = 0; i < tableDataArr.length; i++) {
			const item = tableDataArr[i];
			const obj: any = buildingObj(item);
			dataNew.push(obj);
		}
        tableData.value=dataNew
		console.error("tableData",tableData)
	};
	fileReader.readAsBinaryString(files);
}

function buildingObj(item: object) {
	const obj = {};
	for (const [key, value] of fieldMap) {
		obj[value] = item[key];
	}
	return obj;
}
相关推荐
蟾宫曲4 小时前
在 Vue3 项目中实现计时器组件的使用(Vite+Vue3+Node+npm+Element-plus,附测试代码)
前端·npm·vue3·vite·element-plus·计时器
秋雨凉人心4 小时前
简单发布一个npm包
前端·javascript·webpack·npm·node.js
liuxin334455664 小时前
学籍管理系统:实现教育管理现代化
java·开发语言·前端·数据库·安全
qq13267029404 小时前
运行Zr.Admin项目(前端)
前端·vue2·zradmin前端·zradmin vue·运行zradmin·vue2版本zradmin
大G哥4 小时前
pytest自动化测试数据驱动yaml/excel/csv/json
json·excel·pytest
小奥超人4 小时前
Excel粘贴复制不完整的原因以及解决方法
windows·经验分享·microsoft·excel·办公技巧
code04号4 小时前
python脚本:批量提取excel数据
开发语言·python·excel
LCG元5 小时前
Vue.js组件开发-使用vue-pdf显示PDF
vue.js
魏时烟5 小时前
css文字折行以及双端对齐实现方式
前端·css
哥谭居民00016 小时前
将一个组件的propName属性与父组件中的variable变量进行双向绑定的vue3(组件传值)
javascript·vue.js·typescript·npm·node.js·css3