VueCli4.0项目中将excel表格数据导入Elment UI表格并展示(映射的表格标题必须为英文)

先上一个效果图供大家参考:

具体步骤如下:

 第一步、导入并读取Excel功能从整体上来说两种方式,一是前端解析文件后将数据返回给后端,另一种是前端直接将Excel文档返回后台,由后台进行处理。使用哪种方法需要根据具体业务需求,下面简单介绍第一种方法:由前端解析数据

1、引入依赖

 npm install -S file-saver xlsx
 
 npm install -D script-loader
 
 npm install xlsx

2、在main.js中引入XLSX

import XLSX from 'xlsx'
Vue.use(XLSX)

3、前面环境和依赖完成之后,我们开始创建Import.vue页面,放一个button上传按钮。

各参数说明可参考官方文档:https://www.jianshu.com/p/84b727a4b58a

  <!--limit:最大上传数,on-exceed:超过最大上传数量时的操作  -->
    <el-upload
   

猜你喜欢

转载自blog.csdn.net/qq_41646249/article/details/105123561