vue3+xlsx 将表格数据导出为excel文件

343 阅读1分钟

查了好多资料,废话太多,看起来费劲,这篇文章只讲怎么使用

npm install xlsx --save

function  exportExcelHandler() {
  const arr:any[] = [];
  arr[0] = ["索引","缴费对象","缴费前余额","缴费金额","操作人","缴费类型","缴费金额"]

  tableData.value.forEach((item,index)=>{
    arr[index+1] = arr[index+1] || []
    for(let i in item){
      arr[index+1].push(item[i])
    }
  })

  const workBook = xlsx.utils.book_new(); //创建一个新的工作表
  const worksheet = xlsx.utils.aoa_to_sheet(arr); //将表格转换为工作表
  xlsx.utils.book_append_sheet(workBook,worksheet,"Sheet 1"); //将工作表添加到workBook中
  xlsx.writeFile(workBook,"index.xlsx");
}

因为使用的是element plus的table组件,数据格式为

const tableData = ref([
    {...}
])

xlsx.utils.aoa_to_sheet方法接收一个数组,手动转一下然后给arr即可,arr第一个元素手动设置,是excel的表头