| 
									
										
										
										
											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"); | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-02-03 20:46:32 +00:00
										 |  |  | /* write workbook and force a download */ | 
					
						
							|  |  |  | XLSX.writeFile(wb, "sheetjs.xlsx"); | 
					
						
							| 
									
										
										
										
											2017-09-24 23:40:09 +00:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											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 | 
					
						
							| 
									
										
										
										
											2018-02-03 20:46:32 +00:00
										 |  |  | values from the grid, builds an array of arrays, generates a workbook and forces | 
					
						
							|  |  |  | a download.  By setting the `filename` and `sheetname` options in the ui-grid | 
					
						
							|  |  |  | options, the output can be controlled. | 
					
						
							| 
									
										
										
										
											2017-06-14 14:29:20 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2017-09-24 23:40:09 +00:00
										 |  |  | [](https://github.com/SheetJS/js-xlsx) |