vue项目中导入excel文件（使用element-ui）

最新推荐文章于 2025-07-17 14:38:58 发布

原创最新推荐文章于 2025-07-17 14:38:58 发布 · 6.5k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue #xlsx #import #excel

vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何在Vue项目中结合Element-UI组件实现Excel文件导入，利用XLSX库进行处理。首先通过npm安装XLSX库，然后使用Element-UI的upload组件来实现文件上传功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要使用的包有 XLSX
npm安装：

npm install --save xlsx

在element-ui 中有一个组件叫 upload，可以直接拿来用

<el-upload 
	action=""
	:auto-upload="false"  // 因为只是读取数据到表格，并不需要上传到服务器
	:show-file-list="false" // 因为是直接读到表格，不用展示文件列表
	:on-change="import"> // 监听 on-change 事件，具体介绍看element官网
	<el-button> inport </el-button>
</el-upload>

method: {
	import(file, fileList){
		const fileReader = new FileReader();
      	fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: 'binary'
          });
          console.log(workbook)
          let sheet = Object.keys(workbook.Sheets)[0];
          const json = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);  //获得以第一列为键名的sheet数组对象
          console.log(json)
          } catch (e) {
            console.log(e)
          }
        };
        fileReader.readAsBinaryString(file.raw);
	}
}