Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md
index.html
shim.js
xlsx.full.min.js

README.md

Knockout

The xlsx.core.min.js and xlsx.full.min.js scripts are designed to be dropped into web pages with script tags:

<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:

var aoa = [ [1,2], [3,4] ];

This neatly maps to a table with data-bind="foreach: ...":

<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:

/* 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:

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:

<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

You can’t perform that action at this time.