Available only in PRO Edition

Excel Viewer

ExcelViewer is an extension tool intended for viewing Excel files.

Related sample:  Excel Viewer

The constructor of the viewer is the following:

{ 
    view:"excelviewer", 
    toolbar:"toolbar", 
    excelHeader:true, 
    url:"binary->files/data.xlsx"
}

The configuration properties are:

  • toolbar - (string) the id of the related excel toolbar, if used;
  • excelHeader - (boolean) true to use the first row of the Excel table as a column header;
  • url - (string) the url of the excel file that should be displayed.

Binary proxy is used for loading the file, which allows to get its contents as ArrayBuffer.

The default datatype for Excel Viewer is excel. It is strongly recommended not to change it manually to avoid parsing inconsistency.

Excel Viewer API

load()

loads an excel file to the viewer

parameters:

  • file - (string) the name of the file to load
  • datatype - (string) data type (should be "excel" here)
$$("viewer").load("binary->data.xlsx", "excel");

parse()

parses file data to the viewer

parameters:

  • file - (object) uploaded file object
  • datatype - (string) data type (should be "excel" here)
 { view:"uploader", value:"Select Excel File", width:200,
    on:{
      onBeforeFileAdd:function(upload){
         $$("excel").clearAll();
         $$("excel").parse(upload.file, "excel");
           return false;
      }
    }
}

Related sample:  Excel file Uploading and Downloading

showSheet()

switches to the specified sheet

parameters:

  • name - (string) the name of the sheet
$$("viewer").showSheet("Data");

Excel toolbar and its API

It's possible to show a toolbar with tabs that correspond to the Excel sheets. In order to render such a toolbar, the dedicated excelbar view should be initialized.

{ 
    view:"excelbar", 
    id:"toolbar" 
}
  • id (string) - the id of the Excel toolbar.

Excel toolbar API

getInput()

returns the toolbar object

$$("toolbar").getInput();

returns:

  • toolbar - (object) the toolbar object

getValue()

returns the currently selected tab

$$("toolbar").getValue();

returns:

  • tab - (string) the name of the selected tab

setSheets()

sets tabs in the toolbar (should correspond to excel sheets)

parameters:

  • sheets - (array) an array of tabs
$$("toolbar").setSheets(["Data", "Files"]);

setValue()

sets the selected tab within a toolbar

parameters:

  • value - (string) the name of the tab to select
$$("toolbar").setValue(value);

Loading data to Excel Viewer

There are three possible ways of loading data to Excel viewer:

  • specifying the needed file directly in the viewer constructor by using the url parameter:
{
    view:"excelviewer", 
    url:"binary->files/data.xlsx"
}
  • calling the load method with the file name as a parameter
{ view:"excelviewer", id:"excel", editable:true, header:false },
...
$$("excel").load("binary->files/data.xlsx", "excel");

Related sample:  Excel Viewer

Binary proxy is used for loading the file, which allows to get its contents as ArrayBuffer. The datatype is "excel".

  • parsing uploaded file data with the help of parse method
 { view:"uploader", value:"Select Excel File", width:200,
    on:{
      onBeforeFileAdd:function(upload){
         $$("excel").clearAll();
         $$("excel").parse(upload.file, "excel");
           return false;
      }
    }
}

Related sample:  Excel file Uploading and Downloading

Customizing the loaded data

You can customize the presentation of the loaded data, such as displaying headers and controlling the number of the loaded rows.

{
    view:"excelviewer", 
    url:"binary->files/data.xlsx@Data[1-10]"
}

The string value of the url property binary->files/data.xlsx@Data[1-10]" includes the following parts:

  • binary - the name of the proxy object
  • files/data.xlsx - path to the Excel file
  • @ - optional, the delimiter that detaches the link from its parameters (can be omitted together with parameters)
  • Data - optional, the name of the Excel sheet to render
  • [1-10] - optional, the rows that should be rendered in the viewer

Related sample:  Excel Proxy

Back to top