From 118e9ad9cb6dd25a2a40afafa3e46558a194d60e Mon Sep 17 00:00:00 2001 From: SheetJS Date: Wed, 24 May 2017 18:52:35 -0400 Subject: [PATCH] meteor example [ci skip] --- README.md | 37 ++++++++++++++++++++++++++ demos/meteor/.gitignore | 1 + demos/meteor/Makefile | 9 +++++++ demos/meteor/README.md | 38 ++++++++++++++++++++++++++ demos/meteor/client/main.css | 2 ++ demos/meteor/client/main.html | 27 +++++++++++++++++++ demos/meteor/client/main.js | 50 +++++++++++++++++++++++++++++++++++ demos/meteor/package.json | 11 ++++++++ demos/meteor/server/main.js | 22 +++++++++++++++ docbits/10_install.md | 5 ++++ docbits/25_manip.md | 32 ++++++++++++++++++++++ 11 files changed, 234 insertions(+) create mode 100644 demos/meteor/.gitignore create mode 100644 demos/meteor/Makefile create mode 100644 demos/meteor/README.md create mode 100644 demos/meteor/client/main.css create mode 100644 demos/meteor/client/main.html create mode 100644 demos/meteor/client/main.js create mode 100644 demos/meteor/package.json create mode 100644 demos/meteor/server/main.js diff --git a/README.md b/README.md index 1a99e7b..01af5e0 100644 --- a/README.md +++ b/README.md @@ -169,6 +169,7 @@ The `demos` directory includes sample projects for: - [`angular`](demos/angular/) - [`browserify`](demos/browserify/) - [`Adobe ExtendScript`](demos/extendscript/) +- [`meteor`](demos/meteor/) - [`phantomjs`](demos/phantomjs/) - [`requirejs`](demos/requirejs/) - [`systemjs`](demos/systemjs/) @@ -176,6 +177,9 @@ The `demos` directory includes sample projects for: ### Optional Modules +
+ Optional features (click to show) + The node version automatically requires modules for additional features. Some of these modules are rather large in size and are only needed in special circumstances, so they do not ship with the core. For browser use, they must @@ -200,6 +204,7 @@ be configured to remove support with `resolve.alias`: } ``` +
### ECMAScript 5 Compatibility @@ -431,6 +436,9 @@ the buffering for you. The full object format is described later in this README. +
+ Reading a specific cell (click to show) + This example extracts the value stored in cell A1 from the first worksheet: ```js @@ -447,6 +455,35 @@ var desired_cell = worksheet[address_of_cell]; var desired_value = (desired_cell ? desired_cell.v : undefined); ``` +
+ +
+ Adding a new worksheet to a workbook (click to show) + +This example uses [`XLSX.utils.aoa_to_sheet`](#array-of-arrays-input) to make a +worksheet and appends the new worksheet to the workbook: + +```js +var new_ws_name = "SheetJS"; + +/* make worksheet */ +var ws_data = [ + [ "S", "h", "e", "e", "t", "J", "S" ], + [ 1 , 2 , 3 , 4 , 5 ] +]; +var ws = XLSX.utils.aoa_to_sheet(ws_data); + +/* Add the sheet name to the list */ +wb.SheetNames.push(ws_name); + +/* Load the worksheet object */ +wb.Sheets[ws_name] = ws; + +``` + +
+ + ### Complete Examples - node diff --git a/demos/meteor/.gitignore b/demos/meteor/.gitignore new file mode 100644 index 0000000..a210498 --- /dev/null +++ b/demos/meteor/.gitignore @@ -0,0 +1 @@ +.meteor diff --git a/demos/meteor/Makefile b/demos/meteor/Makefile new file mode 100644 index 0000000..d337c57 --- /dev/null +++ b/demos/meteor/Makefile @@ -0,0 +1,9 @@ +.PHONY: start +start: + @meteor + +.PHONY: init +init: + @npm install babel-runtime meteor-node-stubs + @meteor add pfafman:filesaver + @mkdir -p node_modules; cd node_modules; ln -s ../../../ xlsx; cd - diff --git a/demos/meteor/README.md b/demos/meteor/README.md new file mode 100644 index 0000000..bc3b532 --- /dev/null +++ b/demos/meteor/README.md @@ -0,0 +1,38 @@ +# Meteor + +This library is universal: outside of environment-specific features (parsing DOM +tables in the browser, streaming write in nodejs), the core is ES3/ES5 and can +be used in any reasonably compliant JS implementation. It should play nice with +meteor out of the box. + + +## This demonstration + +You can split the work between the client and server side as you see fit. The +obvious extremes of pure-client code and pure-server code are straightforward. +This demo tries to split the work to demonstrate that the workbook object can be +passed on the wire. + +The read demo: +- accepts files from the client side +- sends binary string to server +- processes data on server side +- sends workbook object to client +- renders HTML and adds to a DOM element + +The write demo: +- generates workbook on server side +- sends workbook object to client +- generates file on client side +- triggers a download. + + +## Environment-specific features + +File-related operations (e.g. `XLSX.readFile` and `XLSX.writeFile`) will not be +available in client-side code. If you need to read a local file from the client, +use a file input or drag-and-drop. + +Browser-specific operations (e.g. `XLSX.utils.table_to_book`) are limited to +client side code. You should never have to read from DOM elements on the server +side, but you can use a third-party virtual DOM to provide the required API. diff --git a/demos/meteor/client/main.css b/demos/meteor/client/main.css new file mode 100644 index 0000000..d001463 --- /dev/null +++ b/demos/meteor/client/main.css @@ -0,0 +1,2 @@ +/* CSS declarations go here */ +a { text-decoration: none } diff --git a/demos/meteor/client/main.html b/demos/meteor/client/main.html new file mode 100644 index 0000000..273e0f9 --- /dev/null +++ b/demos/meteor/client/main.html @@ -0,0 +1,27 @@ + + meteor-xlsx + + + +
+SheetJS Meteor Demo
+
+Meteor Read Demo
+
+{{> read}}
+
+Meteor Write Demo
+
+{{> write}}
+
+
+ + + + + diff --git a/demos/meteor/client/main.js b/demos/meteor/client/main.js new file mode 100644 index 0000000..f32b8e4 --- /dev/null +++ b/demos/meteor/client/main.js @@ -0,0 +1,50 @@ +import { Template } from 'meteor/templating'; +import { ReactiveVar } from 'meteor/reactive-var'; + +import './main.html'; + +const XLSX = require('xlsx'); + +Template.read.events({ + 'change input' (evt, instance) { + /* "Browser file upload form element" from SheetJS README */ + const file = evt.currentTarget.files[0]; + const reader = new FileReader(); + reader.onload = function(e) { + const data = e.target.result; + const name = file.name; + /* Meteor magic */ + Meteor.call('upload', data, name, function(err, wb) { + if(err) console.error(err); + else { + /* do something here -- this just dumps an array of arrays to console */ + console.log(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {header:1})); + document.getElementById('out').innerHTML = (XLSX.utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]])); + } + }); + }; + reader.readAsBinaryString(file); + }, +}); + +Template.write.events({ + 'click button' (evt, instance) { + Meteor.call('download', function(err, wb) { + if(err) console.error(err); + else { + console.log(wb); + /* "Browser download file" from SheetJS README */ + var wopts = { bookType:'xlsx', bookSST:false, type:'binary' }; + var wbout = XLSX.write(wb, wopts); + saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), "meteor.xlsx"); + } + }); + }, +}); + +function s2ab(s) { + var buf = new ArrayBuffer(s.length); + var view = new Uint8Array(buf); + for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; + return buf; +} diff --git a/demos/meteor/package.json b/demos/meteor/package.json new file mode 100644 index 0000000..e86eeb8 --- /dev/null +++ b/demos/meteor/package.json @@ -0,0 +1,11 @@ +{ + "name": "meteor-xlsx", + "private": true, + "scripts": { + "start": "meteor run" + }, + "dependencies": { + "babel-runtime": "^6.20.0", + "meteor-node-stubs": "~0.2.4" + } +} diff --git a/demos/meteor/server/main.js b/demos/meteor/server/main.js new file mode 100644 index 0000000..a4fa775 --- /dev/null +++ b/demos/meteor/server/main.js @@ -0,0 +1,22 @@ +import { Meteor } from 'meteor/meteor'; + +const XLSX = require('xlsx'); + +Meteor.methods({ + upload: (bstr, name) => { + /* read the data and return the workbook object to the frontend */ + return XLSX.read(bstr, {type:'binary'}); + }, + download: () => { + /* generate a workbook object and return to the frontend */ + const data = [ + ["a", "b", "c"], + [ 1 , 2 , 3 ] + ]; + const ws = XLSX.utils.aoa_to_sheet(data); + const wb = {SheetNames: ["Sheet1"], Sheets:{Sheet1:ws }}; + return wb; + } +}); + +Meteor.startup(() => { }); diff --git a/docbits/10_install.md b/docbits/10_install.md index ace8f8e..723bc1e 100644 --- a/docbits/10_install.md +++ b/docbits/10_install.md @@ -28,6 +28,7 @@ The `demos` directory includes sample projects for: - [`angular`](demos/angular/) - [`browserify`](demos/browserify/) - [`Adobe ExtendScript`](demos/extendscript/) +- [`meteor`](demos/meteor/) - [`phantomjs`](demos/phantomjs/) - [`requirejs`](demos/requirejs/) - [`systemjs`](demos/systemjs/) @@ -35,6 +36,9 @@ The `demos` directory includes sample projects for: ### Optional Modules +
+ Optional features (click to show) + The node version automatically requires modules for additional features. Some of these modules are rather large in size and are only needed in special circumstances, so they do not ship with the core. For browser use, they must @@ -59,6 +63,7 @@ be configured to remove support with `resolve.alias`: } ``` +
### ECMAScript 5 Compatibility diff --git a/docbits/25_manip.md b/docbits/25_manip.md index d684db1..3faa012 100644 --- a/docbits/25_manip.md +++ b/docbits/25_manip.md @@ -2,6 +2,9 @@ The full object format is described later in this README. +
+ Reading a specific cell (click to show) + This example extracts the value stored in cell A1 from the first worksheet: ```js @@ -18,6 +21,35 @@ var desired_cell = worksheet[address_of_cell]; var desired_value = (desired_cell ? desired_cell.v : undefined); ``` +
+ +
+ Adding a new worksheet to a workbook (click to show) + +This example uses [`XLSX.utils.aoa_to_sheet`](#array-of-arrays-input) to make a +worksheet and appends the new worksheet to the workbook: + +```js +var new_ws_name = "SheetJS"; + +/* make worksheet */ +var ws_data = [ + [ "S", "h", "e", "e", "t", "J", "S" ], + [ 1 , 2 , 3 , 4 , 5 ] +]; +var ws = XLSX.utils.aoa_to_sheet(ws_data); + +/* Add the sheet name to the list */ +wb.SheetNames.push(ws_name); + +/* Load the worksheet object */ +wb.Sheets[ws_name] = ws; + +``` + +
+ + ### Complete Examples - node