表格导入导出

excel导出

1. 插件包位于src/vendor/export2Excel.js，采用的是按需引入的方式

2. Export2Excel依赖的包有xlsx、file-saver和script-loader

   npm i file-saver script-loader xlsx
   

3. 将vender文件夹复制到我们自己的项目里

  //使用
  import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        const list = this.list
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })

// 导出当前页数据
async exportTd () {
  const excel = await import('@/vendor/Export2Excel')
  // excel表示从vender中导入的模块对象
  console.log(excel)
  excel.export_json_to_excel({
    // 表头 必填
    header: ['姓名', '工资'],
    // 表头对应的具体数据 必填
    data: [
      ['刘备', 100],
      ['关羽', 500]
    ],
    filename: 'excel-list', // 导出下载的文件名称
    autoWidth: true, // 导出excel列宽度是否自适应
    bookType: 'xlsx' // 导出生成的文件类型
  })
}

Excel导出参数说明

参数	说明	类型	可选值	默认值
header	导出数据的表头	Array	/	[]
data	导出的具体数据	Array	/	[[]]
filename	导出文件名	String	/	excel-list
autoWidth	单元格是否要自适应宽度	Boolean	true / false	true
bookType	导出文件类型	String	xlsx, csv, txt, more	xlsx

处理数据转为二维数组

数组中的对象保留部分属性

for in 遍历对象

使用includes判断

export function getUseList (listArray, headerArray) {
  const erarr = []
  listArray.forEach(item => {
    const arr = []
    for (const key in item) {
      if (headerArray.includes(key)) {
        arr.push(item[key])
      }
    }
    erarr.push(arr)
  })
  return erarr
}

导出

header为数组

data为二维数组

excel导入

导入

组件拿过来用 新创建组件 配置路由 不在左侧显示

<script>
// 转换excel时间
// import { formatExcelDate } from '@/utils'
// 批量新增员工接口
import { importEmployees } from '@/api/employees'
​
export default {
  methods: {
    /**
     * file 选择的excel文件
     * 上传之前校验：
     * 1. 校验大小
     * 2. 校验文件格式
     * 校验通过 return true | 校验失败 return false（必须）
     */
    beforeUpload (file) {
      console.log('选择的excel文件:', file)
      // 只有返回true才会触发onSuccess函数
      return true
    },
    /**
     * 读取excel中数据
     */
    async onSuccess ({ header, results }) {
      // console.log('读取excel的数据-表头', header)
      // console.log('读取excel的数据-数据', results)
      // console.log('转换中文key结果：', this.transformResults(results))
      // 调用接口批量新增员工
      await importEmployees(this.transformResults(results))
      // this.transformResults(results)
      // 返回员工管理页面
      this.$router.back()
    },
    /**
     * 需求：把results中中文属性转换成英文属性
     * results 转换的excel数据
     */
    transformResults (results) {
      /**
       * 思路：
       * 1. 准备中英转换的对照关系map
       * 2. 遍历results把读取的员工信息的中文属性根据map转换成英文属性
       */
      // 根据excel中字段去定义(中英对照表)
      const userMap = {
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      const newArr = []
      results.forEach(obj => {
        const newobj = {}
        for (const key in obj) {
          const enkey = userMap[key]
          newobj[enkey] = obj[key]
        }
        newArr.push(newobj)
      })
      console.log(newArr)
      return newArr
    }
  }
}
</script>
​
<style lang="scss" scoped>
</style>
​
​

中文属性转为英文属性

中英文对照表

 transformResults (results) {
      /**
       * 思路：
       * 1. 准备中英转换的对照关系map
       * 2. 遍历results把读取的员工信息的中文属性根据map转换成英文属性
       */
      // 根据excel中字段去定义(中英对照表)
      const userMap = {
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      const newArr = []
      results.forEach(obj => {
        const newobj = {}
        for (const key in obj) {
          const enkey = userMap[key]
          newobj[enkey] = obj[key]
        }
        newArr.push(newobj)
      })
      console.log(newArr)
      return newArr
    }
  }