diff --git a/docz/docs/03-demos/05-mobile/04-ionic.md b/docz/docs/03-demos/05-mobile/04-ionic.md index 6b8ac7a..1854b3d 100644 --- a/docz/docs/03-demos/05-mobile/04-ionic.md +++ b/docz/docs/03-demos/05-mobile/04-ionic.md @@ -10,6 +10,17 @@ sidebar_custom_props: The [NodeJS Module](/docs/getting-started/installation/nodejs) can be imported from the main entrypoint or any script in the project. +The "Complete Example" creates an app that looks like the screenshots below: + + + +
iOS
+ +![iOS screenshot](pathname:///ionic/ios.png) + +
+ + :::warning Telemetry Before starting this demo, manually disable telemetry. On Linux and MacOS: @@ -36,7 +47,7 @@ npx @capacitor/cli telemetry ::: -## Cordova +## Integration Details :::caution @@ -44,6 +55,8 @@ The latest version of Ionic uses CapacitorJS. These notes are for Cordova apps. ::: +### Angular + `Array>` neatly maps to a table with `ngFor`: ```html @@ -56,15 +69,26 @@ The latest version of Ionic uses CapacitorJS. These notes are for Cordova apps. ``` -`@ionic-native/file` reads and writes files on devices. `readAsArrayBuffer` -returns `ArrayBuffer` objects suitable for `array` type, and `array` type can -be converted to blobs that can be exported with `writeFile`: +### Cordova + +`@ionic-native/file` reads and writes files on devices. + +_Reading Files_ + +`readAsArrayBuffer` returns `ArrayBuffer` objects suitable for `array` type: ```ts /* read a workbook */ const ab: ArrayBuffer = await this.file.readAsArrayBuffer(url, filename); -const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'array'}); +const wb: XLSX.WorkBook = XLSX.read(ab, {type: 'array'}); +``` +_Writing Files_ + +`array` type can be converted to blobs that can be exported with `writeFile`: + + +```ts /* write a workbook */ const wbout: ArrayBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); let blob = new Blob([wbout], {type: 'application/octet-stream'}); @@ -75,15 +99,13 @@ this.file.writeFile(url, filename, blob, {replace: true}); :::note -This demo was tested on an Intel Mac on 2022 August 18 with Cordova. +This demo was tested on an Intel Mac on 2023 March 19 with Cordova. The file integration uses `@ionic-native/file` version `5.36.0`. -The iOS simulator runs iOS 15.5 on an iPod Touch 7th Gen. +The iOS simulator runs iOS 16.5 on an iPhone SE (3rd Generation). ::: -
Complete Example (click to show) - 0) Disable telemetry as noted in the warning. Install required global dependencies: @@ -92,7 +114,7 @@ Install required global dependencies: npm i -g cordova-res @angular/cli native-run ``` -Follow the [React Native demo](#demo) to ensure iOS and Android sims are ready. +Follow the [React Native demo](/docs/demos/mobile/reactnative) to ensure iOS and Android sims are ready. 1) Create a new project: @@ -101,18 +123,36 @@ Follow the [React Native demo](#demo) to ensure iOS and Android sims are ready. npx @ionic/cli start SheetJSIonic blank --type angular --cordova --quiet --no-git --no-link --confirm ``` -If a prompt discusses Cordova and Capacitor, enter `Yes` to continue. +If a prompt asks to confirm Cordova use, enter `Yes` to continue. If a prompt asks about creating an Ionic account, enter `N` to opt out. 2) Set up Cordova: ```bash +cd SheetJSIonic npx @ionic/cli cordova platform add ios --confirm npx @ionic/cli cordova plugin add cordova-plugin-file npm install --save @ionic-native/core @ionic-native/file @ionic/cordova-builders ``` +:::caution + +In some test runs, the `plugin add cordova-plugin-file` step reported an error: + +``` +CordovaError: Could not load API for ios project +``` + +This was resolved by removing and reinstalling the `ios` platform: + +```bash +npx @ionic/cli cordova platform rm ios +npx @ionic/cli cordova platform add ios --confirm +``` + +::: + 3) Install dependencies: ```bash @@ -145,11 +185,25 @@ export class AppModule {} curl -o src/app/home/home.page.ts -L https://docs.sheetjs.com/ionic/home.page.ts ``` -6) Test the app: +**iOS Testing** ```bash npx @ionic/cli cordova emulate ios ``` -
+:::caution +In some test runs, the `cordova build ios --emulator` step failed with error: + +``` +> cordova build ios --emulator +Could not load API for ios project +``` + +This was resolved by forcefully installing `cordova-ios`: + +```bash +npm i --save cordova-ios +``` + +::: diff --git a/docz/static/ionic/home.page.ts b/docz/static/ionic/home.page.ts index 50d741a..1be82e7 100644 --- a/docz/static/ionic/home.page.ts +++ b/docz/static/ionic/home.page.ts @@ -1,6 +1,6 @@ /* sheetjs (C) 2013-present SheetJS -- https://sheetjs.com */ /* vim: set ts=2: */ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { File } from '@ionic-native/file/ngx'; import * as XLSX from 'xlsx'; @@ -41,10 +41,16 @@ type AOA = any[][]; ` }) -export class HomePage { +export class HomePage implements OnInit { data: any[][] = [[1,2,3],[4,5,6]]; constructor(public file: File) {} + async ngOnInit(): Promise { + const res: Response = await fetch("https://sheetjs.com/pres.numbers"); + const ab: ArrayBuffer = await res.arrayBuffer(); + this.read(ab); + } + read(ab: ArrayBuffer) { /* read workbook */ const wb: XLSX.WorkBook = XLSX.read(new Uint8Array(ab), {type: 'array'}); @@ -91,7 +97,7 @@ export class HomePage { const ab: ArrayBuffer = await this.file.readAsArrayBuffer(url, 'SheetJSIonic.xlsx'); this.read(ab); } catch(e) { - const m: string = e.message; + const m: string = (e as Error).message; alert(m.match(/It was determined/) ? 'Use File Input control' : `Error: ${m}`); } }; @@ -113,11 +119,11 @@ export class HomePage { await this.file.writeFile(url, filename, wbout, {replace: true}); alert(`Wrote to SheetJSIonic.xlsx in ${url}`); } catch(e) { - if(e.message.match(/It was determined/)) { + if((e as Error).message.match(/It was determined/)) { /* in the browser, use writeFile */ XLSX.writeFile(wb, filename); } else { - alert(`Error: ${e.message}`); + alert(`Error: ${(e as Error).message}`); } } }; diff --git a/docz/static/ionic/ios.png b/docz/static/ionic/ios.png new file mode 100644 index 0000000..1d898f4 Binary files /dev/null and b/docz/static/ionic/ios.png differ