ag-grid-angular 中导出Excel表 及其配置
api
exportDataAsExcel(params)
常用params 详解
这里用于导出Excel表的样式,名称以及各种配置
const param ={
// 导出的文件名
fileName:'文件名',
// 仅导出选定的行 值为boolean。
onlySelected:true,
// 仅导出包括其他页面在内的选定行(仅在使用分页时才有意义)。
onlySelectedAllPages:false,
// 如果为true,则所有列将按照它们出现的顺序导出columnDefs
// 否则,仅导出当前在网格中显示的列,并且以该顺序显示。默认:false
allColumns:false,
// 设置为true包括标题列分组。默认:false
columnGroups:false,
// 如果要导出特定的列,数组中放列键
columnKeys:[],
// 网格中每个单元格调用一次的回调函数 , 这里可以做数据处理 比如 大写
processCellCallback: (params)=>{
if (params.value && params.value.toUpperCase) {
return params.value.toUpperCase();
} else {
return params.value;
}
},
// 所有行的高度
rowHeight:25,
// 标头行的高度(以像素为单位)
headerRowHeight:25,
// 覆盖默认的列宽。 可以为数字 也可以为一个返回数字的函数
columnWidth:40,
// Excel中将要导出网格的工作表的名称
sheetName:'sheet1',
// 自定义页眉
customHeader:this.makeCustomContent(),
// 设置为true仅在分组时跳过页脚,如果不分组或者不使用页脚 则没影响 默认为false
skipFooters:false,
// 设置true 跳过行组页眉和页脚,如果不分组 没影响 默认false
skipGroups:false,
// 设置为true 禁用列标题 默认false
skipHeader:false,
// 设置为true 禁止导出固定在网格顶部的行
skipPinnedTop:false,
// 设置为true 禁止导出固定在网格底部的行
skipPinnedBottom:false,
// 导出的格式 "xlsx" | "xml"
exportMode: 'xlsx'
};
// 导出excel
this.grid.gridApi.exportDataAsExcel(param);
自定义页眉和页脚
customHeader并且customFooter都采用2D ExcelCell对象数组:
interface ExcelCell {
data: ExcelData;
// excelStyles 中要定义的id
styleId?: string;
// 可选要跨越的列数目 1 表示跨2列
mergeAcross?: number;
}
interface ExcelData {
//数据类型 注意大小写
type: 'String' | 'Number' | 'Boolean' | 'DateTime' | 'Error';
value: string | null;
}
例子
makeCustomContent(){
return[
[{
data :{
// 类型
type:'String',
// 输出的值
value:'标题'
},
// 在excelStyle 中定义的id
styleId:'customHeader',
// 要合并的列数 值为数字
mergeAcross:13
}]
]
}
定义样式
html中
<ag-grid-angular
#agGrid
[columnDefs]="columnDefs"
[rowSelection]="rowSelection"
[rowData]="rowData"
[excelStyles]="excelStyles"
></ag-grid-angular>
ts中
this.excelStyles = [
{
// 必填 样式的ID,该id是唯一的字符串
id: 'header',
// 字体设置
font: {
//
color: '#000000',
size:11
},
alignment: {
horizontal:'Center',
vertical : 'Center'
},
// 边框
borders: {
borderBottom: {
color: "#000000", lineStyle: 'Continuous', weight: 2
},
borderLeft: {
color: "#000000", lineStyle: 'Continuous', weight: 1
},
borderRight: {
color: "#000000", lineStyle: 'Continuous', weight: 1
},
borderTop: {
color: "#000000", lineStyle: 'Continuous', weight: 1
}
},
// 背景颜色 和图案
interior: {
color: "#cccccc", pattern: 'Solid'
}
},{
id:'customHeader',
alignment: {
horizontal:'Center',
vertical : 'Center'
},
font: {
color: '#000000',
size:12,
bold:true
},
borders: {
borderBottom: {
color: "#000000", lineStyle: 'Continuous', weight: 2
},
borderLeft: {
color: "#000000", lineStyle: 'Continuous', weight: 1
},
borderRight: {
color: "#000000", lineStyle: 'Continuous', weight: 1
},
borderTop: {
color: "#000000", lineStyle: 'Continuous', weight: 1
}
},
}
样式参数详解
注意大小写 ------‘Left’
ExcelStyles:{
// 样式的id,该id必须是唯一的字符串,并且必须和cellClassRules的样式名字匹配
id(必填) : String,
alignment(可选) :{ // 垂直和水平对齐
//水平方向的对齐 这里只列常用的 左,中,右,自动
horizontal: 'Left' | 'Center' | 'Right' | 'Automatic'
// 缩进 值为数字
indent : number,
// 旋转 0-180
rotate:number,
// 垂直方向的对齐 这里也只列常用的 上,下,中,自动
vertical: 'Top' | 'Bottom' | 'Center' | 'Automatic',
// true表示缩小文本大小,以便适应单元格
// false 表示单元格中的字正常显示 , 不做变化
shrinkToFit: boolean,
// 文本超出是否换行
wrapText:boolean,
},
// 写上之后 必须制定所有的四个边框
borders(可选):{
borderBottom:{
// 边框的样式 lineStyle取值
// "None", "Continuous", "Dash", "Dot", "DashDot", "DashDotDot", "SlantDashDot", "Double"
lineStyle: string,
// 边框的粗细 0-3
weight:number,
// 十六进制的颜色
color:'#000000'
}
borderLeft:
borderTop:
borderRight:
},
// 字体相关配置
font(可选) :{
// 是否加粗
bold:boolean,
// 字体颜色 十六进制
color:'#000000',
// 字体名称
fontName: string,
// 是否斜体
italic:boolean,
// 是否描边
outline:boolean,
// 字体阴影
shadow:boolean,
// 字体大小
size:number,
// 是否加删除线
strikeThrough:boolean,
// 下标或者上标
underline:'None' | 'Subscript' | 'Superscript',
// 与win32相关的字符集值
charSet:number,
// 相当与 font-family
family: 'Microsoft YaHei',
},
// 背景设置
interior(可选):{
// 背景颜色
color:'#000000',
// 背景图案 这边还有很多 列举了两
pattern: 'None' | 'Solid' ,
// 背景图案的颜色
patternColor:'#000000'
},
// 处理格式
numberFormat(可选):{
format: 'mm/dd/yyyy';
},
// 到表格中显示的类型
dataType(可选):string | number | boolean |
}