用XLSX实现前端导出excel

背景

前端需要实现一个统计报表数据的导出，数据最多几十条。就用xlsx库直接前端实现了。项目技术栈是vue2+element-ui

直接上代码

# 安装依赖
npm install xlsx

// 引入导出插件
import * as XLSX from 'xlsx';

/** 导出按钮操作 */
handleExport() {
    // 获取当前列表数据 - exportList为列表数据，dataToExport重写是保证所需字段和顺序
    const dataToExport = this.exportList.map(item => {
        // 创建一个新的对象，按照所需的顺序插入键值对
        return {
            aa: item.aa,
            bb: item.bb,
            cc: item.cc
        };
    });

    // 使用xlsx实现导出
    const wb = XLSX.utils.book_new();
    // 列名重定义
    const ws = XLSX.utils.json_to_sheet(dataToExport)
    XLSX.utils.sheet_add_aoa(ws, [['字段a', '字段b', '字段c']], {origin:0});;
    XLSX.utils.book_append_sheet(wb, ws, "产品明细");
    const wbBlob = new Blob([XLSX.write(wb, {type: 'array',bookType: 'xlsx'})],{type: 'application/octet-stream'})

    // 下载excel文件
    if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = '产品明细.xlsx'
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(wbBlob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
    } else {
        // IE10+下载
        navigator.msSaveBlob(wbBlob, '产品明细.xlsx')
    }
}