---
title: Legacy Frameworks
pagination_prev: demos/index
pagination_next: demos/grid/index
sidebar_position: 9
sidebar_custom_props:
skip: 1
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
Over the years, many frameworks have been released. Some were popular years ago
but have waned in recent years. There are still many deployments using these
frameworks and it is oftentimes easier to continue maintenance than to rewrite
using modern web techniques.
SheetJS libraries strive to maintain broad browser and JS engine compatibility.
## Integration
The [SheetJS Standalone scripts](/docs/getting-started/installation/standalone)
can be referenced in a `SCRIPT` tag from an HTML page. For legacy deployments,
the shim script must be loaded first:
{`\
`}
## Internet Explorer
:::warning pass
Internet Explorer is unmaintained and users should consider modern browsers.
The SheetJS testing grid still includes IE and should work.
:::
The modern upload and download strategies are not available in older versions of
IE, but there are approaches using ActiveX or Flash.
Complete Example (click to show)
This demo includes all of the support files for the Flash and ActiveX methods.
1) Download the SheetJS Standalone script and shim script. Move both files to
the project directory:
2) [Download the demo ZIP](pathname:///ie/SheetJSIESupport.zip).
The ZIP includes the demo HTML file as well as the Downloadify support files.
Extract the contents to the same folder as the scripts from step 1
3) Start a HTTP server:
```bash
npx -y http-server .
```
4) Access the `index.html` from a machine with Internet Explorer.
Other Live Demos (click to show)
:::caution pass
The hosted solutions may not work in older versions of Windows. For testing,
demo pages should be downloaded and hosted using a simple HTTP server.
:::
uses XMLHttpRequest to download test
files and convert to CSV
demonstrates reading files with `FileReader`.
Older versions of IE do not support HTML5 File API but do support Base64.
On MacOS you can get the Base64 encoding with:
```bash
$ certutil -encode target_file target_file.b64
```
(note: You have to open the file and remove the header and footer lines)
Full Exposition (click to show)
**State**
Arrays of arrays are the simplest data structure for representing worksheets.
```js
var aoa = [
[1, 2], // A1 = 1, B1 = 2
[3, 4] // A1 = 3, B1 = 4
];
```
`ko.observableArray` should be used to create the view model:
```js
function ViewModel() {
/* use an array of arrays */
this.aoa = ko.observableArray([ [1,2], [3,4] ]);
}
/* create model */
var model = new ViewModel();
ko.applyBindings(model);
```
`XLSX.utils.sheet_to_json` with `header: 1` generates data for the model:
```js
/* starting from a `wb` workbook object, pull first worksheet */
var ws = wb.Sheets[wb.SheetNames[0]];
/* convert the worksheet to an array of arrays */
var aoa = XLSX.utils.sheet_to_json(ws, {header:1});
/* update model */
model.aoa(aoa);
```
`XLSX.utils.aoa_to_sheet` generates worksheets from the model:
```js
var aoa = model.aoa();
var ws = XLSX.utils.aoa_to_sheet(aoa);
```
**Data Binding**
`data-bind="foreach: ..."` provides a simple approach for binding to `TABLE`:
```html
```
Unfortunately the nested `"foreach: $data"` binding is read-only. A two-way
binding is possible using the `$parent` and `$index` binding context properties:
```html
```