docs.sheetjs.com/docz/static/ionic/home.page.ts

132 lines
4.0 KiB
TypeScript
Raw Permalink Normal View History

2022-10-20 18:47:20 +00:00
/* sheetjs (C) 2013-present SheetJS -- https://sheetjs.com */
2022-08-19 06:42:18 +00:00
/* vim: set ts=2: */
2023-03-20 05:44:17 +00:00
import { Component, OnInit } from '@angular/core';
2023-09-11 04:44:15 +00:00
import { File } from '@awesome-cordova-plugins/file/ngx';
2022-08-19 06:42:18 +00:00
import * as XLSX from 'xlsx';
type AOA = any[][];
@Component({
selector: 'app-home',
//templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
template: `
<ion-header>
<ion-toolbar>
<ion-title>SheetJS Ionic Demo</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title>SheetJS Demo</ion-title>
</ion-toolbar>
</ion-header>
<ion-grid>
<ion-row *ngFor="let row of data">
<ion-col *ngFor="let val of row">
{{val}}
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer padding>
<input type="file" (change)="onFileChange($event)" multiple="false" />
<button ion-button color="secondary" (click)="import()">Import Data</button>
<button ion-button color="secondary" (click)="export()">Export Data</button>
</ion-footer>
`
})
2023-03-20 05:44:17 +00:00
export class HomePage implements OnInit {
2023-09-11 04:44:15 +00:00
data: AOA = [[1,2,3],[4,5,6]];
2022-08-19 06:42:18 +00:00
constructor(public file: File) {}
2023-03-20 05:44:17 +00:00
async ngOnInit(): Promise<void> {
2024-04-26 04:16:13 +00:00
const res: Response = await fetch("https://docs.sheetjs.com/pres.numbers");
2023-03-20 05:44:17 +00:00
const ab: ArrayBuffer = await res.arrayBuffer();
this.read(ab);
}
2022-08-19 06:42:18 +00:00
read(ab: ArrayBuffer) {
/* read workbook */
const wb: XLSX.WorkBook = XLSX.read(new Uint8Array(ab), {type: 'array'});
/* grab first sheet */
const wsname: string = wb.SheetNames[0];
const ws: XLSX.WorkSheet = wb.Sheets[wsname];
/* save data */
this.data = (XLSX.utils.sheet_to_json(ws, {header: 1}) as AOA);
};
write(): XLSX.WorkBook {
/* generate worksheet */
const ws: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(this.data);
/* generate workbook and add the worksheet */
const wb: XLSX.WorkBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'SheetJS');
return wb;
};
/* File Input element for browser */
onFileChange(evt: any) {
/* wire up file reader */
const target: DataTransfer = (evt.target as DataTransfer);
if (target.files.length !== 1) { throw new Error('Cannot use multiple files'); }
const reader: FileReader = new FileReader();
reader.onload = (e: any) => {
const ab: ArrayBuffer = e.target.result;
this.read(ab);
};
reader.readAsArrayBuffer(target.files[0]);
};
/* Import button for mobile */
async import() {
try {
const target: string = this.file.documentsDirectory || this.file.externalDataDirectory || this.file.dataDirectory || '';
const dentry = await this.file.resolveDirectoryUrl(target);
const url: string = dentry.nativeURL || '';
alert(`Attempting to read SheetJSIonic.xlsx from ${url}`);
const ab: ArrayBuffer = await this.file.readAsArrayBuffer(url, 'SheetJSIonic.xlsx');
this.read(ab);
} catch(e) {
2023-03-20 05:44:17 +00:00
const m: string = (e as Error).message;
2022-08-19 06:42:18 +00:00
alert(m.match(/It was determined/) ? 'Use File Input control' : `Error: ${m}`);
}
};
/* Export button */
async export() {
const wb: XLSX.WorkBook = this.write();
const filename = 'SheetJSIonic.xlsx';
try {
/* generate Blob */
const wbout: ArrayBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
/* find appropriate path for mobile */
const target: string = this.file.documentsDirectory || this.file.externalDataDirectory || this.file.dataDirectory || '';
const dentry = await this.file.resolveDirectoryUrl(target);
const url: string = dentry.nativeURL || '';
/* attempt to save blob to file */
await this.file.writeFile(url, filename, wbout, {replace: true});
alert(`Wrote to SheetJSIonic.xlsx in ${url}`);
} catch(e) {
2023-03-20 05:44:17 +00:00
if((e as Error).message.match(/It was determined/)) {
2022-08-19 06:42:18 +00:00
/* in the browser, use writeFile */
XLSX.writeFile(wb, filename);
} else {
2023-03-20 05:44:17 +00:00
alert(`Error: ${(e as Error).message}`);
2022-08-19 06:42:18 +00:00
}
}
};
}