前端导出excel,单独设置表头

前端导出excel,单独设置表头

参考：
SheetJS/js-xlsx修改表头json_to_sheet修改表头_Aqvdrt的博客-优快云博客

js xlsx使用说明（主要讲导出表格与设置表头相关）_兮木兮木的博客-优快云博客_jsxlsx

背景：

​ 前端在用json_to_sheet导出表格的时候的时候，表头默认是json对象的key值。比如说有这样一个对象{id: 'xxxxx'}，那么id就会默认是这张表的表头，xxxxx就是表头下面值。

​ 那么问题就来了，我们不可能用一个英文变量名作为一张excel表的表头的，肯定需要中午名字对应的，但是从后端传过来的json对象也不可能给你中文变量的，所以我们还是要在前端解决这个问题。

思路：

1. 手动设定表头的英文字段，这里是为了限制表格的显示内容和表格每一列的顺序
2. 手动设定表头的中文字段
3. 把中文字段的数组和后端传来的json对象数组拼接
4. 把拼接好的新数组放在sheet上，同时通过设置`skipHeader`为`true`跳过默认的表头

​ 上述做法的思想就是手动增加一条数据，只不过该数据的内容是需要显示的表头中文字。然后跳过原本的表头就行了。

代码：

import * as XLSX from 'xlsx';

/* 
    * 导出 excel 文件
    * @param array JSON 数组
    * @param sheetName 第一张表名
    * @param fileName 文件名
*/
export function ExportExcelFile(array, sheetName, fileName) {
    const header = ['patientName', 'cellphone', 'outpatientDay', 'answerTime', 'satisfaction', 'condition', 'subsequentVisit', 'outpatientRehabilitationIntention', 'noSatisfactionReason'];
    const header_zh = {
        patientName: '姓名',
        cellphone: '手机号码',
        outpatientDay: '门诊日期',
        answerTime: '随访记录',
        satisfaction: '问卷满意度',
        condition: '患者病情',
        subsequentVisit: '复诊计划',
        outpatientRehabilitationIntention: '患者意向治疗项目',
        noSatisfactionReason: '不满意原因'
    };
    // 因为数据是有冗余的，但是实际上不需要显示那么多列，需要把多余的列进行剔除
    // 找到最后一列的编号
    let lastCol = XLSX.utils.encode_col(header.length - 1);
    // 找到最后一行的编号
    let lastRow = XLSX.utils.encode_row(array.length);
    const arrayWithHeader = [header_zh, ...array];
    const jsonWorkSheet = XLSX.utils.json_to_sheet(
        arrayWithHeader,
        {
            header: header,
            skipHeader: true
        }
    );
    // 重新设置 单元格范围，剔除不需要的（数据中的extra）列
    jsonWorkSheet['!ref'] = `A1:${lastCol}${lastRow}`;
    const workBook = {
        SheetNames: [sheetName],
        Sheets: {
            [sheetName]: jsonWorkSheet,
        }
    };
    return XLSX.writeFile(workBook, fileName);
}

效果：