diff --git a/docz/docs/03-demos/03-desktop/01-electron.md b/docz/docs/03-demos/03-desktop/01-electron.md index 3388faa..7f1bb80 100644 --- a/docz/docs/03-demos/03-desktop/01-electron.md +++ b/docz/docs/03-demos/03-desktop/01-electron.md @@ -33,46 +33,6 @@ The "Complete Example" creates an app that looks like the screenshots below: Electron presents a `fs` module. The `require('xlsx')` call loads the CommonJS module, so `XLSX.readFile` and `XLSX.writeFile` work in the renderer thread. -### Writing Files - -[`XLSX.writeFile`](/docs/api/write-options) writes workbooks to the file system. -`showSaveDialog` shows a Save As dialog and returns the selected file name: - -```js -/* from the renderer thread */ -const electron = require('@electron/remote'); - -/* this function will show the save dialog and try to write the workbook */ -async function exportFile(workbook) { - /* show Save As dialog */ - const result = await electron.dialog.showSaveDialog({ - title: 'Save file as', - filters: [{ - name: "Spreadsheets", - extensions: ["xlsx", "xls", "xlsb", /* ... other formats ... */] - }] - }); - /* write file */ - // highlight-next-line - XLSX.writeFile(workbook, result.filePath); -} -``` - -:::note - -In older versions of Electron, `showSaveDialog` returned the path directly: - -```js -var dialog = require('electron').remote.dialog; - -function exportFile(workbook) { - var result = dialog.showSaveDialog(); - XLSX.writeFile(workbook, result); -} -``` - -::: - ### Reading Files Electron offers 3 different ways to read files, two of which use Web APIs. @@ -171,6 +131,46 @@ function importFile(workbook) { ::: +### Writing Files + +[`XLSX.writeFile`](/docs/api/write-options) writes workbooks to the file system. +`showSaveDialog` shows a Save As dialog and returns the selected file name: + +```js +/* from the renderer thread */ +const electron = require('@electron/remote'); + +/* this function will show the save dialog and try to write the workbook */ +async function exportFile(workbook) { + /* show Save As dialog */ + const result = await electron.dialog.showSaveDialog({ + title: 'Save file as', + filters: [{ + name: "Spreadsheets", + extensions: ["xlsx", "xls", "xlsb", /* ... other formats ... */] + }] + }); + /* write file */ + // highlight-next-line + XLSX.writeFile(workbook, result.filePath); +} +``` + +:::note + +In older versions of Electron, `showSaveDialog` returned the path directly: + +```js +var dialog = require('electron').remote.dialog; + +function exportFile(workbook) { + var result = dialog.showSaveDialog(); + XLSX.writeFile(workbook, result); +} +``` + +::: + ## Complete Example :::note diff --git a/docz/docs/03-demos/03-desktop/02-nwjs.md b/docz/docs/03-demos/03-desktop/02-nwjs.md index 7c2bc30..154540c 100644 --- a/docz/docs/03-demos/03-desktop/02-nwjs.md +++ b/docz/docs/03-demos/03-desktop/02-nwjs.md @@ -13,8 +13,6 @@ import TabItem from '@theme/TabItem'; The [Standalone scripts](/docs/getting-started/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 on 2023 January 07. - The "Complete Example" creates an app that looks like the screenshots below: @@ -34,7 +32,7 @@ The "Complete Example" creates an app that looks like the screenshots below: NW.js provides solutions for reading and writing files. -### Reading data +### Reading Files The standard HTML5 `FileReader` techniques from the browser apply to NW.js! @@ -64,7 +62,7 @@ async function handleFile(e) { document.getElementById("xlf").addEventListener("change", handleFile, false); ``` -### Writing data +### Writing Files 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. @@ -102,6 +100,12 @@ input.click(); ## Complete Example +:::note + +This demo was tested against NW.js 0.66.0 on 2023 January 07. + +::: + 1) Create a `package.json` file that specifies the entry point: ```json title="package.json" diff --git a/docz/docs/03-demos/03-desktop/03-wails.md b/docz/docs/03-demos/03-desktop/03-wails.md index 03306bd..ef3cb3a 100644 --- a/docz/docs/03-demos/03-desktop/03-wails.md +++ b/docz/docs/03-demos/03-desktop/03-wails.md @@ -28,7 +28,7 @@ The "Complete Example" creates an app that looks like the screenshot:
-## Native Modules +## Integration Details All operations must be run from Go code. This example passes Base64 strings. @@ -225,9 +225,13 @@ async function exportFile(wb) { ## Complete Example +:::note + This demo was tested against Wails `v2.3.1` on 2023 January 08 using the Svelte TypeScript starter. +::: + 0) [Read Wails "Getting Started" guide and install dependencies.](https://wails.io/docs/gettingstarted/installation) 1) Create a new Wails app: diff --git a/docz/docs/03-demos/03-desktop/04-tauri.md b/docz/docs/03-demos/03-desktop/04-tauri.md index dd0234f..77eb24b 100644 --- a/docz/docs/03-demos/03-desktop/04-tauri.md +++ b/docz/docs/03-demos/03-desktop/04-tauri.md @@ -28,7 +28,7 @@ The "Complete Example" creates an app that looks like the screenshot: -## Native Modules +## Integration Details :::note @@ -123,7 +123,11 @@ async function saveFile(wb) { ## Complete Example -This demo was tested against Tauri `v1.2.3` on 2023 January 21. +:::note + +This demo was tested against Tauri `v1.2.3` on 2023 February 12. + +::: 0) [Read Tauri "Getting Started" guide and install dependencies.](https://tauri.app/v1/guides/getting-started/prerequisites) diff --git a/docz/docs/03-demos/03-desktop/05-neutralino.md b/docz/docs/03-demos/03-desktop/05-neutralino.md index 61a153c..5f64237 100644 --- a/docz/docs/03-demos/03-desktop/05-neutralino.md +++ b/docz/docs/03-demos/03-desktop/05-neutralino.md @@ -13,7 +13,22 @@ import TabItem from '@theme/TabItem'; The [Standalone build](/docs/getting-started/installation/standalone) can be added to the entry `index.html` -This demo was tested against "binaries" `4.7.0` and "client" `3.6.0` +The "Complete Example" creates an app that looks like the screenshot: + + + + +
macOSLinux
+ +![macOS screenshot](pathname:///neu/macos.png) + + + +![Linux screenshot](pathname:///neu/linux.png) + +
+ +## Integration Details :::note @@ -35,10 +50,6 @@ The starter already enables `os` so typically one line must be added: ], ``` -The "Complete Example" creates an app that looks like the screenshot: - -![SheetJS NeutralinoJS MacOS screenshot](pathname:///neu/macos.png) - :::caution At the time of writing, `filters` did not work as expected on MacOS. They have @@ -46,7 +57,67 @@ been omitted in the example and commented in the code snippets ::: -
Complete Example (click to show) +### Reading Files + +There are two steps to reading files: obtaining a path and reading binary data: + +```js +const filters = [ + {name: "Excel Binary Workbook", extensions: ["xlsb"]}, + {name: "Excel Workbook", extensions: ["xlsx"]}, +] + +async function openFile() { + /* show open file dialog */ + const [filename] = await Neutralino.os.showOpenDialog( + 'Open a spreadsheet', + { /* filters, */ multiSelections: false } + ); + + /* read data into an ArrayBuffer */ + const ab = await Neutralino.filesystem.readBinaryFile(filename); + + /* parse with SheetJS */ + const wb = XLSX.read(ab); + return wb; +} +``` + +This method can be called from a button click or other event. + +### Writing Files + +There are two steps to writing files: obtaining a path and writing binary data: + +```js +const filters = [ + {name: "Excel Binary Workbook", extensions: ["xlsb"]}, + {name: "Excel Workbook", extensions: ["xlsx"]}, +] + +async function saveFile(wb) { + /* show save file dialog */ + const filename = await Neutralino.os.showSaveDialog( + 'Save to file', + { /* filters */ } + ); + + /* Generate workbook */ + const bookType = filename.slice(filename.lastIndexOf(".") + 1); + const data = XLSX.write(wb, { bookType, type: "buffer" }); + + /* save data to file */ + await Neutralino.filesystem.writeBinaryFile(filename, data); +} +``` + +## Complete Example + +:::note + +This demo was tested on 2023 February 12 with "binaries" `4.7.0` and "client" `3.6.0` + +::: The app core state will be the HTML table. Reading files will add the table to the window. Writing files will parse the table into a spreadsheet. @@ -187,60 +258,3 @@ npx @neutralinojs/neu run ``` Platform-specific programs will be created in the `dist` folder. - -
- -### Reading Files - -There are two steps to reading files: obtaining a path and reading binary data: - -```js -const filters = [ - {name: "Excel Binary Workbook", extensions: ["xlsb"]}, - {name: "Excel Workbook", extensions: ["xlsx"]}, -] - -async function openFile() { - /* show open file dialog */ - const [filename] = await Neutralino.os.showOpenDialog( - 'Open a spreadsheet', - { /* filters, */ multiSelections: false } - ); - - /* read data into an ArrayBuffer */ - const ab = await Neutralino.filesystem.readBinaryFile(filename); - - /* parse with SheetJS */ - const wb = XLSX.read(ab); - return wb; -} -``` - -This method can be called from a button click or other event. - -### Writing Files - -There are two steps to writing files: obtaining a path and writing binary data: - -```js -const filters = [ - {name: "Excel Binary Workbook", extensions: ["xlsb"]}, - {name: "Excel Workbook", extensions: ["xlsx"]}, -] - -async function saveFile(wb) { - /* show save file dialog */ - const filename = await Neutralino.os.showSaveDialog( - 'Save to file', - { /* filters */ } - ); - - /* Generate workbook */ - const bookType = filename.slice(filename.lastIndexOf(".") + 1); - const data = XLSX.write(wb, { bookType, type: "buffer" }); - - /* save data to file */ - await Neutralino.filesystem.writeBinaryFile(filename, data); -} -``` - diff --git a/docz/static/neu/linux.png b/docz/static/neu/linux.png new file mode 100644 index 0000000..42a83e1 Binary files /dev/null and b/docz/static/neu/linux.png differ diff --git a/docz/static/tauri/App.vue b/docz/static/tauri/App.vue index ad992ab..0b53e5f 100644 --- a/docz/static/tauri/App.vue +++ b/docz/static/tauri/App.vue @@ -75,9 +75,9 @@ try { SheetJS × Tauri {{ ver }} - or - -

Data from {{ origin }}

+
or +
+

Data from {{ origin }}

@@ -90,9 +90,9 @@ try {