From 5855bcb67854920b0fd074d3e30570b2f777ef65 Mon Sep 17 00:00:00 2001 From: SheetJS Date: Tue, 8 Aug 2017 16:31:17 -0400 Subject: [PATCH] demos and docs [ci skip] - json_to_sheet options (fixes #771 h/t @enniob) - demos include HTML files (fixes #770 h/t @jwamsley) --- README.md | 19 ++- demos/angular/index.html | 55 ++++++ demos/rollup/app.js | 226 +++++++++++++++++++++++++ demos/systemjs/{app.js => app.node.js} | 0 demos/systemjs/systemjsnode.js | 2 +- demos/webpack/app.js | 1 - demos/webpack/core.html | 55 ++++++ demos/webpack/full.html | 55 ++++++ docbits/40_interface.md | 7 +- docbits/82_util.md | 12 +- misc/docs/README.md | 19 ++- 11 files changed, 428 insertions(+), 23 deletions(-) create mode 100644 demos/angular/index.html create mode 100644 demos/rollup/app.js rename demos/systemjs/{app.js => app.node.js} (100%) create mode 100644 demos/webpack/core.html create mode 100644 demos/webpack/full.html diff --git a/README.md b/README.md index 5669232..2cf9eb6 100644 --- a/README.md +++ b/README.md @@ -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`) |
Examples (click to show) @@ -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"]}); ```
diff --git a/demos/angular/index.html b/demos/angular/index.html new file mode 100644 index 0000000..07f34cb --- /dev/null +++ b/demos/angular/index.html @@ -0,0 +1,55 @@ + + + + + + SheetJS + Angular 1 + ui-grid + + + + + + + + + + + + + + + + + + + + + +
+SheetJS + angular 1 + ui-grid demo
+
+The core library can be used as-is in angular applications.
+The Community Edition README details some common use cases.
+We also have some more public demos
+
+This demo shows:
+- SheetJSExportService: a service for exporting data from a ui-grid
+- SheetJSImportDirective: a directive providing a file input button for import
+
+Sample Spreadsheet
+
+ +
+ +
+
+ + + + + diff --git a/demos/rollup/app.js b/demos/rollup/app.js new file mode 100644 index 0000000..e0c4d32 --- /dev/null +++ b/demos/rollup/app.js @@ -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 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); diff --git a/demos/systemjs/app.js b/demos/systemjs/app.node.js similarity index 100% rename from demos/systemjs/app.js rename to demos/systemjs/app.node.js diff --git a/demos/systemjs/systemjsnode.js b/demos/systemjs/systemjsnode.js index 186c766..4b68a8c 100644 --- a/demos/systemjs/systemjsnode.js +++ b/demos/systemjs/systemjsnode.js @@ -15,4 +15,4 @@ SystemJS.config({ 'stream': '@node/stream' } }); -SystemJS.import('./app.js'); +SystemJS.import('./app.node.js'); diff --git a/demos/webpack/app.js b/demos/webpack/app.js index a47ca30..e0c4d32 100644 --- a/demos/webpack/app.js +++ b/demos/webpack/app.js @@ -224,4 +224,3 @@ function handleFile(e) { } if(xlf.addEventListener) xlf.addEventListener('change', handleFile, false); - diff --git a/demos/webpack/core.html b/demos/webpack/core.html new file mode 100644 index 0000000..514f8e5 --- /dev/null +++ b/demos/webpack/core.html @@ -0,0 +1,55 @@ + + + + + + +JS-XLSX Live Demo + + + +JS-XLSX Live Demo
+Output Format: +
+ +
Drop a spreadsheet file here to see sheet data
+

... or click here to select a file

+ +
+Advanced Demo Options:
+Use Web Workers: (when available)
+Use Transferrables: (when available)
+Use readAsBinaryString: (when available)
+

+

+
+
+
+
+
diff --git a/demos/webpack/full.html b/demos/webpack/full.html
new file mode 100644
index 0000000..37a19ea
--- /dev/null
+++ b/demos/webpack/full.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+JS-XLSX Live Demo
+
+
+
+JS-XLSX Live Demo

+Output Format:
+

+
+
Drop a spreadsheet file here to see sheet data

+
 ... or click here to select a file

+
+

+Advanced Demo Options: 

+Use Web Workers: (when available) 

+Use Transferrables: (when available) 

+Use readAsBinaryString: (when available) 

+

+

+
+
+
+
+
diff --git a/docbits/40_interface.md b/docbits/40_interface.md
index bcb649f..81cbfd6 100644
--- a/docbits/40_interface.md
+++ b/docbits/40_interface.md
@@ -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.
-
diff --git a/docbits/82_util.md b/docbits/82_util.md
index d4787ee..83f9a85 100644
--- a/docbits/82_util.md
+++ b/docbits/82_util.md
@@ -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`)            |
 
 

 	Examples (click to show)
@@ -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"]});
 ```
 

 
diff --git a/misc/docs/README.md b/misc/docs/README.md
index 9cbca53..a49c1c5 100644
--- a/misc/docs/README.md
+++ b/misc/docs/README.md
@@ -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