sheetjs
/
sheetjs
25
Fork 25
Code Issues 174 Pull Requests 12 Wiki Activity

Knockout Demo [ci skip] fixes #1061

This commit is contained in:
notchris 2018-05-20 21:41:01 -04:00
parent 233102d172
commit d102b75cad
10 changed files with 203 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -6,7 +6,7 @@ Emphasis on parsing and writing robustness, cross-format feature compatibility
with a unified JS representation, and ES3/ES5 browser compatibility back to IE6.
This is the community version. We also offer a pro version with performance
enhancements, additional features by request, and dedicated support.
enhancements, additional features like styling, and dedicated support.
[**Pro Version**](http://sheetjs.com/pro)
@ -191,7 +191,8 @@ The [`demos` directory](demos/) includes sample projects for:
**Frameworks and APIs**
- [`angularjs`](demos/angular/)
- [`angular 2 / 4 / 5 and ionic`](demos/angular2/)
- [`angular 2 / 4 / 5 / 6 and ionic`](demos/angular2/)
- [`knockout`](demos/knockout/)
- [`meteor`](demos/meteor/)
- [`react and react-native`](demos/react/)
- [`vue 2.x and weex`](demos/vue/)
@ -303,6 +304,10 @@ space and open much faster! Even though an XLSX writer is available, other
format writers are available so users can take advantage of the unique
characteristics of each format.
The primary focus of the Community Edition is correct data interchange, focused
on extracting data from any compatible data representation and exporting data in
various formats suitable for any third party interface.
</details>
## Parsing Workbooks

3
demos/README.md
View File

@ -19,7 +19,8 @@ can be installed with Bash on Windows or with `cygwin`.
**Frameworks and APIs**
- [`angularjs`](angular/)
- [`angular 2 / 4 / 5 and ionic`](angular2/)
- [`angular 2 / 4 / 5 / 6 and ionic`](angular2/)
- [`knockout`](knockout/)
- [`meteor`](meteor/)
- [`react and react-native`](react/)
- [`vue 2.x and weex`](vue/)

68
demos/knockout/README.md Normal file
View File

@ -0,0 +1,68 @@
# Knockout
The `xlsx.core.min.js` and `xlsx.full.min.js` scripts are designed to be dropped
into web pages with script tags:
```html
<script src="xlsx.full.min.js"></script>
```
Strictly speaking, there should be no need for a Knockout demo! You can proceed
as you would with any other browser-friendly library.
## Array of Arrays
A common data table is often stored as an array of arrays:
```js
var aoa = [ [1,2], [3,4] ];
```
This neatly maps to a table with `data-bind="foreach: ..."`:
```html
<table data-bind="foreach: aoa">
<tr data-bind="foreach: $data">
<td><span data-bind="text: $data"></span></td>
</tr>
</table>
```
The `sheet_to_json` utility function can generate array of arrays for model use:
```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);
```
## Demo
The easiest observable representation is an `observableArray`:
```js
var ViewModel = function() { this.aoa = ko.observableArray([[1,2],[3,4]]); };
var model = new ViewModel();
ko.applyBindings(model);
```
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>
```
The demo shows reading worksheets into a view model and writing models to XLSX.
[![Analytics](https://ga-beacon.appspot.com/UA-36810333-1/SheetJS/js-xlsx?pixel)](https://github.com/SheetJS/js-xlsx)

110
demos/knockout/index.html Normal file
View File

@ -0,0 +1,110 @@
<!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="shim.js"></script>
<script src="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://github.com/sheetjs/js-xlsx">Community Edition README</a> details some common use cases.
We also have some <a href="http://sheetjs.com/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 */
var ViewModel = function() {
/* 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');
var rABS = true; // true: readAsBinaryString ; false: readAsArrayBuffer
function handleFile(e) {
var files = e.target.files, f = files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
if(!rABS) data = new Uint8Array(data);
var workbook = XLSX.read(data, {type: rABS ? 'binary' : 'array'});
process_wb(workbook);
};
if(rABS) reader.readAsBinaryString(f); else 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, "knockout.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>

1
demos/knockout/shim.js Symbolic link
View File

@ -0,0 +1 @@
../../shim.js

1
demos/knockout/xlsx.full.min.js vendored Symbolic link
View File

@ -0,0 +1 @@
../../dist/xlsx.full.min.js

2
docbits/00_intro.md
View File

@ -6,7 +6,7 @@ Emphasis on parsing and writing robustness, cross-format feature compatibility
with a unified JS representation, and ES3/ES5 browser compatibility back to IE6.
This is the community version. We also offer a pro version with performance
enhancements, additional features by request, and dedicated support.
enhancements, additional features like styling, and dedicated support.
[**Pro Version**](http://sheetjs.com/pro)

3
docbits/11_demos.md
View File

@ -4,7 +4,8 @@ The [`demos` directory](demos/) includes sample projects for:
**Frameworks and APIs**
- [`angularjs`](demos/angular/)
- [`angular 2 / 4 / 5 and ionic`](demos/angular2/)
- [`angular 2 / 4 / 5 / 6 and ionic`](demos/angular2/)
- [`knockout`](demos/knockout/)
- [`meteor`](demos/meteor/)
- [`react and react-native`](demos/react/)
- [`vue 2.x and weex`](demos/vue/)

4
docbits/15_phil.md
View File

@ -31,5 +31,9 @@ space and open much faster! Even though an XLSX writer is available, other
format writers are available so users can take advantage of the unique
characteristics of each format.
The primary focus of the Community Edition is correct data interchange, focused
on extracting data from any compatible data representation and exporting data in
various formats suitable for any third party interface.
</details>

9
misc/docs/README.md
View File

@ -6,7 +6,7 @@ Emphasis on parsing and writing robustness, cross-format feature compatibility
with a unified JS representation, and ES3/ES5 browser compatibility back to IE6.
This is the community version. We also offer a pro version with performance
enhancements, additional features by request, and dedicated support.
enhancements, additional features like styling, and dedicated support.
[**Pro Version**](http://sheetjs.com/pro)
@ -182,7 +182,8 @@ The [`demos` directory](demos/) includes sample projects for:
**Frameworks and APIs**
- [`angularjs`](demos/angular/)
- [`angular 2 / 4 / 5 and ionic`](demos/angular2/)
- [`angular 2 / 4 / 5 / 6 and ionic`](demos/angular2/)
- [`knockout`](demos/knockout/)
- [`meteor`](demos/meteor/)
- [`react and react-native`](demos/react/)
- [`vue 2.x and weex`](demos/vue/)
@ -289,6 +290,10 @@ space and open much faster! Even though an XLSX writer is available, other
format writers are available so users can take advantage of the unique
characteristics of each format.
The primary focus of the Community Edition is correct data interchange, focused
on extracting data from any compatible data representation and exporting data in
various formats suitable for any third party interface.
## Parsing Workbooks