vue-admin-element框架实现简单的excel导出功能

npm install xlsx --save

import XLSX from "xlsx";

import * as XLSX from 'xlsx' // Vue3 版本

   <el-button type="success" size="mini" icon="Bottom" @click="clickExport" style="width: 120%;  padding-right:10px;">Excel导出</el-button>

// 导出
/*
    * @description:
    * @param {Object} json 服务端发过来的数据
    * @param {String} name 导出Excel文件名字
    * @param {String} titleArr 导出Excel表头
    * @param {String} sheetName 导出sheetName名字
    * @return:
    */
function exportExcel(json, name, titleArr, sheetName) {
    /* convert state to workbook */
    var data = new Array();
    var keyArray = new Array();
    const getLength = function (obj) {
        var count = 0;
        for (var i in obj) {
            if (obj.hasOwnProperty(i)) {
                count++;
            }
        }
        return count;
    };
    for (const key1 in json) {
        if (json.hasOwnProperty(key1)) {
            const element = json[key1];
            var rowDataArray = new Array();
            for (const key2 in element) {
                if (element.hasOwnProperty(key2)) {
                    const element2 = element[key2];
                    rowDataArray.push(element2);
                    if (keyArray.length < getLength(element)) {
                        keyArray.push(key2);
                    }
                }
            }
            data.push(rowDataArray);
        }
    }
    // keyArray为英文字段表头
    data.splice(0, 0, keyArray, titleArr);
    console.log('data', data);
    const ws = XLSX.utils.aoa_to_sheet(data);
    const wb = XLSX.utils.book_new();
    // 此处隐藏英文字段表头
    var wsrows = [{ hidden: true }];
    ws['!rows'] = wsrows; // ws - worksheet
    XLSX.utils.book_append_sheet(wb, ws, sheetName);
    /* generate file and send to client */
    XLSX.writeFile(wb, name + '.xlsx');
}
//导出事件函数
const clickExport = () => {
    const titleArr = ['序号id', '报名人姓名', '手机号', '创业中心活动id', '用户id','创建时间','更新时间','审核状态1:审核中 2.审核通过 3.审核未通过','活动名称','用户姓名']//表头中文名
    arr.value.pop();
    exportExcel(arr.value, 'test', titleArr, 'sheetName');
}