Exporting Data

In UI Editor, you can export your data by using two Quick methods: Download and XLSX Export.

How to Download?

To download any file, the file needs to have a base64 type string value. The download process can be started by giving this variable and the file name as a parameter to the Quick.download method to be downloaded.

quick.Quick.download({data: base64, name: string})

Example file: Download

How to Export To XLSX?

You can use Quick.exportToXlsx method to export your specific data to Excel file.

To create a single sheet:

quick.Quick.exportToXlsx({fileName: string, items: Array, headers: Array, sheetName?: string})

To create multiple sheets:

quick.Quick.exportToXlsx({ fileName: string, sheetList: Array<{items: Array, headers: Array, sheetName?: string}> })

Params

• fileName: string -> Name for the file without extension.
• sheetList: Array<IExcelSheet> -> Array of sheet's info. Used to create multiple sheets in Excel.

[{ headers: Array<object> | Array<IExcelHeader>, items: Array<object>, sheetName?: string }] 

• items: Array<object> -> Array of items to export
• headers: Array<object> | Array<IExcelHeader> -> Array of headers for cell header. The array of instances have to contains value, text and optional cellOptions props like Examples of headers usage are found below:

[{value='fat', text='Fat (g)'}]" 

[{ text: "Tutar", value: "amount", cellOptions: 
 { type: ExcelCellType.number, numberFormat: "##,#0.00" } }]

• sheetName?: string --> Name of the inserted worksheet. If not, it is called Sheet1 by default.

  IExcelHeader {
     text: string,
     value:string,
     cellOptions?:IExcelCellOptions
  }
  
  IExcelCellOptions {
     type: ExcelCellType, 
     numberFormat?:string,
  }
  
  enum ExcelCellType {
     boolean = "b",
     number = "n",
     date = "d",
     text = "s",
  }

How to Create Single Sheet?

quick.Quick.exportToXlsx({fileName: string, items: Array, headers: Array, sheetName?: string})

 quick.Quick.exportToXlsx({fileName:'test', items:dataTable.items, headers:dataTable.headers, sheetName:'myPage'})

You can use the following usage instead of the one above.

let headers = [{value:'name', text:'Name'}, {value:'fat', text:'Fat (g)'}]
quick.Quick.exportToXlsx({fileName:'test', items: component.datatable.items, headers:headers, sheetName:'myPage'})

An example of exporting object child member variables to Excel is available below.

let items: object[] = [
 { fat: { a1: { a: "aa1" } }, bat: "b1" },
 { fat: { a1: { a: "aa1" } }, bat: "b1" },
 { fat: { a1: { a: "aa1" } }, bat: "b1" },
 { fat: { a1: { a: "aa1" } }, bat: "b1" }
]
let headers: object[] = [{ value: 'fat.a1.a', text: 'Fat (g)' }, { value: 'bat', text: 'bat (g)' }];

quick.Quick.exportToXlsx({ fileName: "deneme", items, headers });

How to Create Multiple Sheets?

quick.Quick.exportToXlsx({ fileName: string, sheetList: [{ items: Array, headers: Array, sheetName?: string}] })

quick.Quick.exportToXlsx({
    fileName: "MyTable",
    sheetList: [
        { headers: components.myTable1.headers, items: components.myTable1.items, sheetName: "MySheet1" },
        { headers: components.myTable2.headers, items: components.myTable2.items, sheetName: "MySheet2" }
    ]
});

How to format information for amount fields?

Format information for amount fields is added to the exportToXlsx() method.

let listItems = [
    {
        amount: 0,
    },
    {
        amount: 730.00,
    },
    {
        amount: 22819.80,
    }
];

let headersItems: IExcelHeader[] = [
    { text: "Tutar", value: "amount", cellOptions: { type: ExcelCellType.number, numberFormat: "##,#0.00" } },
];

quick.Quick.exportToXlsx({ fileName: "mySampleExcel", items: listItems, headers: headersItems });

Example Usage

exportToXlsx