Vue实现导入Excel功能步骤详解


Posted in Vue.js onJuly 03, 2021

1.前端主导实现步骤

第一步,点击页面上的导入按钮,读入Excel文件

利用插件完成。

第二步,按照后端的要求对数据格式加工,转成他们需要的格式

需要自己写逻辑。

第三步,通过后端接口,将数据通过ajax发回去

调接口,常规操作。

简而言之:前端读excel文件,修改文件格式,调接口

2.实现读入Excel文件

注:此步骤就可实现前端导入功能。如对修改格式有兴趣,可以继续看第三步。

概括:复制代码到自己的文件夹下,下载必需的插件。

2.1 使用的是elementUI提供的vue-admin-element中的上传方法(百度仓库克隆方式,官网也有)

2.2 下载包   npm install xlsx -S  (默认现在已经完成2.1步骤了)

2.3 引入UploadExcel组件并注册为全局(去找UploadExcel这个文件,复制一下,封装组件不必多说 )

不会注册全局组件参考下面代码:(你乐意在main.js里头搞也行,这里我就按可维护性高搞)

import PageTools from './PageTools'
import UploadExcel from './UploadExcel'
 
export default {
  // 插件的初始化, 插件给你提供的全局的功能, 都可以在这里配置
  install(Vue) {
    // 进行组件的全局注册
    Vue.component('PageTools', PageTools) // 注册工具栏组件
    Vue.component('UploadExcel', UploadExcel) // 注册导入excel组件
  }
}

 2.4 引入组件,使用组件,配置路由,设置点击回调函数(不必多说)

2.5 测试效果

浏览器手动输入你设置的路由地址,页面跳转过去

Vue实现导入Excel功能步骤详解


 小结:1.最重要的就是去复制,然后下载必要插件

            2.引入UploadExcel组件(作用是导入Excel文件)是必须的,但是注册全局不是必须的,看心情

            3. 导入组件,给他注册回调函数,他里面的两个参数是必须的,可以参考人家源代码,更易理解

            4.excel导入插件本质:把excel经过分析转换成js能够识别的常规数据,拿到数据我们可以进行任何操作

3.对数据进行加工 

注:此步骤其实考验的是对JavaScript的运用,可惜这个对我没难度,相信很久之后也是。

3.1 后端要求的格式:

Vue实现导入Excel功能步骤详解

3.2 我们要处理的内容:

  • 字段中文转英文。excel中读入的是姓名,而后端需要的是username
  • 日期处理。从excel中读入的时间是一个number值,而后端需要的是标准日期。

3.3 单独封装一个处理函数:

/**
     * results excel表格的内容
      //        [ {'姓名':'小张', '手机号': '13712345678'}, {.....} ]
      // 目标
      //        [ {'username':'小张', 'mobile': '13712345678'}, {.....} ]
     */
    transExcel(results) {
      const userRelations = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName',
        '聘用形式': 'formOfEmployment'
      }
      return results.map(item => {
        const obj = {}
        // 1. 取出这个对象所有的属性名: ['姓名', ‘手机号']
        // 2. 遍历这个数组,通过 中文名去 userRelations 找对应英文名, 保存值
        const zhKeys = Object.keys(item)
        zhKeys.forEach(zhKey => {
          const enKey = userRelations[zhKey]
          // 如果是时间格式,就要做转换
          if (enKey === 'correctionTime' || enKey === 'timeOfEntry') {
            obj[enKey] = new Date(formatExcelDate(item[zhKey]))
          } else {
            obj[enKey] = item[zhKey]
          }
        })
 
        return obj
      })
    }
 
handleSuccess({ results, header }) {
    
  console.log('从当前excel文件中读出的内容是', results)
  // results: [{入职日期: 44502, 姓名:xxxx}]
  // 目标:
  // results: [{timeOfEntry: 44502, username:xxxx}]
  // 处理从excel中读入的格式
  const arr = this.transExcel(results)
  console.log('转换之后的格式是', arr)
})

3.4 日期处理函数:

// 把excel文件中的日期格式的内容转回成标准时间
// https://blog.csdn.net/qq_15054679/article/details/107712966
export function formatExcelDate(numb, format = '/') {
  const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000)
  time.setYear(time.getFullYear())
  const year = time.getFullYear() + ''
  const month = time.getMonth() + 1 + ''
  const date = time.getDate() + ''
  if (format && format.length === 1) {
    return year + format + month + format + date
  }
  return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
}

4.调接口,发请求,在页面中使用

import { importEmployee } from '@/api/employees'
export default {
  name: 'Import',
  methods: {
    async handleSuccess({ results, header }) {
      try {
        console.log('从当前excel文件中读出的内容是', results)
        // results: [{入职日期: 44502, 姓名:xxxx}]
        // 目标:
        // results: [{timeOfEntry: 44502, username:xxxx}]
        const arr = this.transExcel(results)
        console.log('转换之后的格式是', arr)
        // 调用上传的接口,
        const rs = await importEmployee(arr)
        console.log('调用上传的接口', rs)
        // 上传成功之后,回去刚才的页面
        this.$router.back()
        this.$message.success('操作成功')
      } catch (err) {
        this.$message.error(err.message)
      }
    }
}

5 总结: 

导入的功能和导出差不多,难点在于转换数据格式,本篇文章没有过多介绍,但在另一篇导出文章中详细说明了,有兴趣的可以去看看    点我跳转至导出功能实现

到此这篇关于Vue实现导入Excel功能的文章就介绍到这了,更多相关vue导入Excel内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
Vue图片裁剪组件实例代码
vue3中provide && inject的使用
Jul 01 #Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 #Vue.js
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
Vue实现tab导航栏并支持左右滑动功能
Vue3.0写自定义指令的简单步骤记录
You might like
zend framework多模块多布局配置
2011/02/26 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
js时间控件只显示年月
2017/01/08 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
python中文件变化监控示例(watchdog)
2017/10/16 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
python定时截屏实现
2020/11/02 Python
Python 远程开关机的方法
2020/11/18 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
给下属加薪申请报告
2015/05/15 职场文书
收入证明申请书
2015/06/12 职场文书
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
python计算列表元素与乘积详情
2022/08/05 Python