纯前端实现数据导出到.xlsx文件中

导出到.xlsx文件

安装

npm install file-saver --save  #用于保存文件
npm install xlsx --save  # 用于转为xlsx文件

引入

import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'

使用

// 导出文件xlsx
 handleExport() {
   // 获取表格头部部分,添加到header数组中
   const header = []
   // tableInfo是存储了表头信息的数组，里面的元素是对象，例如：{lable:"名字",value:"name"}
   this.tableInfo.forEach((item) => {
     header.push(item.label)
   })

   // 获取表格数据部分
   // 拿到和表头匹配的数据
   const body = JSON.parse(JSON.stringify(this.allTableData)) // 复制一份数组或者说将观察数组转为普通数组
   // 表身
   const dataGroup = []
   body.forEach((item) => {
     const _row = []
     const {
       date,
       region,
       county,
       machineFirstTimeResponse,
       complaintHandle,
     } = item

     _row.push(date)
     _row.push(region)
     _row.push(county)
     _row.push(machineFirstTimeResponse)
     _row.push(complaintHandle)
	
	 // 将拿到的数据_row数组再放到dataGroup数组中
     dataGroup.push(_row)
   })

	// 将从表格中拿到的表头数组和表身放到_data变量中，该变量中存的是数组类型数据
   let _data = [
     header, // 表头   [date,region,county,machineFirstTimeResponse,complaintHandle]
     ...dataGroup, // 数据
   ]

   let ws = XLSX.utils.aoa_to_sheet(_data)

	// 设置每列宽度
   ws['!cols'] = [
     { wch: 20 },
     { wch: 20 },
     { wch: 20 },
     { wch: 20 },
     { wch: 20 },
   ] 

   const wb = XLSX.utils.book_new()
   XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')

   let wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' })

   const s2ab = (s) => {
     let buf = new ArrayBuffer(s.length)
     let view = new Uint8Array(buf)
     for (let i = 0; i < s.length; i++) {
       view[i] = s.charCodeAt(i) & 0xff
     }
     return buf
   }

   const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })

   FileSaver.saveAs(blob, '表名.xlsx')
   this.$message.success('导出成功！')
 },