<!DOCTYPE html> <!-- sheetjs (C) 2013-present SheetJS https://sheetjs.com --> <!-- vim: set ts=2: --> <html ng-app="s5s"> <head> <title>SheetJS + AngularJS</title> <!-- Angular --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <!-- 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> <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> </head> <body> <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/> This demo shows: <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/> <a href="https://sheetjs.com/pres.xlsx">Sample Spreadsheet</a> <br/><br/> The table has hardcoded fields `Name` and `Index`. <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/> <div ng-controller="sheetjs"> <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> </div> <script> var app = angular.module('s5s', []); app.controller('sheetjs', function($scope, $http) { $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"); }; $http({ method:'GET', url:'https://sheetjs.com/pres.xlsx', responseType:'arraybuffer' }).then(function(data) { var wb = XLSX.read(data.data, {type:"array"}); $scope.data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); }, function(err) { console.log(err); }); }); 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]); }); } }; } </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>