fix(excel-exporters): use grid column width #6673

Author: onlyexeption

projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts

@@ -82,8 +82,9 @@ export class IgxExcelExporterService extends IgxBaseExporter {
             }
         }
 
+        const worksheetData =
+            new WorksheetData(data, options, this._indexOfLastPinnedColumn, this._sort, this._isTreeGrid, this.columnWidthList);
 
-        const worksheetData = new WorksheetData(data, options, this._indexOfLastPinnedColumn, this._sort, this._isTreeGrid);
         this._xlsx = new JSZip();
 
         const rootFolder = ExcelElementsFactory.getExcelFolder(ExcelFolderTypes.RootExcelFolder);

projects/igniteui-angular/src/lib/services/excel/worksheet-data-dictionary.ts

@@ -15,7 +15,6 @@ export class WorksheetDataDictionary {
     private _keysAreValid: boolean;
 
     private _counter: number;
-    private _calculateColumnWidth: boolean;
     private _columnWidths: number[];
     private _context: any;
 
@@ -25,18 +24,19 @@ export class WorksheetDataDictionary {
     public stringsCount: number;
 
     // TODO Switch to fixed column width since auto-calculation takes a lot of time
-    constructor(columnCount: number, columnWidth: number) {
+    constructor(columnCount: number, columnWidth: number, columnWidthsList: number[]) {
         this._dictionary = {};
         this._widthsDictionary = {};
         this._counter = 0;
         this.dirtyKeyCollections();
 
-        this._calculateColumnWidth = !columnWidth;
         this._columnWidths = new Array<number>(columnCount);
         this._columnTypeInfo = new Array<boolean>(columnCount);
 
-        if (!this._calculateColumnWidth) {
+        if (columnWidth) {
             this._columnWidths.fill(columnWidth);
+        } else {
+            this._columnWidths = columnWidthsList;
         }
 
         this.stringsCount = 0;
@@ -69,12 +69,6 @@ export class WorksheetDataDictionary {
             this.hasNonStringValues = true;
         }
 
-        if (this._calculateColumnWidth) {
-            const width = this.getTextWidth(value);
-            const maxWidth = Math.max(this._columnWidths[column] || 0, width);
-            this._columnWidths[column] = maxWidth;
-        }
-
         return isSavedAsString ? this.getSanitizedValue(sanitizedValue) : -1;
     }
 

projects/igniteui-angular/src/lib/services/excel/worksheet-data.ts

@@ -11,8 +11,8 @@ export class WorksheetData {
     private _isSpecialData: boolean;
 
     constructor(private _data: any[], public options: IgxExcelExporterOptions, public indexOfLastPinnedColumn,
-                public sort: any, public isTreeGridData = false) {
-        this.initializeData();
+                public sort: any, public isTreeGridData = false, public columnWidths: number[]) {
+        this.initializeData(columnWidths);
     }
 
     public get data() {
@@ -43,7 +43,7 @@ export class WorksheetData {
         return this._dataDictionary;
     }
 
-    private initializeData() {
+    private initializeData(columnWidths: number[]) {
         if (!this._data || this._data.length === 0) {
             return;
         }
@@ -60,6 +60,6 @@ export class WorksheetData {
         this._columnCount = this._keys.length;
         this._rowCount = this._data.length + 1;
 
-        this._dataDictionary = new WorksheetDataDictionary(this._columnCount, this.options.columnWidth);
+        this._dataDictionary = new WorksheetDataDictionary(this._columnCount, this.options.columnWidth, columnWidths);
     }
 }

projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts

@@ -69,6 +69,7 @@ export interface IColumnExportingEventArgs extends IBaseEventArgs {
 export abstract class IgxBaseExporter {
     private _columnList: any[];
     private flatRecords = [];
+    private _columnWidthList: number[];
 
     protected _isTreeGrid = false;
     protected _indexOfLastPinnedColumn = -1;
@@ -96,6 +97,10 @@ export abstract class IgxBaseExporter {
      */
     public onColumnExport = new EventEmitter<IColumnExportingEventArgs>();
 
+    public get columnWidthList() {
+        return this._columnWidthList;
+    }
+
     /**
      * Method for exporting IgxGrid component's data.
      * ```typescript
@@ -110,6 +115,7 @@ export abstract class IgxBaseExporter {
 
         const columns = grid.columnList.toArray();
         this._columnList = new Array<any>(columns.length);
+        this._columnWidthList = new Array<any>(columns.length);
 
         const hiddenColumns = [];
         let lastVisbleColumnIndex = -1;
@@ -118,6 +124,7 @@ export abstract class IgxBaseExporter {
             const columnHeader = column.header !== '' ? column.header : column.field;
             const exportColumn = !column.hidden || options.ignoreColumnsVisibility;
             const index = options.ignoreColumnsOrder ? column.index : column.visibleIndex;
+            const columnWidth = Number(column.width.slice(0, -2));
 
             const columnInfo = {
                 header: columnHeader,
@@ -129,6 +136,7 @@ export abstract class IgxBaseExporter {
 
             if (index !== -1) {
                 this._columnList[index] = columnInfo;
+                this._columnWidthList[index] = columnWidth;
                 lastVisbleColumnIndex = Math.max(lastVisbleColumnIndex, index);
             } else {
                 hiddenColumns.push(columnInfo);