vue element ui 利用xslx导出文档表格功能（纯前端导出下载文档）

前言

本篇文章记录纯前端导出下载文档功能。

若想查看从后端接收文件流，将其处理后下载的实现方式，请点击文章链接：
https://blog.csdn.net/honeymoon_/article/details/120670939

步骤：

1.下载xslx

npm install xlsx --save

2.导入xslx

import XLSX from 'xlsx'

3.template中给个点击事件

<button @click="exportData">导出</button>

4.methods中定义函数实现导出

exportData() {
  //定义一个数组，存放表头数据
  let head = [];
  //最后要导出的数组
  let tableData = [];
  //head格式为：['代码','时间1','时间2']
  this.tableHead.forEach( item => {
    head.push(item.name);
  })
  //把表头追加到tableData中
  tableData.push(head);
  this.tabList.forEach( item => {
  	//表格中每有一行数据，都会创建一个rowData，追加到tableData中
    let rowData = [];
    rowData = [
      item.code,
      item.time1,
      item.time2,
    ]
    tableData.push(rowData);
  })
  //将一个数组转成sheet，会自动处理number、string、boolean、date等类型数据；
  let ws = XLSX.utils.aoa_to_sheet(tableData)
  let wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '表格')
  //文件名
  XLSX.writeFile(wb, '表格.xlsx')
},

注意：tableData是一个数组，数组的第一项为表头数据(数组)，之后的若干项为表中数据（数组）。
即：tableData[[表头数组],[表中数据数组1], [表中数据数组2],[表中数据数组3]...]