Last active
May 27, 2017 15:36
-
-
Save chgc/7f8da8802e350bd029841f05061092ec to your computer and use it in GitHub Desktop.
用 Angular 來開發 Excel 增益集 (addin)，使用官網範例改寫
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'rxjs/add/observable/from'; | |
| import {ApplicationRef, Component} from '@angular/core'; | |
| import {Observable} from 'rxjs/Observable'; | |
| @Component({ | |
| selector: 'app-root', | |
| templateUrl: './app.component.html', | |
| styleUrls: ['./app.component.css'] | |
| }) | |
| export class AppComponent { | |
| title = '用Angular寫Excel Addin!!'; | |
| constructor(private appRef: ApplicationRef) {} | |
| clickMe() { | |
| // Run a batch operation against the Excel object model | |
| Observable | |
| .from(Excel.run((ctx) => { | |
| // Create a proxy object for the active worksheet | |
| const sheet: Excel.Worksheet = | |
| ctx.workbook.worksheets.getActiveWorksheet(); | |
| if (sheet) { | |
| // Queue commands to set the report title in the worksheet | |
| sheet.getRange('A1').values = [['Quarterly Sales Report']]; | |
| sheet.getRange('A1').format.font.name = 'Century'; | |
| sheet.getRange('A1').format.font.size = 26; | |
| } | |
| // Create an array containing sample data | |
| const values = [ | |
| ['Product', 'Qtr1', 'Qtr2', 'Qtr3', 'Qtr4'], | |
| ['Frames', 5000, 7000, 6544, 4377], ['Saddles', 400, 323, 276, 651], | |
| ['Brake levers', 12000, 8766, 8456, 9812], | |
| ['Chains', 1550, 1088, 692, 853], ['Mirrors', 225, 600, 923, 544], | |
| ['Spokes', 6005, 7634, 4589, 8765] | |
| ]; | |
| // Queue a command to write the sample data to the specified range | |
| // in the worksheet and bold the header row | |
| const range = sheet.getRange('A2:E8'); | |
| range.values = values; | |
| sheet.getRange('A2:E2').format.font.bold = true; | |
| // Queue a command to add a new chart | |
| const chart = sheet.charts.add('ColumnClustered', range, 'auto'); | |
| // Queue commands to set the properties and format the chart | |
| chart.setPosition('G1', 'L10'); | |
| chart.title.text = 'Quarterly sales chart'; | |
| chart.legend.position = 'right' | |
| chart.legend.format.fill.setSolidColor('white'); | |
| chart.dataLabels.format.font.size = 15; | |
| chart.dataLabels.format.font.color = 'black'; | |
| const points = chart.series.getItemAt(0).points; | |
| points.getItemAt(0).format.fill.setSolidColor('pink'); | |
| points.getItemAt(1).format.fill.setSolidColor('indigo'); | |
| // Run the queued commands, and return a promise to indicate task | |
| // completion | |
| return ctx.sync(); | |
| })) | |
| .subscribe( | |
| () => { | |
| this.appRef.tick(); | |
| console.log('Success!'); | |
| }, | |
| error => { | |
| }); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Ng2Excel</title> | |
| <base href="/"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="icon" type="image/x-icon" href="favicon.ico"> | |
| <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> | |
| <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script> | |
| <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css"> | |
| <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css"> | |
| </head> | |
| <body> | |
| <app-root>Loading...</app-root> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {enableProdMode} from '@angular/core'; | |
| import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; | |
| import {AppModule} from './app/app.module'; | |
| import {environment} from './environments/environment'; | |
| declare const Office: any; | |
| Office.initialize = function() { | |
| const platform = platformBrowserDynamic(); | |
| platform.bootstrapModule(AppModule); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <!--Created:cb85b80c-f585-40ff-8bfc-12ff4d0e34a9--> | |
| <OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp"> | |
| <Id>534a9c82-e492-4b03-a0df-7e6e97815039</Id> | |
| <Version>1.0.0.0</Version> | |
| <ProviderName>Microsoft</ProviderName> | |
| <DefaultLocale>en-US</DefaultLocale> | |
| <DisplayName DefaultValue="Angular App Sample" /> | |
| <Description DefaultValue="Angular App Sample"/> | |
| <Capabilities> | |
| <Capability Name="Workbook" /> | |
| </Capabilities> | |
| <DefaultSettings> | |
| <SourceLocation DefaultValue="https://localhost:4200" /> | |
| </DefaultSettings> | |
| <Permissions>ReadWriteDocument</Permissions> | |
| </OfficeApp> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment