xsheetjs/demos/angular/README.md

106 lines
3.1 KiB
Markdown
Raw Normal View History

2017-06-14 14:29:20 +00:00
# Angular 1
The `xlsx.core.min.js` and `xlsx.full.min.js` scripts are designed to be dropped
2017-09-24 23:40:09 +00:00
into web pages with script tags:
2017-06-14 14:29:20 +00:00
```html
<script src="xlsx.full.min.js"></script>
```
Strictly speaking, there should be no need for an angular demo! You can proceed
as you would with any other browser-friendly library. To make this meaningful,
we chose to show an integration with a common angular table component.
This demo uses angular-ui-grid to display a data table. The ui-grid does not
2017-09-24 23:40:09 +00:00
provide any way to modify the import button, so the demo includes a simple
2017-06-14 14:29:20 +00:00
directive for a HTML File Input control. It also includes a sample service for
export which adds an item to the export menu.
## Import Directive
2017-09-24 23:40:09 +00:00
A general import directive is fairly straightforward:
- Define the `importSheetJs` directive in the app:
```js
app.directive("importSheetJs", [SheetJSImportDirective]);
```
- Add the attribute `import-sheet-js=""` to the file input element:
```html
<input type="file" import-sheet-js="" multiple="false" />
```
- Define the directive:
```js
var SheetJSImportDirective = function() {
return {
scope: { },
link: function ($scope, $elm, $attrs) {
$elm.on('change', function (changeEvent) {
var reader = new FileReader();
reader.onload = function (e) {
/* read workbook */
var bstr = e.target.result;
var workbook = XLSX.read(bstr, {type:'binary'});
/* DO SOMETHING WITH workbook HERE */
};
reader.readAsBinaryString(changeEvent.target.files[0]);
});
}
};
};
```
The demo `SheetJSImportDirective` follows the prescription from the README for
File input controls using `readAsBinaryString`, converting to a suitable
representation and updating the scope.
2017-06-14 14:29:20 +00:00
## Export Service
2017-09-24 23:40:09 +00:00
An export can be triggered at any point! Depending on how data is represented,
a workbook object can be built using the utility functions. For example, using
an array of objects:
```js
/* starting from this data */
var data = [
{ name: "Barack Obama", pres: 44 },
{ name: "Donald Trump", pres: 45 }
];
/* generate a worksheet */
var ws = XLSX.utils.json_to_sheet(data);
/* add to workbook */
var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Presidents");
/* write workbook (use type 'binary') */
var wbout = XLSX.write(wb, {bookType:'xlsx', type:'binary'});
/* generate a download */
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), "sheetjs.xlsx");
```
2017-06-14 14:29:20 +00:00
`SheetJSExportService` exposes export functions for `XLSB` and `XLSX`. Other
formats are easily supported by changing the `bookType` variable. It grabs
values from the grid, builds an array of arrays, generates a workbook and uses
FileSaver to generate a download. By setting the `filename` and `sheetname`
options in the ui-grid options, the output can be controlled.
2017-09-24 23:40:09 +00:00
[![Analytics](https://ga-beacon.appspot.com/UA-36810333-1/SheetJS/js-xlsx?pixel)](https://github.com/SheetJS/js-xlsx)