diff --git a/docz/docs/04-getting-started/03-demos/05-salesforce.md b/docz/docs/04-getting-started/03-demos/01-salesforce.md similarity index 99% rename from docz/docs/04-getting-started/03-demos/05-salesforce.md rename to docz/docs/04-getting-started/03-demos/01-salesforce.md index 84e9c12..58935fa 100644 --- a/docz/docs/04-getting-started/03-demos/05-salesforce.md +++ b/docz/docs/04-getting-started/03-demos/01-salesforce.md @@ -1,5 +1,5 @@ --- -sidebar_position: 6 +sidebar_position: 1 --- # Salesforce LWC diff --git a/docz/docs/04-getting-started/03-demos/02-extendscript.md b/docz/docs/04-getting-started/03-demos/02-extendscript.md index c12764d..9bedc6a 100644 --- a/docz/docs/04-getting-started/03-demos/02-extendscript.md +++ b/docz/docs/04-getting-started/03-demos/02-extendscript.md @@ -1,5 +1,5 @@ --- -sidebar_position: 3 +sidebar_position: 2 --- # Adobe Apps diff --git a/docz/docs/04-getting-started/03-demos/10-database.md b/docz/docs/04-getting-started/03-demos/03-database.md similarity index 99% rename from docz/docs/04-getting-started/03-demos/10-database.md rename to docz/docs/04-getting-started/03-demos/03-database.md index 0058705..a2a669b 100644 --- a/docz/docs/04-getting-started/03-demos/10-database.md +++ b/docz/docs/04-getting-started/03-demos/03-database.md @@ -1,5 +1,5 @@ --- -sidebar_position: 10 +sidebar_position: 3 title: Databases and SQL --- diff --git a/docz/docs/04-getting-started/03-demos/04-netsuite.md b/docz/docs/04-getting-started/03-demos/04-netsuite.md index a4b31e3..f5c14d6 100644 --- a/docz/docs/04-getting-started/03-demos/04-netsuite.md +++ b/docz/docs/04-getting-started/03-demos/04-netsuite.md @@ -1,5 +1,5 @@ --- -sidebar_position: 5 +sidebar_position: 4 --- # NetSuite diff --git a/docz/docs/04-getting-started/03-demos/01-gsheet.md b/docz/docs/04-getting-started/03-demos/05-gsheet.md similarity index 96% rename from docz/docs/04-getting-started/03-demos/01-gsheet.md rename to docz/docs/04-getting-started/03-demos/05-gsheet.md index 563a466..8dab456 100644 --- a/docz/docs/04-getting-started/03-demos/01-gsheet.md +++ b/docz/docs/04-getting-started/03-demos/05-gsheet.md @@ -1,5 +1,5 @@ --- -sidebar_position: 2 +sidebar_position: 5 --- # Google Sheets diff --git a/docz/docs/04-getting-started/03-demos/03-excel.md b/docz/docs/04-getting-started/03-demos/10-excel.md similarity index 96% rename from docz/docs/04-getting-started/03-demos/03-excel.md rename to docz/docs/04-getting-started/03-demos/10-excel.md index 1da8041..0598f91 100644 --- a/docz/docs/04-getting-started/03-demos/03-excel.md +++ b/docz/docs/04-getting-started/03-demos/10-excel.md @@ -1,5 +1,5 @@ --- -sidebar_position: 4 +sidebar_position: 10 --- # Excel JavaScript API diff --git a/docz/docs/04-getting-started/03-demos/15-chromium.md b/docz/docs/04-getting-started/03-demos/15-chromium.md index 1759fd6..db9d34d 100644 --- a/docz/docs/04-getting-started/03-demos/15-chromium.md +++ b/docz/docs/04-getting-started/03-demos/15-chromium.md @@ -1,5 +1,5 @@ --- -sidebar_position: 14 +sidebar_position: 15 title: Chrome and Chromium --- diff --git a/docz/docs/04-getting-started/03-demos/16-desktop.md b/docz/docs/04-getting-started/03-demos/16-desktop.md new file mode 100644 index 0000000..dbe31b0 --- /dev/null +++ b/docz/docs/04-getting-started/03-demos/16-desktop.md @@ -0,0 +1,128 @@ +--- +sidebar_position: 16 +title: Desktop Applications +--- + +Web technologies like JavaScript and HTML have been adapted to the traditional +app space. Typically these frameworks bundle a JavaScript engine as well as a +windowing framework. SheetJS is compatible with many toolkits. + +## NW.js + +The [Standalone scripts](../../installation/standalone) can be referenced in a +`SCRIPT` tag from the entry point HTML page. + +This demo was tested against NW.js 0.66.0. + +
Complete Example (click to show) + +1) Create a `package.json` file that specifies the entry point: + +```json title="package.json" +{ + "name": "sheetjs-nwjs", + "author": "sheetjs", + "version": "0.0.0", + "main": "index.html", + "dependencies": { + "nw": "~0.66.0", + "xlsx": "https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz" + } +} +``` + +2) Download [`index.html`](pathname:///nwjs/index.html) into the same folder. + +:::caution + +Right-click the link and select "Save Link As...". Left-clicking the link will +try to load the page in your browser. The goal is to save the file contents. + +::: + +3) Run `npm install` to install dependencies + +4) To verify the app works, run in the test environment: + +``` +npx nw . +``` + +The app will show and you should be able to verify reading and writing by using +the file input element to select a spreadsheet and clicking the export button. + +5) To build a standalone app, run the builder: + +``` +npx -p nw-builder nwbuild --mode=build . +``` + +This will generate the standalone app in the `build\sheetjs-nwjs\` folder. + +
+ +### Reading data + +The standard HTML5 `FileReader` techniques from the browser apply to NW.js! + +NW.js handles the OS minutiae for dragging files into app windows. The +[drag and drop snippet](../../solutions/input#example-user-submissions) apply +to DIV elements on the page. + +Similarly, file input elements automatically map to standard Web APIs. + +For example, assuming a file input element on the page: + +```html + +``` + +The event handler would process the event as if it were a web event: + +```js +async function handleFile(e) { + const file = e.target.files[0]; + const data = await file.arrayBuffer(); + /* data is an ArrayBuffer */ + const workbook = XLSX.read(data); + + /* DO SOMETHING WITH workbook HERE */ +} +document.getElementById("xlf").addEventListener("change", handleFile, false); +``` + +### Writing data + +File input elements with the attribute `nwsaveas` show UI for saving a file. The +standard trick is to generate a hidden file input DOM element and "click" it. +Since NW.js does not present a `writeFileSync` in the `fs` package, a manual +step is required: + +```js +/* pre-build the hidden nwsaveas input element */ +var input = document.createElement('input'); +input.style.display = 'none'; +input.setAttribute('nwsaveas', 'SheetJSNWDemo.xlsx'); +input.setAttribute('type', 'file'); +document.body.appendChild(input); + +/* show a message if the save is canceled */ +input.addEventListener('cancel',function(){ alert("Save was canceled!"); }); + +/* write to a file on the 'change' event */ +input.addEventListener('change',function(e){ + /* the `value` is the path that the program will write */ + var filename = this.value; + + /* use XLSX.write with type "buffer" to generate a buffer" */ + /* highlight-next-line */ + var wbout = XLSX.write(workbook, {type:'buffer', bookType:"xlsx"}); + /* highlight-next-line */ + fs.writeFile(filename, wbout, function(err) { + if(!err) return alert("Saved to " + filename); + alert("Error: " + (err.message || err)); + }); +}); + +input.click(); +``` diff --git a/docz/docs/04-getting-started/03-demos/index.md b/docz/docs/04-getting-started/03-demos/index.md index 90a85dd..855bbd5 100644 --- a/docz/docs/04-getting-started/03-demos/index.md +++ b/docz/docs/04-getting-started/03-demos/index.md @@ -38,7 +38,7 @@ The demo projects include small runnable examples and short explainers. - [`Command-Line Tools`](./cli) - [`NodeJS Server-Side Processing`](https://github.com/SheetJS/SheetJS/tree/master/demos/server/) - [`Electron`](https://github.com/SheetJS/SheetJS/tree/master/demos/electron/) -- [`NW.js`](https://github.com/SheetJS/SheetJS/tree/master/demos/nwjs/) +- [`NW.js`](./desktop#nwjs) - [`Chrome / Chromium Extension`](./chromium) - [`Google Sheets API`](./gsheet) - [`ExtendScript for Adobe Apps`](./extendscript) diff --git a/docz/static/nwjs/index.html b/docz/static/nwjs/index.html new file mode 100644 index 0000000..d2909c4 --- /dev/null +++ b/docz/static/nwjs/index.html @@ -0,0 +1,110 @@ + + + + + + +SheetJS NW.js Demo + + + +
+SheetJS NW.js Demo
+
+
Drop a spreadsheet file here to see sheet data
+ ... or click here to select a file + +
+

+
+
+ + + +