excel导入导出功能

导出: 

1.将vue-element-admin中的src/vendor/export2Excel复制到项目中

码云地址:https://gitee.com/mirrors/vue-element-admin/tree/master/src/vendor

2.npm install file-saver script-loader xlsx --save  安装依赖

3. 以下代码是我做的某个项目中的,

formatData(list) {
      const map = {
       这里面是映射关系
      '把某种格式' : '要转成的格式'
      }
      console.log(list)
      let header = []  //这是 导出的excel表头
      let data = []  //这是具体导出的数据
      const one = list[0]  //找到第一个元素,one代表第一个元素
      if (!one) {    //如果不是第一个元素直接返回空,这里是第一个是因为分页,然后每页至少有一条数据
        return { header, data }    
      }
      header = Object.keys(one).map(key => {  //我这里做了分页,每页n条,把每页第一个对象的key取出来, map[key] 是 编号,姓名,密码.....这样的
        return map[key]  
      })

      // data把list中每一个对象转成 对应的value数组
      data = list.map(obj => {
        const key = obj['formOfEmployment'] // 1, 2 formOfEmployment这是一个属性,是聘用的形式
        obj['formOfEmployment'] = hireTypEnmu[key] // hireTypEnmu:{1:'正式', '2':'非正式' }

        return Object.values(obj)
      })

      return { header, data }
    },

hExport() {
      import('@/vendor/Export2Excel').then(async excel => {
        // 发ajax请求，获取数据
        const res = await xxxxx(参数1,参数2)
        const list = res.data.xxxx
        console.log(list)

        const { header, data } = this.formatData(list)
        // excel表示导入的模块对象
        console.log(header, data)
        excel.export_json_to_excel({
          // header: ['姓名', '工资'], // 表头 必填
          header: header, // 表头 必填
          data: data,
          // data: [
          //   ['刘备11111111111111', 100],
          //   ['关羽', 500]
          // ], // 具体数据 必填
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },

 

导入:

1.安装插件 npm install xlsx -S

2.把vue-element-admin 里面 src/components/UploadExcel导入到自己的项目中

码云地址:(文件在这里)

https://gitee.com/mirrors/vue-element-admin/tree/master/src/components/UploadExcel

3.然后在src/components/index.js中把它注册成全局组件

4.根据业务需求(点击导入之后,跳转到import页面),src/router/index.js中 添加静态路由 ,并在views文件下新建import/index.vue,然后在这个页面里补充导入成功的回调函数

<template>
  <upload-excel :on-success="handleSuccess" />
</template>

<script>
export default {
  name: 'Import',
  methods: {
    handleSuccess({ header, results }) {
      console.log(header, results)
    }
  }
}
</script>

5.2021/7/1转为标准时间 utils/index.js中写入如下代码

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)
}

以下是我某个项目中写到的代码,一些逻辑不会

 methods: {
    handleSuccess({ header, results }) {
      console.log(header, results)
      const data = this.transExcel(results)
      console.log('按接口要求 组装数据', data)
      this.doImport(data)
    },
    transExcel(results) {
      const mapInfo = {  //这里这个 mapInfo名字任意 
        xxxxxx  //这里写映射关系
      }
      return results.map(zhObj => { 
        const enObj = {}
        const zhKeys = Object.keys(zhObj) // ['姓名', '手机号']  //Object.keys(zhObj)拿到key的值,然后对['姓名', '手机号']遍历,每一项就是zhKey 

        zhKeys.forEach(zhKey => {
          const enKey = mapInfo[zhKey]
          if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
            // 后端需要的日期格式是标准时间
            enObj[enKey] = new Date(formatExcelDate(zhObj[zhKey]))
          } else {
            enObj[enKey] = zhObj[zhKey] //把中文的key赋值给英文的key
          }
        })

        return enObj
      })
    },
    doImport(data) {
      xxxxxxxx
  }