vue使用XLSX插件导出excel

前言

最近做了一个导出excel文件，是前端来导出，不是后端处理好返给前端一个url。所以我搜了一个插件XLSX来实现。

目前只做了导出功能，没有使用别的功能。

安装

npm install xslx

基本用法

   let list=[{
    name:'张三'，
    age:18
    },{
    name:'李四'，
    age:16
    }]
    
    const ws = XLSX.utils.json_to_sheet(list)
      /* 新建空workbook */
      const wb = XLSX.utils.book_new()
      /* 添加worksheet只添加了一个 */
      XLSX.utils.book_append_sheet(wb, ws, 'result')

      const wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })

      let url = window.URL.createObjectURL(new Blob([wbout]))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', '测试数据' + '.xls')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link) //下载完成移除元素
      window.URL.revokeObjectURL(url) //释放掉blob对象

这样导出的表头都是数组的字段名，是英文的，所以写了一下代码将英文对照为中文。

导出的英文标题改为中文

const model = new Map([['name':'姓名'],['age','年龄']])
let data =[]
list.forEach(item=>{
  const obj ={}
  for(k in item){
    if(model.get(k)){
      obj[model.get(k)]=item[k]
    }else{
      // 此行是为了保留原始其他列，按需求可以不写
      obj[k]=item[k]
    }
  }
  data.push(obj)
})