diff --git a/docz/docs/03-demos/05-mobile/05-capacitor.md b/docz/docs/03-demos/05-mobile/05-capacitor.md index 055b677..5be412a 100644 --- a/docz/docs/03-demos/05-mobile/05-capacitor.md +++ b/docz/docs/03-demos/05-mobile/05-capacitor.md @@ -7,15 +7,23 @@ sidebar_custom_props: summary: JS + Web View --- -## CapacitorJS +The [NodeJS Module](/docs/getting-started/installation/nodejs) can be imported +from the main entrypoint or any script in the project. -:::note +The "Complete Example" creates an app that looks like the screenshots below: -This demo was tested on an Intel Mac on 2022 August 26 with Svelte. + + + +
iOSAndroid
-The iOS simulator runs iOS 15.5 on an iPhone 13 Pro Max. +![iOS screenshot](pathname:///cap/ios.png) -::: + + +![Android screenshot](pathname:///cap/and.png) + +
:::warning Telemetry @@ -33,7 +41,7 @@ npx @capacitor/cli telemetry ::: -### Integration Details +## Integration Details This example uses Svelte, but the same principles apply to other frameworks. @@ -100,93 +108,150 @@ async function exportFile() { ``` -### Demo +## Demo -
Complete Example (click to show) +:::note -0) Disable telemetry as noted in the warning. +This demo was tested on an Intel Mac on 2023 April 01 with Capacitor 4.7.3 and +`@capacitor/filesystem` 4.1.4 -Follow the [React Native demo](#demo) to ensure iOS and Android sims are ready. +The iOS simulator runs iOS 16.2 on an iPhone 14 Pro Max. +The Android simulator runs Android 12.0 (S) API 31 on a Pixel 3. -1) Create a new Svelte project: +::: + +### Base Project + +1) Disable telemetry. + +```bash +npx @capacitor/cli telemetry off +``` + +Verify that telemetry is disabled by running + +```bash +npx @capacitor/cli telemetry +``` + +(it should print `Telemetry is off`) + +2) Create a new Svelte project: ```bash npm create vite@latest sheetjs-cap -- --template svelte cd sheetjs-cap ``` -2) Install dependencies: +3) Install dependencies: ```bash npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz -npm i --save @capacitor/core @capacitor/cli @capacitor/ios @capacitor/filesystem +npm i --save @capacitor/core @capacitor/cli @capacitor/filesystem ``` -3) Create CapacitorJS structure: +4) Create CapacitorJS structure: ```bash npx cap init sheetjs-cap com.sheetjs.cap --web-dir=dist +npm run build +``` + +5) Download [`src/App.svelte`](pathname:///cap/App.svelte) and replace: + +```bash +curl -o src/App.svelte -L https://docs.sheetjs.com/cap/App.svelte +``` + +### iOS + +6) Follow the [React Native demo](/docs/demos/mobile/reactnative#demo) to +ensure the iOS simulator is ready. + +7) Create iOS app + +```bash +npm i --save @capacitor/ios npx cap add ios ``` -4) Replace the contents of `src/App.svelte` with the following: +8) Enable file sharing and make the documents folder visible in the iOS app. +The following lines must be added to `ios/App/App/Info.plist`: -```html title="src/App.svelte" - - -
-

SheetJS × CapacitorJS { version }

- - -
{@html html}
-
+```xml title="ios/App/App/Info.plist" + + + + UIFileSharingEnabled + + LSSupportsOpeningDocumentsInPlace + + + CFBundleDevelopmentRegion ``` -5) Test the app: +(The root element of the document is `plist` and it contains one `dict` child) + +9) Run the app in the simulator ```bash -npm run build; npx cap sync; npx cap run ios +npm run build +npx cap sync +npx cap run ios ``` -There are 3 steps: build the Svelte app, sync with CapacitorJS, and run sim. -This sequence must be run every time to ensure changes are propagated. +10) Test the app -
+Open the app and observe that presidents are listed in the table. + +Touch "Export XLSX" and a popup will be displayed. + +To see the generated file, switch to the "Files" app in the simulator and look +for `SheetJSCap.xlsx` in "On My iPhone" > "`sheetjs-cap`" + +### Android + +11) Follow the [React Native demo](/docs/demos/mobile/reactnative#demo) to +ensure the Android simulator is ready. + +12) Create Android app + +```bash +npm i --save @capacitor/android +npx cap add android +``` + +13) Enable file reading and writing in the Android app. +The following lines must be added to `android/app/src/main/AndroidManifest.xml` +after the `Permissions` comment: + +```xml title="android/app/src/main/AndroidManifest.xml" + + + + + + + + +``` + +14) Run the app in the simulator + +```bash +npm run build +npx cap sync +npx cap run android +``` + +15) Test the app + +Open the app and observe that presidents are listed in the table. + +Touch "Export XLSX" and the emulator will ask for permission: + +Tap "Allow" and a popup will be displayed with a path. + +To see the generated file, switch to the "Files" app in the simulator, tap the +`≡` icon and tap "Documents". Tap "Documents" folder to find `SheetJSCap.xlsx`. diff --git a/docz/docs/07-csf/04-book.md b/docz/docs/07-csf/04-book.md index 01bf211..0800ee6 100644 --- a/docz/docs/07-csf/04-book.md +++ b/docz/docs/07-csf/04-book.md @@ -59,7 +59,7 @@ Writers will process the `Props` key of the options object: ```js /* force the Author to be "SheetJS" */ -XLSX.write(wb, {Props:{Author:"SheetJS"}}); +XLSX.write(wb, { Props: { Author: "SheetJS" } }); ``` ## Workbook-Level Attributes @@ -92,6 +92,63 @@ Excel allows two sheet-scoped defined names to share the same name. However, a sheet-scoped name cannot collide with a workbook-scope name. Workbook writers may not enforce this constraint. +The following snippet creates a worksheet-level defined name `"Global"` and a +local defined name `"Local"` with distinct values for first and second sheets: + +```js +/* ensure the workbook structure exists */ +if(!wb.Workbook) wb.Workbook = {}; +if(!wb.Workbook.Names) wb.Workbook.Names = []; + +/* "Global" workbook-level -> Sheet1 A1:A2 */ +wb.Workbook.Names.push({ Name: "Global", Ref: "Sheet1!$A$1:$A$2" }); + +/* "Local" scoped to the first worksheet -> Sheet1 B1:B2 */ +wb.Workbook.Names.push({ Name: "Local", Ref: "Sheet1!$B$1:$B$2", Sheet: 0 }); + +/* "Local" scoped to the second worksheet -> Sheet1 C1:C2 */ +wb.Workbook.Names.push({ Name: "Local", Ref: "Sheet1!$C$1:$C$2", Sheet: 1 }); +``` + +
Live Example (click to show) + +```jsx live +/* The live editor requires this function wrapper */ +function DefinedNameExport() { return ( ); } +``` + +
+ ### Workbook Views `wb.Workbook.Views` is an array of workbook view objects which have the keys: diff --git a/docz/docs/07-csf/07-features/_category_.json b/docz/docs/07-csf/07-features/_category_.json index 698a3b3..5890ebc 100644 --- a/docz/docs/07-csf/07-features/_category_.json +++ b/docz/docs/07-csf/07-features/_category_.json @@ -1,4 +1,5 @@ { "label": "Spreadsheet Features", + "collapsed": false, "position": 7 } diff --git a/docz/static/cap/App.svelte b/docz/static/cap/App.svelte new file mode 100644 index 0000000..1e238b9 --- /dev/null +++ b/docz/static/cap/App.svelte @@ -0,0 +1,46 @@ + + +
+

SheetJS × CapacitorJS { version }

+ + +
{@html html}
+
diff --git a/docz/static/cap/and.png b/docz/static/cap/and.png new file mode 100644 index 0000000..90885d5 Binary files /dev/null and b/docz/static/cap/and.png differ diff --git a/docz/static/cap/ios.png b/docz/static/cap/ios.png new file mode 100644 index 0000000..823dfcc Binary files /dev/null and b/docz/static/cap/ios.png differ