excel数据导入组件封装

excel数据导入组件封装

封装一个导入excel数据的文件
首先封装一个类似的组件，首先需要注意的是，类似功能，vue-element-admin已经提供了，我们只需要改造即可 代码地址

类似功能性的组件，我们要会使用和封装即可

excel导入功能需要使用npm包xlsx，所以需要安装xlsx插件

$ npm i xlsx

将vue-element-admin提供的导入功能新建一个组件，位置： src/components/UploadExcel

注册全局的导入excel组件

import UploadExcel from './UploadExcel'
export default {
  install(Vue) {
    Vue.component('UploadExcel', UploadExcel) // 注册导入excel组件
  }
}

修改样式和布局

excel数据导入

建立公共导入的页面路由

新建一个公共的导入页面，挂载路由 src/router/index.js

{
    path: '/import',
    component: Layout,
    hidden: true, // 隐藏在左侧菜单中
    children: [{
      path: '', // 二级路由path什么都不写 表示二级默认路由
      component: () => import('@/views/import')
    }]
  },

创建import路由组件 src/views/import/index.vue

分析excel导入代码，封装接口

封装导入的api接口

/** *
 *  封装一个导入的接口
 *
 * ***/

export function importEmployee(data) {
  return request({
    url: '/user/data',
    method: 'post',
    data
  })
}

实现excel导入

获取导入的excel数据, 导入excel接口

    async  success({ header, results }) {
        const userRelations = {
          '手机号': 'mobile',
          '姓名': 'username',
          '工号': 'workNumber'
        }
        const arr = []
       results.forEach(item => {
          const userInfo = {}
          Object.keys(item).forEach(key => {
            userInfo[userRelations[key]] = item[key]
          })
         arr.push(userInfo) 
        })
        await importEmployee(arr) // 调用导入接口
        this.$router.back()
    }

为了让这个页面可以服务更多的导入功能，我们可以在页面中用参数来判断

 data() {
    return {
      type: this.$route.query.type
    }
  },

当excel中有日期格式的时候，实际转化的值为一个数字，我们需要一个方法进行转化

    formatDate(numb, format) {
      const time = new Date((numb - 1) * 24 * 3600000 + 1)
      time.setYear(time.getFullYear() - 70)
      const year = time.getFullYear() + ''
      const month = time.getMonth() + 1 + ''
      const date = time.getDate() - 1 + ''
      if (format && format.length === 1) {
        return year + format + month + format + date
      }
      return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
    }

小结

这样我们就可以来做我们的项目了, js高程第四版链接: https://pan.baidu.com/s/18P8k... 可以加公众号获取提取码.

若有不懂的地方，请加q群147936127交流或者vx: ltby52119，谢谢~