关于前端: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/18P8k… 能够加公众号获取提取码.

若有不懂的中央，请加 q 群 147936127 交换或者 vx: ltby52119，谢谢~