--- title: Legacy Frameworks --- import current from '/version.js'; 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 ["Standalone Browser Scripts"](/docs/getting-started/installation/standalone) section has instructions for obtaining or referencing the standalone scripts. These are designed to be referenced with ` ``` The ["Dojo" section in "Bundlers"](/docs/demos/bundler#dojo) includes a complete example mirroring the [official example](/docs/getting-started/example)
Details (click to show) _Reading Data_ When fetching spreadsheets with XHR, `handleAs: "arraybuffer"` yields an `ArrayBuffer` which can be passed to `XLSX.read`: ```html
``` :::note The `X-Requested-With` header setting resolves some issues related to CORS. ::: _Writing Data_ `XLSX.writeFile` works as expected: ```html ```
### KnockoutJS KnockoutJS was a popular MVVM framework. The [Live demo](pathname:///knockout/knockout.html) shows a view model that is updated with file data and exported to spreadsheets.
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
```