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组件
  }
}

修改样式和布局

<template>
 <div class="upload-excel">
    <div class="btn-upload">
      <el-button :loading="loading" size="mini" type="primary" @click="handleUpload">
        点击上传
      </el-button>
    </div>

    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
      <i class="el-icon-upload" />
      <span>将文件拖到此处</span>
    </div>
  </div>
</template>
<style scoped lang="scss">
.upload-excel {
  display: flex;
  justify-content: center;
   margin-top: 100px;
   .excel-upload-input{
       display: none;
        z-index: -9999;
     }
   .btn-upload , .drop{
      border: 1px dashed #bbb;
      width: 350px;
      height: 160px;
      text-align: center;
      line-height: 160px;
   }
   .drop{
       line-height: 80px;
       color: #bbb;
      i {
        font-size: 60px;
        display: block;
      }
   }
}
</style>

excel数据导入

建立公共导入的页面路由

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

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

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

<template>
  <!-- 公共导入组件 --> 
  <upload-excel :on-success="success" />
</template>

分析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/18P8ky1YalApRb-HDRENZBQ 可以加公众号获取提取码.

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