本帖最后由 前端小菜鸟 于 2024-6-3 16:02 编辑
我画了 一个相对复杂的表头的excel
this.sheet.setDataSource([]);
this.sheet.setRowCount(2,GC.Spread.Sheets.SheetArea.colHeader)
this.sheet.addColumns(this.sheet.getColumnCount(this.SheetArea.viewport), 1);
this.sheet.setValue(0, this.sheet.getColumnCount(this.SheetArea.viewport) - 1, '编码', GC.Spread.Sheets.SheetArea.colHeader);
this.sheet.addSpan(0, 0, 2, 1, GC.Spread.Sheets.SheetArea.colHeader);
this.sheet.setColumnWidth(this.sheet.getColumnCount(this.SheetArea.viewport) - 1, 100);
this.sheet.addColumns(this.sheet.getColumnCount(this.SheetArea.viewport), 1);
this.sheet.setValue(0, this.sheet.getColumnCount(this.SheetArea.viewport) - 1, '名称', GC.Spread.Sheets.SheetArea.colHeader);
this.sheet.addSpan(0, 1, 2, 1, GC.Spread.Sheets.SheetArea.colHeader);
this.sheet.setColumnWidth(this.sheet.getColumnCount(this.SheetArea.viewport) - 1, 130);
this.sheet.addColumns(this.sheet.getColumnCount(this.SheetArea.viewport), 1);
this.sheet.setValue(0, this.sheet.getColumnCount(this.SheetArea.viewport) - 1, '方案', GC.Spread.Sheets.SheetArea.colHeader);
this.sheet.addSpan(0, 2, 2, 1, GC.Spread.Sheets.SheetArea.colHeader);
this.sheet.setColumnWidth(this.sheet.getColumnCount(this.SheetArea.viewport) - 1, 130);
this.sheet.frozenColumnCount(3);
if(this.tab.nzSelectedIndex === 1){
this.sheet.addColumns(this.sheet.getColumnCount(this.SheetArea.viewport), 1);
this.sheet.setValue(0, this.sheet.getColumnCount(this.SheetArea.viewport) - 1, '方案量', GC.Spread.Sheets.SheetArea.colHeader);
this.sheet.addSpan(0, 3, 2, 1, GC.Spread.Sheets.SheetArea.colHeader);
this.sheet.setColumnWidth(this.sheet.getColumnCount(this.SheetArea.viewport) - 1, 130);
this.sheet.frozenColumnCount(4);
}
this.sheet.options.protectionOptions = this.option;
this.sheet.options.clipBoardOptions = GC.Spread.Sheets.ClipboardPasteOptions.values;
this.sheet.options.isProtected = true;
前几列表头是固定的,后面的表头是后台取的
private setHeader(sheet: any) {
for (let index = 0; index < this.listHeadData.length; index++) {
sheet.addColumns(sheet.getColumnCount(this.SheetArea.viewport), 1);
sheet.setValue(0, sheet.getColumnCount(this.SheetArea.viewport) - 1, this.listHeadData[index].ucode, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(1, sheet.getColumnCount(this.SheetArea.viewport) - 1, this.listHeadData[index].uname, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setColumnWidth(sheet.getColumnCount(this.SheetArea.viewport) - 1, 150);
}
}
现在我做导出
exports() {
const serializationOption = {
ignoreFormula: false, // 如果设置为true则忽略公式,不会序列化公式,只会将公式计算的结果序列化到JSON中。
ignoreStyle: false, // 如果设置为true则忽略样式,所有style中的属性将不会序列化到JSON中
rowHeadersAsFrozenColumns: true, // 将行头转换为冻结列序列化
columnHeadersAsFrozenRows: true, // 将列头转换为冻结行序列化
includeBindingSource: true, // 将数据绑定的数据源也序列化到json中
saveAsView: true
};
const json = this.spread.toJSON(serializationOption);
let excelIo = new Excel.IO();
excelIo.save(json, (blob) => {
// 创建一个下载链接并模拟点击下载
const downloadUrl = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = downloadUrl;
a.download = '公用工程.xlsx'; // 设置下载文件的名称
document.body.appendChild(a);
a.click();
// 清理资源
window.URL.revokeObjectURL(downloadUrl);
document.body.removeChild(a);
}, (e) => {
this.msg.error(e)
});
}
}
不加 rowHeadersAsFrozenColumns: true, // 将行头转换为冻结列序列化
columnHeadersAsFrozenRows: true, // 将列头转换为冻结行序列化
两个设置的时候,导出时不能导出表头,只有表体
加上的时候 表显示混乱,会缺少列而且表头和列不能对其,表头也缺少 表体也缺少,只能显示三列。
|