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

        导出功能是比较常见的功能之一，这里以一个简单的导出功能为示例，如果需要更复杂的导出功能，可以在此基础上进行丰富。

 

一、下载xlsx依赖

npm install xlsx --save

二、在所需要的页面js部分的script中引入xlsx

import XLSX from "xlsx";

以上适用于较低版本的vue，如果你是vue3，那么可以使用如下语句进行引入：

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

三、在template模板中需要的位置添加导出按钮，并为按钮绑定点击事件

   <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');
}

其中arr是要导出的数据源。

以上就是前端导出功能的简单实现，如果有什么补充欢迎留言区补充。