|
1 | 1 | # AngularJS |
2 | 2 |
|
3 | | -The `xlsx.core.min.js` and `xlsx.full.min.js` scripts are designed to be dropped |
4 | | -into web pages with script tags: |
5 | | - |
6 | | -```html |
7 | | -<script src="xlsx.full.min.js"></script> |
8 | | -``` |
9 | | - |
10 | | -Strictly speaking, there should be no need for an Angular demo! You can proceed |
11 | | -as you would with any other browser-friendly library. |
12 | | - |
13 | | -This demo uses AngularJS 1.5.0. |
14 | | - |
15 | | - |
16 | | -## Array of Objects |
17 | | - |
18 | | -A common data table is often stored as an array of objects: |
19 | | - |
20 | | -```js |
21 | | -$scope.data = [ |
22 | | - { Name: "Bill Clinton", Index: 42 }, |
23 | | - { Name: "GeorgeW Bush", Index: 43 }, |
24 | | - { Name: "Barack Obama", Index: 44 }, |
25 | | - { Name: "Donald Trump", Index: 45 } |
26 | | -]; |
27 | | -``` |
28 | | - |
29 | | -This neatly maps to a table with `ng-repeat`: |
30 | | - |
31 | | -```html |
32 | | -<table id="sjs-table"> |
33 | | - <tr><th>Name</th><th>Index</th></tr> |
34 | | - <tr ng-repeat="row in data"> |
35 | | - <td>{{row.Name}}</td> |
36 | | - <td>{{row.Index}}</td> |
37 | | - </tr> |
38 | | -</table> |
39 | | -``` |
40 | | - |
41 | | -The `$http` service can request binary data using the `"arraybuffer"` response |
42 | | -type coupled with `XLSX.read` with type `"array"`: |
43 | | - |
44 | | -```js |
45 | | - $http({ |
46 | | - method:'GET', |
47 | | - url:'https://sheetjs.com/pres.xlsx', |
48 | | - responseType:'arraybuffer' |
49 | | - }).then(function(data) { |
50 | | - var wb = XLSX.read(data.data, {type:"array"}); |
51 | | - var d = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); |
52 | | - $scope.data = d; |
53 | | - }, function(err) { console.log(err); }); |
54 | | -``` |
55 | | - |
56 | | -The HTML table can be directly exported with `XLSX.utils.table_to_book`: |
57 | | - |
58 | | -```js |
59 | | -var wb = XLSX.utils.table_to_book(document.getElementById('sjs-table')); |
60 | | -XLSX.writeFile(wb, "export.xlsx"); |
61 | | -``` |
62 | | - |
63 | | - |
64 | | -## Import Directive |
65 | | - |
66 | | -A general import directive is fairly straightforward: |
67 | | - |
68 | | -- Define the `importSheetJs` directive in the app: |
69 | | - |
70 | | -```js |
71 | | -app.directive("importSheetJs", [SheetJSImportDirective]); |
72 | | -``` |
73 | | - |
74 | | -- Add the attribute `import-sheet-js=""` to the file input element: |
75 | | - |
76 | | -```html |
77 | | -<input type="file" import-sheet-js="" multiple="false" /> |
78 | | -``` |
79 | | - |
80 | | -- Define the directive: |
81 | | - |
82 | | -```js |
83 | | -function SheetJSImportDirective() { |
84 | | - return { |
85 | | - scope: { opts: '=' }, |
86 | | - link: function ($scope, $elm) { |
87 | | - $elm.on('change', function (changeEvent) { |
88 | | - var reader = new FileReader(); |
89 | | - |
90 | | - reader.onload = function (e) { |
91 | | - /* read workbook */ |
92 | | - var ab = e.target.result; |
93 | | - var workbook = XLSX.read(ab); |
94 | | - |
95 | | - /* DO SOMETHING WITH workbook HERE */ |
96 | | - }; |
97 | | - |
98 | | - reader.readAsArrayBuffer(changeEvent.target.files[0]); |
99 | | - }); |
100 | | - } |
101 | | - }; |
102 | | -} |
103 | | -``` |
104 | | - |
105 | | - |
106 | | -## Export Service |
107 | | - |
108 | | -An export can be triggered at any point! Depending on how data is represented, |
109 | | -a workbook object can be built using the utility functions. For example, using |
110 | | -an array of objects: |
111 | | - |
112 | | -```js |
113 | | -/* starting from this data */ |
114 | | -var data = [ |
115 | | - { name: "Barack Obama", pres: 44 }, |
116 | | - { name: "Donald Trump", pres: 45 } |
117 | | -]; |
118 | | - |
119 | | -/* generate a worksheet */ |
120 | | -var ws = XLSX.utils.json_to_sheet(data); |
121 | | - |
122 | | -/* add to workbook */ |
123 | | -var wb = XLSX.utils.book_new(); |
124 | | -XLSX.utils.book_append_sheet(wb, ws, "Presidents"); |
125 | | - |
126 | | -/* write workbook and force a download */ |
127 | | -XLSX.writeFile(wb, "sheetjs.xlsx"); |
128 | | -``` |
129 | | - |
130 | | -## Demo |
131 | | - |
132 | | -`grid.html` uses `angular-ui-grid` to display a table. The library does not |
133 | | -provide any way to modify the import button, so the demo includes a simple |
134 | | -directive for a HTML File Input control. It also includes a sample service for |
135 | | -export which adds an item to the export menu. |
136 | | - |
137 | | -The demo `SheetJSImportDirective` follows the prescription from the README for |
138 | | -File input controls using `readAsArrayBuffer`, converting to a suitable |
139 | | -representation and updating the scope. |
140 | | - |
141 | | -`SheetJSExportService` exposes export functions for `XLSB` and `XLSX`. Other |
142 | | -file formats can be exported by changing the `bookType` variable. It grabs |
143 | | -values from the grid, builds an array of arrays, generates a workbook and forces |
144 | | -a download. By setting the `filename` and `sheetname` options in the `ui-grid` |
145 | | -options, the output can be controlled. |
| 3 | +The content has been reorganized; |
146 | 4 |
|
| 5 | +- [The "Legacy Frameworks" section](https://docs.sheetjs.com/docs/getting-started/demos/legacy#angularjs) |
| 6 | + covers the AngularJS basics. |
| 7 | +- [The "Angular UI Grid" section](https://docs.sheetjs.com/docs/getting-started/demos/legacy#angularjs) |
| 8 | + covers the integration with Angular UI Grid. |
147 | 9 |
|
148 | 10 | [](https://github.com/SheetJS/js-xlsx) |
0 commit comments