docs.sheetjs.com/docz/docs/03-demos/05-mobile/04-ionic.md

title	pagination_prev	pagination_next	sidebar_position	sidebar_custom_props
Ionic	demos/static/index	demos/desktop/index	4	summary Native Components + Web View

The NodeJS Module 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	Android

:::warning Telemetry

Before starting this demo, manually disable telemetry. On Linux and MacOS:

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:

npx @ionic/cli config get -g telemetry
npx @capacitor/cli telemetry

:::

Integration Details

:::caution

The latest version of Ionic uses CapacitorJS. These notes are for Cordova apps.

:::

Angular

Array<Array<any>> neatly maps to a table with ngFor:

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

Cordova

@ionic-native/file reads and writes files on devices.

Reading Files

readAsArrayBuffer returns ArrayBuffer objects suitable for array type:

/* read a workbook */
const ab: ArrayBuffer = await this.file.readAsArrayBuffer(url, filename);
const wb: XLSX.WorkBook = XLSX.read(ab, {type: 'array'});

Writing Files

array type can be converted to blobs that can be exported with writeFile:

/* 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 2023 March 28 with Cordova. The file integration uses @ionic-native/file version 5.36.0.

The iOS simulator runs iOS 15.5 on an iPhone SE (3rd Generation).

The Android simulator runs Android 12.0 (S) API 31 on a Pixel 3.

:::

0. Disable telemetry as noted in the warning.

Install required global dependencies:

npm i -g cordova-res @angular/cli native-run @ionic/cli

Follow the React Native demo to ensure iOS and Android sims are ready.

1. Create a new project:

ionic start SheetJSIonic blank --type angular --cordova --quiet --no-git --no-link --confirm

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:

cd SheetJSIonic
ionic cordova plugin add cordova-plugin-file
ionic cordova platform add ios --confirm
ionic cordova platform add android --confirm
npm install --save @ionic-native/core @ionic-native/file @ionic/cordova-builders

:::note

If cordova-plugin-file is added before the platforms, installation may fail:

CordovaError: Could not load API for ios project

This can be resolved by removing and reinstalling the ios platform:

ionic cordova platform rm ios
ionic cordova platform add ios --confirm

:::

:::caution

If the npm install fails due to rxjs resolution, add the highlighted lines to package.json to force a resolution:

  "private": true,
  // highlight-start
  "overrides": {
    "rxjs": "~7.5.0"
  },
  // highlight-end
  "dependencies": {

After adding the lines, the npm install command will succeed.

:::

3. Install dependencies:

npm install --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz

4. Add @ionic-native/file to the module. Differences highlighted below:

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 and replace:

curl -o src/app/home/home.page.ts -L https://docs.sheetjs.com/ionic/home.page.ts

iOS Testing

ionic 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:

npm i --save cordova-ios

:::

Android Testing

ionic cordova emulate android

:::caution

In some test runs, cordova build android --emulator step failed with error:

Could not find or parse valid build output file

This was resolved by forcefully installing cordova-android:

npm i --save cordova-android

:::