Vue+Element前端导入导出Excel文件

最新推荐文章于 2025-04-30 12:28:46 发布

weixin_44486632

最新推荐文章于 2025-04-30 12:28:46 发布

阅读量1.3k

点赞数

分类专栏： Vue 文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44486632/article/details/104680470

版权

该博客详细介绍了如何在Vue项目中结合Element UI实现Excel文件的导入和导出功能。首先，通过安装file-save、xlsx和script-loader依赖来准备环境。接着，利用Element的上传控件处理Excel导入，并在导入文件后进行数据处理。最后，通过引入Blob.js和Export2Excel.js文件，实现在前端导出Excel表格的功能。

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

1 场景需求

1 由前端导入Excel表格,获取批量数据,
2 前端根据一个数组导出一个Excel表格

2 实现

2.1 安装三个依赖包

file-save xlsx script-loader

npm install -S flie-save
npm install -S xlsx
npm install -D script-loader

2.2 导入Excel

2.2.1 element上传控件

在这里插入图片描述

 <el-upload
    class="upload-demo"
    action=""
    :on-change="handleChange"
    :on-exceed="handleExceed"
    :on-remove="handleRemove"
    :limit="limitUpload"
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
    :auto-upload="false">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只 能 上 传 xlsx / xls 文 件</div>
  </el-upload>

定义一个fileTemp变量,存放上传的文件,初始化值为null

data(){
   
	return {
   
		fileTemp:null
	}
}

2.2.2 导入文件并做导入判断

  handleChange(file){
   
      this.fileTemp = file.raw
      if(

最低0.47元/天解锁文章