jquery grid supports import and export of Excel workbook.

While import and export, javascript workbook is created as shown in the diagrams below:

Excel xlsx pq.excel.importXl js workbook grid.importWb grid grid grid.exportData js workbook pq.excel.exportWb Excel xlsx

These are the apparent benefits of javascript workbook

  1. It's a javascript object which can be manipulated on the fly with familiar array, object, string manipulation techniques in javascript.
  2. Its high level abstract structure saves the trouble of understanding the low level structural details of Excel xlsx file.
  3. It can be persisted in and read from remote storage as such by serializing to json string.
  4. Not only ParamQuery grid, but third party javascript components can also use javascript workbook to import and export Excel xlsx file.


Following is the schema / structure of javascript workbook expressed in javascript / typescript.

interface workbook{
    activeId?: number //0 based index of active sheet.
    //sheets represents the worksheets in a workbook.
    sheets: {
        name?: string
        columns?: worksheetColumn[]
        frozenRows?: number
        frozenCols?: number
        /**number of header rows in rows. */
        headerRows?: number
        hidden?: boolean
        mergeCells?: string[]
        /**pictures in a worksheet*/
        pics?: Pic[] 
        rows: worksheetRow[]
    }[]
}

interface wsStyle{
    /**left, center, right */
    align?: string
    /**background color with hexadecimal 6 digit format i.e., ff0000 for red */
    bgColor?: string
    bold?: boolean
    //v7.0.0
    border?: {
        /**same as css style e.g., "1px solid #ff0000" */
        left?: string 
        right?: string
        top?: string
        bottom?: string
    }
    /**text color with hexadecimal 6 digit format i.e., ff0000 for red */
    color?: string
    //v7.0.0
    comment?: string
    italic?: boolean
    /**font family */
    font?: string
    fontSize?: number
    underline?: boolean
    /** top, center, bottom  */
    valign?: string 
    wrap?: boolean
}

interface worksheetCell extends wsStyle{
    /**dataIndx of cell while export of grid */
    dataIndx?: string | number
    /**Excel format string for numbers, dates */
    format?: string
    /**formula without leading = sign */
    formula?: string
    /**Zero based index of cell*/
    indx?: number
    /**v9.0.0 external url */
    link?: string 
    value?: any
}

//worksheetColumn extends wsStyle since v7.0.0
interface worksheetColumn extends wsStyle{
    hidden?: boolean
    width?: number
    /**Zero based index of column*/
    indx?: number
}

//worksheetRow extends wsStyle since v7.0.0
interface worksheetRow extends wsStyle{
    /**Zero based index of row*/
    indx?: number
    cells: worksheetCell[]
    hidden?: boolean
    htFix?: number //fixed row height.
}

interface Pic{
    name?: string
    src: string  //base64 string
    from: [ci: number, ciOffset: number, ri: number, riOffset: number]
    to?: [ci: number, ciOffset: number, ri: number, riOffset: number]
    cx?: number //width
    cy?: number //height
}