yf-yang/sheetjs
1
Fork 0
forked from sheetjs/sheetjs
Code Pull Requests Activity

demos and docs [ci skip]

Browse Source 
- json_to_sheet options (fixes #771 h/t @enniob)
- demos include HTML files (fixes #770 h/t @jwamsley)
This commit is contained in:
SheetJS 2017-08-08 16:31:17 -04:00
parent 54f380ef2c
commit 5855bcb678
11 changed files with 428 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
README.md
View File

@ -668,7 +668,8 @@ Write options are described in the [Writing Options](#writing-options) section.
### Utilities
Utilities are available in the `XLSX.utils` object:
Utilities are available in the `XLSX.utils` object and are described in the
[Utility Functions](#utility-functions) section:
**Importing:**
@ -683,8 +684,6 @@ Utilities are available in the `XLSX.utils` object:
- `sheet_to_html` generates HTML output.
- `sheet_to_formulae` generates a list of the formulae (with value fallbacks).
These utilities are described in [Utility Functions](#utility-functions) below.
**Cell and cell address manipulation:**
@ -693,8 +692,6 @@ These utilities are described in [Utility Functions](#utility-functions) below.
- `{en,de}code_cell` converts cell addresses
- `{en,de}code_range` converts cell ranges
Utilities are described in the [Utility Functions](#utility-functions) section.
## Common Spreadsheet Format
js-xlsx conforms to the Common Spreadsheet Format (CSF):
@ -1610,7 +1607,15 @@ var ws = XLSX.utils.aoa_to_sheet([
### Array of Objects Input
`XLSX.utils.json_to_sheet` takes an array of objects and returns a worksheet
with automatically-generated "headers" based on the keys of the objects.
with automatically-generated "headers" based on the keys of the objects. The
default column order is determined by the first appearance of the field using
`Object.keys`, but can be overridden using the options argument:
| Option Name | Default | Description |
| :---------- | :------: | :-------------------------------------------------- |
| header | | Use specified column order (default `Object.keys`) |
| dateNF | fmt 14 | Use specified date format in string output |
| cellDates | false | Store dates as type `d` (default is `n`) |
<details>
<summary><b>Examples</b> (click to show)</summary>
@ -1622,7 +1627,7 @@ After replacing the second `e` and `S` with `e_1` and `S_1`:
var ws = XLSX.utils.json_to_sheet([
{S:1,h:2,e:3,e_1:4,t:5,J:6,S_1:7},
{S:2,h:3,e:4,e_1:5,t:6,J:7,S_1:8}
]);
], {header:["S","h","e","e_1","t","J","S_1"]});
```
</details>

55
demos/angular/index.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<!-- xlsx.js (C) 2013-present SheetJS http://sheetjs.com -->
<!-- vim: set ts=2: -->
<html ng-app="app">
<head>
<title>SheetJS + Angular 1 + ui-grid</title>
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<!-- ui-grid -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.0/ui-grid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.0/ui-grid.css"></script>
<!-- FileSaver shim for exporting files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<!-- SheetJS js-xlsx library -->
<script src="xlsx.full.min.js"></script>
<!-- SheetJS Service -->
<script src="SheetJS-angular.js"></script>
<style>
.grid1 {
width: 500px;
height: 400px;
};
</style>
</head>
<body>
<pre>
<b><a href="http://sheetjs.com">SheetJS + angular 1 + ui-grid demo</a></b>
The core library can be used as-is in angular 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:
- SheetJSExportService: a service for exporting data from a ui-grid
- SheetJSImportDirective: a directive providing a file input button for import
<a href="https://obamawhitehouse.archives.gov/sites/default/files/omb/budget/fy2014/assets/receipts.xls">Sample Spreadsheet</a>
</pre>
<div ng-controller="MainCtrl">
<input type="file" import-sheet-js="" opts="gridOptions" multiple="false" />
<div id="grid1" ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>

226
demos/rollup/app.js Normal file
View File

@ -0,0 +1,226 @@
/*jshint browser:true */
/*global XLSX */
var X = XLSX;
var rABS = typeof FileReader !== "undefined" && typeof FileReader.prototype !== "undefined" && typeof FileReader.prototype.readAsBinaryString !== "undefined";
if(!rABS) {
document.getElementsByName("userabs")[0].disabled = true;
document.getElementsByName("userabs")[0].checked = false;
}
var use_worker = typeof Worker !== 'undefined';
if(!use_worker) {
document.getElementsByName("useworker")[0].disabled = true;
document.getElementsByName("useworker")[0].checked = false;
}
var transferable = use_worker;
if(!transferable) {
document.getElementsByName("xferable")[0].disabled = true;
document.getElementsByName("xferable")[0].checked = false;
}
var wtf_mode = false;
function fixdata(data) {
var o = "", l = 0, w = 10240;
for(; l<data.byteLength/w; ++l) o+=String.fromCharCode.apply(null,new Uint8Array(data.slice(l*w,l*w+w)));
o+=String.fromCharCode.apply(null, new Uint8Array(data.slice(l*w)));
return o;
}
function ab2str(data) {
var o = "", l = 0, w = 10240;
for(; l<data.byteLength/w; ++l) o+=String.fromCharCode.apply(null,new Uint16Array(data.slice(l*w,l*w+w)));
o+=String.fromCharCode.apply(null, new Uint16Array(data.slice(l*w)));
return o;
}
function s2ab(s) {
var b = new ArrayBuffer(s.length*2), v = new Uint16Array(b);
for (var i=0; i != s.length; ++i) v[i] = s.charCodeAt(i);
return [v, b];
}
function xw_noxfer(data, cb) {
var worker = new Worker(XW.noxfer);
worker.onmessage = function(e) {
switch(e.data.t) {
case 'ready': break;
case 'e': console.error(e.data.d); break;
case XW.msg: cb(JSON.parse(e.data.d)); break;
}
};
var arr = rABS ? data : btoa(fixdata(data));
worker.postMessage({d:arr,b:rABS});
}
function xw_xfer(data, cb) {
var worker = new Worker(rABS ? XW.rABS : XW.norABS);
worker.onmessage = function(e) {
switch(e.data.t) {
case 'ready': break;
case 'e': console.error(e.data.d); break;
default: xx=ab2str(e.data).replace(/\n/g,"\\n").replace(/\r/g,"\\r"); console.log("done"); cb(JSON.parse(xx)); break;
}
};
if(rABS) {
var val = s2ab(data);
worker.postMessage(val[1], [val[1]]);
} else {
worker.postMessage(data, [data]);
}
}
function xw(data, cb) {
transferable = document.getElementsByName("xferable")[0].checked;
if(transferable) xw_xfer(data, cb);
else xw_noxfer(data, cb);
}
function get_radio_value( radioName ) {
var radios = document.getElementsByName( radioName );
for( var i = 0; i < radios.length; i++ ) {
if( radios[i].checked || radios.length === 1 ) {
return radios[i].value;
}
}
}
function to_json(workbook) {
var result = {};
workbook.SheetNames.forEach(function(sheetName) {
var roa = X.utils.sheet_to_json(workbook.Sheets[sheetName]);
if(roa.length > 0){
result[sheetName] = roa;
}
});
return result;
}
function to_csv(workbook) {
var result = [];
workbook.SheetNames.forEach(function(sheetName) {
var csv = X.utils.sheet_to_csv(workbook.Sheets[sheetName]);
if(csv.length > 0){
result.push("SHEET: " + sheetName);
result.push("");
result.push(csv);
}
});
return result.join("\n");
}
function to_formulae(workbook) {
var result = [];
workbook.SheetNames.forEach(function(sheetName) {
var formulae = X.utils.get_formulae(workbook.Sheets[sheetName]);
if(formulae.length > 0){
result.push("SHEET: " + sheetName);
result.push("");
result.push(formulae.join("\n"));
}
});
return result.join("\n");
}
var tarea = document.getElementById('b64data');
function b64it() {
if(typeof console !== 'undefined') console.log("onload", new Date());
var wb = X.read(tarea.value, {type: 'base64',WTF:wtf_mode});
process_wb(wb);
}
function process_wb(wb) {
var output = "";
switch(get_radio_value("format")) {
case "json":
output = JSON.stringify(to_json(wb), 2, 2);
break;
case "form":
output = to_formulae(wb);
break;
default:
output = to_csv(wb);
}
if(out.innerText === undefined) out.textContent = output;
else out.innerText = output;
if(typeof console !== 'undefined') console.log("output", new Date());
}
var drop = document.getElementById('drop');
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
rABS = document.getElementsByName("userabs")[0].checked;
use_worker = document.getElementsByName("useworker")[0].checked;
var files = e.dataTransfer.files;
var f = files[0];
{
var reader = new FileReader();
var name = f.name;
reader.onload = function(e) {
if(typeof console !== 'undefined') console.log("onload", new Date(), rABS, use_worker);
var data = e.target.result;
if(use_worker) {
xw(data, process_wb);
} else {
var wb;
if(rABS) {
wb = X.read(data, {type: 'binary'});
} else {
var arr = fixdata(data);
wb = X.read(btoa(arr), {type: 'base64'});
}
process_wb(wb);
}
};
if(rABS) reader.readAsBinaryString(f);
else reader.readAsArrayBuffer(f);
}
}
function handleDragover(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
}
if(drop.addEventListener) {
drop.addEventListener('dragenter', handleDragover, false);
drop.addEventListener('dragover', handleDragover, false);
drop.addEventListener('drop', handleDrop, false);
}
var xlf = document.getElementById('xlf');
function handleFile(e) {
rABS = document.getElementsByName("userabs")[0].checked;
use_worker = document.getElementsByName("useworker")[0].checked;
var files = e.target.files;
var f = files[0];
{
var reader = new FileReader();
var name = f.name;
reader.onload = function(e) {
if(typeof console !== 'undefined') console.log("onload", new Date(), rABS, use_worker);
var data = e.target.result;
if(use_worker) {
xw(data, process_wb);
} else {
var wb;
if(rABS) {
wb = X.read(data, {type: 'binary'});
} else {
var arr = fixdata(data);
wb = X.read(btoa(arr), {type: 'base64'});
}
process_wb(wb);
}
};
if(rABS) reader.readAsBinaryString(f);
else reader.readAsArrayBuffer(f);
}
}
if(xlf.addEventListener) xlf.addEventListener('change', handleFile, false);

0
demos/systemjs/app.js → demos/systemjs/app.node.js
View File

2
demos/systemjs/systemjsnode.js
View File

@ -15,4 +15,4 @@ SystemJS.config({
'stream': '@node/stream'
}
});
SystemJS.import('./app.js');
SystemJS.import('./app.node.js');

1
demos/webpack/app.js
View File

@ -224,4 +224,3 @@ function handleFile(e) {
}
if(xlf.addEventListener) xlf.addEventListener('change', handleFile, false);

55
demos/webpack/core.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<!-- xlsx.js (C) 2013-present SheetJS http://sheetjs.com -->
<!-- vim: set ts=2: -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JS-XLSX Live Demo</title>
<style>
#drop{
border:2px dashed #bbb;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
padding:25px;
text-align:center;
font:20pt bold,"Vollkorn";color:#bbb
}
#b64data{
width:100%;
}
</style>
</head>
<body>
<b>JS-XLSX Live Demo</b><br />
Output Format:
<select name="format">
<option value="csv" selected> CSV</option>
<option value="json"> JSON</option>
<option value="form"> FORMULAE</option>
</select><br />
<div id="drop">Drop a spreadsheet file here to see sheet data</div>
<p><input type="file" name="xlfile" id="xlf" /> ... or click here to select a file</p>
<textarea id="b64data">... or paste a base64-encoding here</textarea>
<input type="button" id="dotext" value="Click here to process the base64 text" onclick="b64it();"/><br />
Advanced Demo Options: <br />
Use Web Workers: (when available) <input type="checkbox" name="useworker" checked><br />
Use Transferrables: (when available) <input type="checkbox" name="xferable" checked><br />
Use readAsBinaryString: (when available) <input type="checkbox" name="userabs" checked><br />
<pre id="out"></pre>
<br />
<script src="core.out.js"></script>
<script>
var XW = {
/* worker message */
msg: 'xlsx',
/* worker scripts */
rABS: './coreworker2.js',
norABS: './coreworker1.js',
noxfer: './coreworker.js'
};
</script>
<script src="app.js"></script>
</body>
</html>

55
demos/webpack/full.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<!-- xlsx.js (C) 2013-present SheetJS http://sheetjs.com -->
<!-- vim: set ts=2: -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JS-XLSX Live Demo</title>
<style>
#drop{
border:2px dashed #bbb;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
padding:25px;
text-align:center;
font:20pt bold,"Vollkorn";color:#bbb
}
#b64data{
width:100%;
}
</style>
</head>
<body>
<b>JS-XLSX Live Demo</b><br />
Output Format:
<select name="format">
<option value="csv" selected> CSV</option>
<option value="json"> JSON</option>
<option value="form"> FORMULAE</option>
</select><br />
<div id="drop">Drop a spreadsheet file here to see sheet data</div>
<p><input type="file" name="xlfile" id="xlf" /> ... or click here to select a file</p>
<textarea id="b64data">... or paste a base64-encoding here</textarea>
<input type="button" id="dotext" value="Click here to process the base64 text" onclick="b64it();"/><br />
Advanced Demo Options: <br />
Use Web Workers: (when available) <input type="checkbox" name="useworker" checked><br />
Use Transferrables: (when available) <input type="checkbox" name="xferable" checked><br />
Use readAsBinaryString: (when available) <input type="checkbox" name="userabs" checked><br />
<pre id="out"></pre>
<br />
<script src="full.out.js"></script>
<script>
var XW = {
/* worker message */
msg: 'xlsx',
/* worker scripts */
rABS: './fullworker2.js',
norABS: './fullworker1.js',
noxfer: './fullworker.js'
};
</script>
<script src="app.js"></script>
</body>
</html>

7
docbits/40_interface.md
View File

@ -29,7 +29,8 @@ Write options are described in the [Writing Options](#writing-options) section.
### Utilities
Utilities are available in the `XLSX.utils` object:
Utilities are available in the `XLSX.utils` object and are described in the
[Utility Functions](#utility-functions) section:
**Importing:**
@ -44,8 +45,6 @@ Utilities are available in the `XLSX.utils` object:
- `sheet_to_html` generates HTML output.
- `sheet_to_formulae` generates a list of the formulae (with value fallbacks).
These utilities are described in [Utility Functions](#utility-functions) below.
**Cell and cell address manipulation:**
@ -54,5 +53,3 @@ These utilities are described in [Utility Functions](#utility-functions) below.
- `{en,de}code_cell` converts cell addresses
- `{en,de}code_range` converts cell ranges
Utilities are described in the [Utility Functions](#utility-functions) section.

12
docbits/82_util.md
View File

@ -45,7 +45,15 @@ var ws = XLSX.utils.aoa_to_sheet([
### Array of Objects Input
`XLSX.utils.json_to_sheet` takes an array of objects and returns a worksheet
with automatically-generated "headers" based on the keys of the objects.
with automatically-generated "headers" based on the keys of the objects. The
default column order is determined by the first appearance of the field using
`Object.keys`, but can be overridden using the options argument:
| Option Name | Default | Description |
| :---------- | :------: | :-------------------------------------------------- |
| header | | Use specified column order (default `Object.keys`) |
| dateNF | fmt 14 | Use specified date format in string output |
| cellDates | false | Store dates as type `d` (default is `n`) |
<details>
<summary><b>Examples</b> (click to show)</summary>
@ -57,7 +65,7 @@ After replacing the second `e` and `S` with `e_1` and `S_1`:
var ws = XLSX.utils.json_to_sheet([
{S:1,h:2,e:3,e_1:4,t:5,J:6,S_1:7},
{S:2,h:3,e:4,e_1:5,t:6,J:7,S_1:8}
]);
], {header:["S","h","e","e_1","t","J","S_1"]});
```
</details>

19
misc/docs/README.md
View File

@ -614,7 +614,8 @@ Write options are described in the [Writing Options](#writing-options) section.
### Utilities
Utilities are available in the `XLSX.utils` object:
Utilities are available in the `XLSX.utils` object and are described in the
[Utility Functions](#utility-functions) section:
**Importing:**
@ -629,8 +630,6 @@ Utilities are available in the `XLSX.utils` object:
- `sheet_to_html` generates HTML output.
- `sheet_to_formulae` generates a list of the formulae (with value fallbacks).
These utilities are described in [Utility Functions](#utility-functions) below.
**Cell and cell address manipulation:**
@ -639,8 +638,6 @@ These utilities are described in [Utility Functions](#utility-functions) below.
- `{en,de}code_cell` converts cell addresses
- `{en,de}code_range` converts cell ranges
Utilities are described in the [Utility Functions](#utility-functions) section.
## Common Spreadsheet Format
js-xlsx conforms to the Common Spreadsheet Format (CSF):
@ -1490,7 +1487,15 @@ var ws = XLSX.utils.aoa_to_sheet([
### Array of Objects Input
`XLSX.utils.json_to_sheet` takes an array of objects and returns a worksheet
with automatically-generated "headers" based on the keys of the objects.
with automatically-generated "headers" based on the keys of the objects. The
default column order is determined by the first appearance of the field using
`Object.keys`, but can be overridden using the options argument:
| Option Name | Default | Description |
| :---------- | :------: | :-------------------------------------------------- |
| header | | Use specified column order (default `Object.keys`) |
| dateNF | fmt 14 | Use specified date format in string output |
| cellDates | false | Store dates as type `d` (default is `n`) |
The original sheet cannot be reproduced because JS object keys must be unique.
@ -1500,7 +1505,7 @@ After replacing the second `e` and `S` with `e_1` and `S_1`:
var ws = XLSX.utils.json_to_sheet([
{S:1,h:2,e:3,e_1:4,t:5,J:6,S_1:7},
{S:2,h:3,e:4,e_1:5,t:6,J:7,S_1:8}
]);
], {header:["S","h","e","e_1","t","J","S_1"]});
```
### HTML Table Input