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 | 
	}

以上内容 取材 https://www.ag-grid.com/javascript-grid-excel/