Excel的导入与导出

Excel的模块化导入

<template>
  <div>
    <UploadExcel :on-success="handleSuccess" />
  </div>
</template>

<script>
import { importEmployee } from '@/api/employees'
import { formatExcelDate } from '@/utils'
export default {
  name: '',
  data() {
    return {

    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    async handleSuccess({ results, header }) {
      // console.log(results, header, 966)
      // 处理数据
      const mapInfo = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName',
        '聘用形式': 'formOfEmployment'
      }
      const arr = results.map(item => {
        const obj = {}
        const zwkey = Object.keys(mapInfo)
        // console.log(zwkey, 966) // ['入职日期', '手机号', '姓名', '转正日期', '工号', '部门', '聘用形式']
        zwkey.forEach(key => {
          const enkey = mapInfo[key]
          // console.log(enkey, 966) // 拿到的是mapinfo每一个英文值

          if (enkey === 'timeOfEntry' || enkey === 'correctionTime') {
            obj[enkey] = new Date(formatExcelDate(item[key]))
          } else {
            obj[enkey] = item[key]
          }
        })
        return obj
      })
      // console.log(arr, 966)
      // 发请求
      await importEmployee(arr)
    }
  }
}
</script>
<style lang='less'  scoped>

</style>

Excel模块化导出

1.首先要有vendor文件 包含 Export2Excel.js Export2Zip.js 文件
2. 点击导出按钮

 // 点击Excel的导出
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(async(excel) => {
        // 设置表头
        // const tHeader = ['Id123', 'Title', 'Author', 'Readings', 'Date']
        // const list = this.tableData
        const res = await getEmployeeList({ page: 1, size: this.total })
        const list = res.data.rows
        const data = this.formatJson(list)
        const tHeader = this.header
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'web72' // 设置文件名
          // autoWidth: this.autoWidth
          // bookType: "txt", //设置文件格式
        })
        this.downloadLoading = false
      })
    },
    formatJson(list) {
      const map = {
        id: '编号',
        password: '密码',
        mobile: '手机号',
        username: '姓名',
        timeOfEntry: '入职日期',
        formOfEmployment: '聘用形式',
        correctionTime: '转正日期',
        workNumber: '工号',
        departmentName: '部门',
        staffPhoto: '头像地址'
      }
      // console.log(list, 96)
      return list.map(item => {
        const obj = {}
        const enkey = Object.keys(map)
        // console.log(enkey, 966) // ['id', 'password', 'mobile', 'username', 'timeOfEntry', 'formOfEmployment', 'correctionTime', 'workNumber', 'departmentName', 'staffPhoto']
        enkey.forEach(key => {
          const zwkey = map[key]
          // console.log(zwkey, 966) // map里面的每一个中文
          obj[zwkey] = item[key]
        })
        // console.log(obj, 666)
        const valueArr = Object.values(obj)
        this.header = Object.keys(obj)
        return valueArr
      })
    }