--- title: Ionic pagination_prev: demos/static/index pagination_next: demos/desktop/index sidebar_position: 4 sidebar_custom_props: summary: Native Components + Web View --- The [NodeJS Module](/docs/getting-started/installation/nodejs) can be imported from the main entrypoint or any script in the project. :::warning Telemetry Before starting this demo, manually disable telemetry. On Linux and MacOS: ```bash rm -rf ~/.ionic/ mkdir ~/.ionic cat < ~/.ionic/config.json { "version": "6.20.1", "telemetry": false, "npmClient": "npm" } EOF npx @capacitor/cli telemetry off ``` To verify telemetry was disabled: ```bash npx @ionic/cli config get -g telemetry npx @capacitor/cli telemetry ``` ::: ## Cordova :::caution The latest version of Ionic uses CapacitorJS. These notes are for Cordova apps. ::: `Array>` neatly maps to a table with `ngFor`: ```html {{val}} ``` `@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`: ```ts /* read a workbook */ const ab: ArrayBuffer = await this.file.readAsArrayBuffer(url, filename); const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'array'}); /* write a workbook */ const wbout: ArrayBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); let blob = new Blob([wbout], {type: 'application/octet-stream'}); this.file.writeFile(url, filename, blob, {replace: true}); ``` ## Demo :::note This demo was tested on an Intel Mac on 2022 August 18 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. :::
Complete Example (click to show) 0) Disable telemetry as noted in the warning. Install required global dependencies: ```bash npm i -g cordova-res @angular/cli native-run ``` Follow the [React Native demo](#demo) to ensure iOS and Android sims are ready. 1) Create a new project: ```bash 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 about creating an Ionic account, enter `N` to opt out. 2) Set up Cordova: ```bash 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 ``` 3) Install dependencies: ```bash npm install --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz ``` 4) Add `@ionic-native/file` to the module. Differences highlighted below: ```ts title="src/app/app.module.ts" import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; // highlight-next-line import { File } from '@ionic-native/file/ngx'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], // highlight-next-line providers: [File, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }], bootstrap: [AppComponent], }) export class AppModule {} ``` 5) Download [`home.page.ts`](pathname:///ionic/home.page.ts) and replace: ```bash curl -o src/app/home/home.page.ts -L https://docs.sheetjs.com/ionic/home.page.ts ``` 6) Test the app: ```bash npx @ionic/cli cordova emulate ios ```