-
Notifications
You must be signed in to change notification settings - Fork 664
Angular.js
You can use AlaSQL together with Angular.js framework by including it together with XLSX.js
import * as alasql from 'alasql';
import * as XLSX from 'xlsx';
alasql['utils'].isBrowserify = false;
alasql['utils'].global.XLSX = XLSX;
$scope.exportData = function () {
alasql('SELECT * INTO XLSX("john.xlsx",{headers:true}) FROM ?',[$scope.items]);
};
See a simple example in jsFiddle.
Another example: Calculating average of array
If AlaSQL recognize Angular.js it removes $$hashKey
artefacts from the exporting arrays.
To remove other artefact fields you can use [REMOVE COLUMNS](Remove Columns) clause.
(Source: AlaSQL Group by Built with AngularJS Application)
For example, you can integrate these libraries it for import or export data files from MS Excel.
HTML:
<button ng-if="$root.appInfo.model.rows" // show excel icon only if there are rows in the grid
class="btn"ng-click="$root.exportData()">
</button>
Controller:
$rootScope.exportData = function () {
alasql('SELECT * INTO XLSX("list.xlsx",{headers:true}) FROM ?',
[$rootScope.appInfo.model.rows]);
};
Codepen example: http://codepen.io/DickSwart/pen/wWPYpX/
Unfortunately, we cannot use ng-change
because the input needs to be bound (ng-model
), but it seems that type=file
inputs are not supported for binding in Angular.js, so we can switch to ng-mouseleave
and it worked, though we had to check in the function that a file had been chosen.
HTML:
<input type="file" ng-mouseleave="loadFile($event)" />
Controller:
$rootScope.loadFile = function (event) {
if (event.fromElement.files.length==0) {
return(false); // leave in case no file was chosen
};
alasql('SELECT * FROM FILE(?,{headers:true})', [event], function (data) {
$rootScope.eData = data; // eData contains the JSON representation of the Excel sheet rows
});
};
Play with this example: http://jsfiddle.net/vxjgnmxa/ (only chrome)
For firefox support, please check out https://github.com/agershun/alasql/tree/develop/examples/angular/import-export-excel
For Angular cli: have a look at https://github.com/agershun/alasql/issues/738#issuecomment-277266095
Steps for a working AlaSQL configuration inside an NG2 project are:
- npm install alasql --save
- optional for XLSX export: npm install xlsx --save
- add the javascript dependencies inside the .angular-cli.json file of your project
"scripts": [
"../node_modules/alasql/dist/alasql.min.js",
"../node_modules/xlsx/dist/xlsx.core.min.js"
],
- next import into one of your components where you woudl like to use the alasql function (not inside app-module.ts) the AlaSQL dependency.
import * as alaSQLSpace from 'alasql';
- and if you would like to test your code, you can add this test block from jsfiddle: into your component.
public testAlaSQLExcelExport(): void {
var data1 = [{ a: 1, b: 10 }, { a: 2, b: 20 }];
var data2 = [{ a: 100, b: 10 }, { a: 200, b: 20 }];
var opts = [{ sheetid: 'Good', header: true }, { sheetid: 'Two', header: false }];
var res = alasql('SELECT INTO XLSX("MyAwesomeData.xlsx",?) FROM ?', [opts, [data1, data2]]);
}
- now if you run ng serve the project will compile without any errors or warnings and if the testAlaSQLExcelExport() function is used you can see that the excel file will be exported inside your browser.
© 2014-2024, Andrey Gershun & Mathias Rangel Wulff
Please help improve the documentation by opening a PR on the wiki repo