前端导出excel,单独设置表头
参考:
SheetJS/js-xlsx修改表头json_to_sheet修改表头_Aqvdrt的博客-CSDN博客
js xlsx使用说明(主要讲导出表格与设置表头相关)_兮木兮木的博客-CSDN博客_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);
}