前端进行表格数据导出到Excel表格

在一些项目中，会有可以导出表格数据的需求，这个导出的功能，前端就可以来完成，不过需要后端配合传过来表格头所对应的属性名以及这些属性名所对应的中文，搭配返回的数据，前端进行处理即可，虽然百度里面会有一大堆相关的操作，不过目前项目中已经完成了这一功能，自己还是来记录一下，也方便后面的查阅。

需要的数据以及代码实现

// 后端需返回的数据
cnData: {
    associationType: "类型"
    cardId: "身份证"
    clueId: "ID"
    clueName: "名称"
    clueNumber: "编号"
    contactInformation: "联系方式"
    cueStatus: "状态（已转发1，空0）"
    describes: "描述"
    entryPerson: "人"
    entryTime: "时间"
    feedbackStatus: "状态，已核查1，未核查0"
    forwardedUserId: "被转发用户ID"
    frequency: "频次"
    occurrencePlace: "发生地点"
    phoneNumber: "人员手机号码"
    provider: "提供人"
    providerContactInformation: "人联系方式"
    suspectObject: "对象"
    typle: "类型"
}

cnDataArray: [
        "clueId",
		"clueNumber",
		"clueName",
		"typle",
		"describes",
		"suspectObject",
		"associationType",
		"entryTime",
		"entryPerson",
		"contactInformation",
		"provider",
		"providerContactInformation",
		"cueStatus",
		"forwardedUserId",
		"feedbackStatus",
		"cardId",
		"occurrencePlace",
		"frequency",
		"phoneNumber"
]

data: [
    {
        associationType: "特定工具及原材料获取意图"
        cardId: "610120199007289930"
        clueId: 1
        clueName: "建设一"
        clueNumber: "xz0001"
        contactInformation: "18645678922"
        cueStatus: 1
        describes: "在建设一路居民"
        entryPerson: "1"
        entryTime: "2022-01-22 20:37:13"
        feedbackStatus: 1
        forwardedUserId: 18
        frequency: 2
        occurrencePlace: "建设一"
        provider: "赵3"
        providerContactInformation: "18971645678"
        rowId: 1
        suspectObject: "欣欣小区"
        typle: "疑似"
    }
]

在获取数据时进行相关的处理

// 导入的方法
import { ObjectTools } from "../../tools/ObjectTools";

// 设置的几个数据
excelHead: {},
excelHeadArray: [],
excelData: [],
multipleSelection: []




getData() {
    //  此处只写了 在axios请求后的 相关数据处理
    this.excelHead = res.data.cnData;
    this.excelHeadArray = res.data.cnDataArray;
}

// 其中  我们可以做 element table里面的 勾选表格  导出进行勾选的数据

// 勾选表格项
handleTableSelect(val) {
    this.multipleSelection = val;
}

// 导出
clickOutBtn() {
   if (this.multipleSelection.length > 0) {
       this.$confirm('确定导出数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
       .then(() => {
          // multipleSelection是一个数组，存储表格中选择的行的数据。
          this.excelData = this.multipleSelection.map(item => {
          return ObjectTools.reflowObject(this.excelHeadArray, item);
         });
        // 调用挂载的全局方法
        this.$excelTable(
         this.excelData,
         ObjectTools.reflowObject(this.excelHeadArray, this.excelHead),
         'drug-person-table-ref',
         '人员数据表格');
         })
         .catch();
            } else {
                return this.$message.warning('请先勾选要导出的数据');
            }
}


// ObjectTools.js 文件
export class ObjectTools {
    static isEmpty(obj) {
        return Object.keys(obj).length === 0;
    }

    static isNotEmpty(obj) {
        return !this.isEmpty(obj);
    }

    /**
     * 重排对象
     * @param baseArr Array<key>
     * @param baseObj 基准对象
     * @return {{}}
     */
    static reflowObject(baseArr, baseObj) {
        const target = {};
        baseArr.forEach(key => {
            target[key] = baseObj[key] || "";
        });
        return target;
    }
};


// 挂载全局方法 将表格数据写入excel
// excelData 要导出的数据； excelHead 导出的表格头 及接口返回的字段定义及翻译；fatherRef 父级设置的ref； excelName 导出的表格名

Vue.prototype.$excelTable = function(
    excelData,
    excelHead,
    fatherRef,
    excelName
) {
    require.ensure([], () => {
        const tHeader = []; // 导出的表头名信息
        const filterVal = []; // 导出的表头字段名，需要导出表格字段名
        const list = excelData;
        for (let k in list[0]) {
            filterVal.push(k);
        }
        filterVal.map(item => {
            for (let i in excelHead) {
                if (item == i) {
                    tHeader.push(excelHead[i]);
                }
            }
        });
        const data = formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, excelName); // 导出的表格名称，根据需要自己命名
        // 取消选中项
        this.$refs[fatherRef].$refs['base-table'].clearSelection();
    });
};

以上就是此次的导出，代码放的不是很规范，仅供参考，也便于后期浏览回归。