|
1 | 1 | # Angular 2+ |
2 | 2 |
|
3 | | -The ESM build can be imported directly from TS code with: |
| 3 | +[The new demo](https://docs.sheetjs.com/docs/demos/angular) has an updated |
| 4 | +exposition for legacy and modern deployments alike. |
4 | 5 |
|
5 | | -```typescript |
6 | | -import { read, utils, writeFileXLSX } from 'xlsx'; |
7 | | -``` |
| 6 | +The ecosystem demos were grouped by type in the new demo site: |
8 | 7 |
|
9 | | -This demo uses an array of arrays (type `Array<Array<any>>`) as the core state. |
10 | | -The component template includes a file input element, a table that updates with |
11 | | -the data, and a button to export the data. |
12 | | - |
13 | | -Other scripts in this demo show: |
14 | | -- `ionic` deployment for iOS, android, and browser |
15 | | -- `nativescript` deployment for iOS and android |
16 | | - |
17 | | -## Array of Arrays |
18 | | - |
19 | | -`Array<Array<any>>` neatly maps to a table with `ngFor`: |
20 | | - |
21 | | -```html |
22 | | -<table class="sjs-table"> |
23 | | - <tr *ngFor="let row of data"> |
24 | | - <td *ngFor="let val of row"> |
25 | | - {{val}} |
26 | | - </td> |
27 | | - </tr> |
28 | | -</table> |
29 | | -``` |
30 | | - |
31 | | -The `aoa_to_sheet` utility function returns a worksheet. Exporting is simple: |
32 | | - |
33 | | -```typescript |
34 | | -/* generate worksheet */ |
35 | | -const ws: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(this.data); |
36 | | - |
37 | | -/* generate workbook and add the worksheet */ |
38 | | -const wb: XLSX.WorkBook = XLSX.utils.book_new(); |
39 | | -XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); |
40 | | - |
41 | | -/* save to file */ |
42 | | -XLSX.writeFile(wb, 'SheetJS.xlsx'); |
43 | | -``` |
44 | | - |
45 | | -`sheet_to_json` with the option `header:1` makes importing simple: |
46 | | - |
47 | | -```typescript |
48 | | -/* <input type="file" (change)="onFileChange($event)" multiple="false" /> */ |
49 | | -/* ... (within the component class definition) ... */ |
50 | | - onFileChange(evt: any) { |
51 | | - /* wire up file reader */ |
52 | | - const target: DataTransfer = <DataTransfer>(evt.target); |
53 | | - if (target.files.length !== 1) throw new Error('Cannot use multiple files'); |
54 | | - const reader: FileReader = new FileReader(); |
55 | | - reader.onload = (e: any) => { |
56 | | - /* read workbook */ |
57 | | - const ab: ArrayBuffer = e.target.result; |
58 | | - const wb: XLSX.WorkBook = XLSX.read(ab); |
59 | | - |
60 | | - /* grab first sheet */ |
61 | | - const wsname: string = wb.SheetNames[0]; |
62 | | - const ws: XLSX.WorkSheet = wb.Sheets[wsname]; |
63 | | - |
64 | | - /* save data */ |
65 | | - this.data = <AOA>(XLSX.utils.sheet_to_json(ws, {header: 1})); |
66 | | - }; |
67 | | - reader.readAsArrayBuffer(target.files[0]); |
68 | | - } |
69 | | -``` |
70 | | - |
71 | | -## Switching between Angular versions |
72 | | - |
73 | | -Modules that work with Angular 2 largely work as-is with Angular 4+. Switching |
74 | | -between versions is mostly a matter of installing the correct version of the |
75 | | -core and associated modules. This demo includes `package.json-angular#` files |
76 | | -for every major version of Angular up to 12. |
77 | | - |
78 | | -To test a particular Angular version, overwrite `package.json`: |
79 | | - |
80 | | -```bash |
81 | | -# switch to Angular 2 |
82 | | -$ cp package.json-ng2 package.json |
83 | | -$ npm install |
84 | | -$ ng serve |
85 | | -``` |
86 | | - |
87 | | -Note: when running the demos, Angular 2 requires Node <= 14. This is due to a |
88 | | -tooling issue with `ng` and does not affect browser use. |
89 | | - |
90 | | -## XLSX Symbolic Link |
91 | | - |
92 | | -In this tree, `node_modules/xlsx` is a link pointing back to the root. This |
93 | | -enables testing the development version of the library. In order to use this |
94 | | -demo in other applications, add the `xlsx` dependency: |
95 | | - |
96 | | -```bash |
97 | | -$ npm install --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz |
98 | | -``` |
99 | | - |
100 | | -## SystemJS Configuration |
101 | | - |
102 | | -The default angular-cli configuration requires no additional configuration. |
103 | | - |
104 | | -Some deployments use the SystemJS loader, which does require configuration. |
105 | | -[SystemJS](https://docs.sheetjs.com/docs/demos/bundler#systemjs) |
106 | | -demo in the SheetJS CE docs describe the required settings. |
107 | | - |
108 | | -## Ionic |
109 | | - |
110 | | -<img src="screen.png" width="400px"/> |
111 | | - |
112 | | -Reproducing the full project is a little bit tricky. The included `ionic.sh` |
113 | | -script performs the necessary installation steps. |
114 | | - |
115 | | -`Array<Array<any>>` neatly maps to a table with `ngFor`: |
116 | | - |
117 | | -```html |
118 | | -<ion-grid> |
119 | | - <ion-row *ngFor="let row of data"> |
120 | | - <ion-col *ngFor="let val of row"> |
121 | | - {{val}} |
122 | | - </ion-col> |
123 | | - </ion-row> |
124 | | -</ion-grid> |
125 | | -``` |
126 | | - |
127 | | - |
128 | | -`@ionic-native/file` reads and writes files on devices. `readAsArrayBuffer` |
129 | | -returns `ArrayBuffer` objects suitable for `array` type, and `array` type can |
130 | | -be converted to blobs that can be exported with `writeFile`: |
131 | | - |
132 | | -```typescript |
133 | | -/* read a workbook */ |
134 | | -const ab: ArrayBuffer = await this.file.readAsArrayBuffer(url, filename); |
135 | | -const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'array'}); |
136 | | - |
137 | | -/* write a workbook */ |
138 | | -const wbout: ArrayBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); |
139 | | -let blob = new Blob([wbout], {type: 'application/octet-stream'}); |
140 | | -this.file.writeFile(url, filename, blob, {replace: true}); |
141 | | -``` |
142 | | - |
143 | | -## NativeScript |
144 | | - |
145 | | -[The new demo](https://docs.sheetjs.com/docs/demos/mobile#nativescript) |
146 | | -is updated for NativeScript 8 and uses more idiomatic data patterns. |
| 8 | +- [NativeScript](https://docs.sheetjs.com/docs/demos/mobile#nativescript) is now part of "iOS and Android Apps" |
| 9 | +- [Ionic](https://docs.sheetjs.com/docs/demos/mobile#ionic) is now part of "iOS and Android Apps" |
147 | 10 |
|
148 | 11 | [](https://github.com/SheetJS/js-xlsx) |
0 commit comments