前端方式实现excel下载

前言

提示：因为业务需求，某些数据已经一次性从接口获取到，因此前端可以直接实现下载功能，不必去麻烦后端同学。

---

正文

参考代码

代码如下（示例）：

import Excel from 'exceljs'
import { saveAs } from 'file-saver'

// 初始化excel
const wb = new Excel.Workbook()
const ws = this.wb.addWorksheet('Sheet1')

// 模拟数据
const mockData = [{name:'shino',id:1},{name:'peter',id:2}]
// 设置表头
ws.columns = [{header:'姓名',key:'name'，width:50},{header:'编号',key:'id',width:50}]
// 循环添加数据
mockData.forEach(v=>{
	ws.addRow(v)
})

// 下载实现
wb.xlsx.writeBuffer().then(buffer => {
  saveAs(
    new Blob([buffer],
      { type: 'application/octet-stream' }),
    `自定义文件名字.xlsx`
  )
}).catch(err => {
  console.log(err)
})

该处使用的url网络请求的数据。

---

总结

注意： 1.关键方法是wb.xlsx.writeBuffer，在内存中实现excel的读写； 2.exceljs在处理excel文件中有许多强大的功能，如宽度、超链接等等，具体可参考exceljs官网。