Skip to main content

Ionic

The NodeJS Module can be imported from the main entrypoint or any script in the project.

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

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:

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

/* 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:

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

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

1) Create a new project:

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:

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:

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

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

src/app/app.module.ts
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { File } from '@ionic-native/file/ngx';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

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

6) Test the app:

npx @ionic/cli cordova emulate ios