2022-08-01 05:34:23 +00:00
<!DOCTYPE html>
2022-10-20 18:47:20 +00:00
<!-- sheetjs (C) 2013 - present SheetJS https://sheetjs.com -->
2022-08-01 05:34:23 +00:00
<!-- vim: set ts=2: -->
< html ng-app = "s5s" >
< head >
< title > SheetJS + AngularJS< / title >
<!-- Angular -->
2023-08-28 22:40:53 +00:00
< script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js" > < / script >
2022-08-01 05:34:23 +00:00
<!-- SheetJS library -->
< script src = "https://cdn.sheetjs.com/xlsx-latest/package/dist/shim.min.js" > < / script >
< script src = "https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js" > < / script >
2023-04-09 00:20:50 +00:00
< style >
* { padding: 0; margin: 0; box-sizing: border-box; }
html, body { width: 100vw; max-width: 100%; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; -webkit-font-smoothing: antialiased; background: white; color: black; }
body { padding-top: 5px; max-width: 760px; margin-left: auto; margin-right: auto; }
table { border-collapse: collapse; }
table, tr, th, td { border: 1px solid; }
div { padding: 5px; }
li { margin: 5px 0;}
< / style >
2022-08-01 05:34:23 +00:00
< / head >
< body >
2023-04-09 00:20:50 +00:00
< h3 > < a href = "https://sheetjs.com" > SheetJS + AngularJS demo< / a > < / h3 >
< br / >
The core library can be used as-is in AngularJS applications. < a href = "https://docs.sheetjs.com/docs/demos/frontend/angularjs" > The SheetJS + AngularJS demo< / a > covers common strategies.< br / > < br / >
2022-08-01 05:34:23 +00:00
This demo shows:
2023-04-09 00:20:50 +00:00
< ul >
< li > $http request for XLSX file and scope update with data< / li >
< li > HTML table using ng-repeat< / li >
< li > XLSX table export using `XLSX.utils.json_to_sheet`< / li >
< li > Custom directive for importing user-submitted files< / li >
< / ul >
< br / >
2022-08-01 05:34:23 +00:00
< a href = "https://sheetjs.com/pres.xlsx" > Sample Spreadsheet< / a >
2023-04-09 00:20:50 +00:00
< br / > < br / >
2022-08-01 05:34:23 +00:00
The table has hardcoded fields `Name` and `Index`.
2023-04-09 00:20:50 +00:00
< br / > < br / >
< b > Testing< / b > < br / >
< ol >
< li > Load page. The table should show a list of presidents.< / li >
< li > Click "Export Table" and confirm that a file was downloaded.< / li >
< li > Open the generated file in a spreadsheet editor and add a new row.< / li >
< li > Use the file input element to select the edited file. The table should refresh.< / li >
< / ol >
< br / >
2022-08-01 05:34:23 +00:00
< div ng-controller = "sheetjs" >
2023-04-09 00:20:50 +00:00
< input type = "file" import-sheet-js = "" multiple = "false" / > < br / >
< table id = "s5s-table" >
< tr > < th > Name< / th > < th > Index< / th > < / tr >
< tr ng-repeat = "row in data track by $index" >
< td > {{row.Name}}< / td >
< td > {{row.Index}}< / td >
< / tr >
< / table >
< button ng-click = "exportSheetJS()" > Export Table< / button >
2022-08-01 05:34:23 +00:00
< / div >
< script >
var app = angular.module('s5s', []);
app.controller('sheetjs', function($scope, $http) {
2023-04-09 00:20:50 +00:00
$scope.exportSheetJS = function() {
var ws = XLSX.utils.json_to_sheet($scope.data);
var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Presidents");
XLSX.writeFile(wb, "SheetJSAngularJSExport.xlsx");
};
2022-08-01 05:34:23 +00:00
$http({
method:'GET',
url:'https://sheetjs.com/pres.xlsx',
responseType:'arraybuffer'
}).then(function(data) {
var wb = XLSX.read(data.data, {type:"array"});
2023-04-09 00:20:50 +00:00
$scope.data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
2022-08-01 05:34:23 +00:00
}, function(err) { console.log(err); });
});
2023-04-09 00:20:50 +00:00
app.directive("importSheetJs", [SheetJSImportDirective]);
function SheetJSImportDirective() {
return {
scope: false,
link: function ($scope, $elm) {
$elm.on('change', function (changeEvent) {
var reader = new FileReader();
reader.onload = function (e) {
var wb = XLSX.read(e.target.result);
$scope.$apply(function() {
$scope.data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
});
};
reader.readAsArrayBuffer(changeEvent.target.files[0]);
});
}
};
}
2022-08-01 05:34:23 +00:00
< / script >
< script type = "text/javascript" >
/* eslint no-use-before-define:0 */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36810333-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
< / script >
< / body >
< / html >
