This commit is contained in:
SheetJS 2022-07-26 15:24:43 -04:00
parent 87ac5667c0
commit 260bb7014e
4 changed files with 206 additions and 3 deletions

@ -205,7 +205,7 @@ $ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
```js title="esbrowser.js"
// highlight-next-line
import { set_fs, utils, version, writeFileXLSX } from 'xlsx/xlsx.mjs';
import { utils, version, writeFileXLSX } from 'xlsx/xlsx.mjs';
(async() => {
/* fetch JSON data and parse */
@ -461,7 +461,7 @@ $ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
```js title="index.js"
// highlight-next-line
import { set_fs, utils, version, writeFileXLSX } from 'xlsx/xlsx.mjs';
import { utils, version, writeFileXLSX } from 'xlsx/xlsx.mjs';
document.getElementById("xport").addEventListener("click", async() => {
/* fetch JSON data and parse */

@ -0,0 +1,94 @@
---
sidebar_position: 12
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 esasier to continue maintenance than to rewrite
using modern web techniques.
SheetJS libraries strive to maintain broad browser and JS engine compatibility.
## Integration
The ["Standalone Browser Scripts"](../../installation/standalone) section has
instructions for obtaining or referencing the standalone scripts. These are
designed to be referenced with `<script>` tags.
## Frameworks
### KnockoutJS
[KnockoutJS](https://en.wikipedia.org/wiki/Knockout_(web_framework)) 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.
#### 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
<table data-bind="foreach: aoa">
<tr data-bind="foreach: $data">
<td><span data-bind="text: $data"></span></td>
</tr>
</table>
```
Unfortunately the nested `"foreach: $data"` binding is read-only. A two-way
binding is possible using the `$parent` and `$index` binding context properties:
```html
<table data-bind="foreach: aoa">
<tr data-bind="foreach: $data">
<td><input data-bind="value: $parent[$index()]" /></td>
</tr>
</table>
```

@ -20,7 +20,7 @@ The demo projects include small runnable examples and short explainers.
- [`Angular.JS`](https://github.com/SheetJS/SheetJS/tree/master/demos/angular/)
- [`Angular 2+ and Ionic`](https://github.com/SheetJS/SheetJS/tree/master/demos/angular2/)
- [`Knockout`](https://github.com/SheetJS/SheetJS/tree/master/demos/knockout/)
- [`Knockout`](./legacy#knockout)
- [`Meteor`](https://github.com/SheetJS/SheetJS/tree/master/demos/meteor/)
- [`React, React Native and NextJS`](https://github.com/SheetJS/SheetJS/tree/master/demos/react/)
- [`VueJS, WeeX, and NuxtJS`](https://github.com/SheetJS/SheetJS/tree/master/demos/vue/)

@ -0,0 +1,109 @@
<!DOCTYPE html>
<!-- xlsx.js (C) 2013-present SheetJS http://sheetjs.com -->
<!-- vim: set ts=2: -->
<html ng-app="sjs">
<head>
<title>SheetJS + KnockoutJS</title>
<!-- KnockoutJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!-- SheetJS js-xlsx library -->
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/shim.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
</head>
<body>
<pre>
<b><a href="https://sheetjs.com">SheetJS + KnockoutJS demo</a></b>
The core library can be used as-is in KnockoutJS applications.
The <a href="https://docs.sheetjs.com">Community Edition README</a> details some common use cases.
We also have some <a href="https://docs.sheetjs.com/docs/getting-started/demos/">more public demos</a>
This demo shows:
- view model backed by an array of arrays
- file import that refreshes the model
- table of editable `input` elements that are bound to the model
- file export based on the model
<a href="https://sheetjs.com/pres.xlsx">Sample Spreadsheet</a>
</pre>
<input name="xlfile" id="xlf" class="left" style="width: 200px;" type="file">
<table data-bind="foreach: aoa">
<tr data-bind="foreach: $data">
<td><input data-bind="value: $parent[$index()]"/></td>
</tr>
</table>
<script id='aoa' type="text/html"></script>
<button id="export">Export Sheet to XLSX</button>
</div>
<script>
/* knockout setup */
function ViewModel() {
/* use an array of arrays */
this.aoa = ko.observableArray([
[1,2],
[3,4]
]);
}
var model = new ViewModel();
ko.applyBindings(model);
/* do an update to confirm KO was loaded properly */
model.aoa([[1,2,3],[4,5,6]]);
model.aoa.push([7,8,9]);
/* set up file input handler */
(function() {
var input_dom_element = document.getElementById('xlf');
function handleFile(e) {
var files = e.target.files, f = files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
data = new Uint8Array(data);
var workbook = XLSX.read(data, {type: 'array'});
process_wb(workbook);
};
reader.readAsArrayBuffer(f);
}
input_dom_element.addEventListener('change', handleFile, false);
})();
/* update model */
function process_wb(wb) {
/* pull first worksheet */
var ws = wb.Sheets[wb.SheetNames[0]];
/* convert to AOA */
var aoa = XLSX.utils.sheet_to_json(ws, {header:1});
/* update model */
model.aoa(aoa);
}
document.getElementById("export").onclick = function() {
/* get array of arrays */
var data = model.aoa();
/* convert to worksheet */
var ws = XLSX.utils.aoa_to_sheet(data);
/* build new workbook */
var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
/* write file */
XLSX.writeFile(wb, "SheetJSKnockoutDemo.xlsx")
};
</script>
<script type="text/javascript">
/* eslint no-use-before-define:0 */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36810333-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>