---
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 <<EOF > ~/.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<Array<any>>` neatly maps to a table with `ngFor`:

```html
<ion-grid>
  <ion-row *ngFor="let row of data">
    <ion-col *ngFor="let val of row">
      {{val}}
    </ion-col>
  </ion-row>
</ion-grid>
```

`@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.

:::

<details><summary><b>Complete Example</b> (click to show)</summary>

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
```

</details>