ReferenceError:未定义Excel

时间:2017-07-07 01:02:43

标签: javascript angularjs ms-office office-js office-app

我想用angularjs和angularjs-ui-router创建一个Office加载项:

<bt:Urls>
    <bt:Url id="Contoso.Taskpane3.Url" DefaultValue="https://localhost:3000/addin/test" />            
</bt:Urls>

模块名称为app,路由器如下:

.state('addinTest', {
    url: '/addin/test',
    tempalte: 'abc',
    controller: 'TestCtrl',
    resolve: {
        loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
            return $ocLazyLoad.load('https://appsforoffice.microsoft.com/lib/1/hosted/office.js');
        }],
        initOffice: ['loadMyCtrl', function (loadMyCtrl) {
            Office.initialize = function (reason) {
                $(document).ready(function () {
                    angular.element(document).ready(function () {
                        angular.bootstrap(document, ['app'])
                    })
                });
            }
            return Promise.resolve(null)
        }]
    }
})

控制器:

app.controller('TestCtrl', [function () {
    function loadDataAndCreateChart() {
        Excel.run(function (ctx) {
            var sheet = ctx.workbook.worksheets.getActiveWorksheet();
            sheet.getRange("A1").values = "Quarterly Sales Report";
            return ctx.sync()
        })
    }
    loadDataAndCreateChart()
}])

我希望加载加载项会将Quarterly Sales Report写入A1。但是,我收到以下错误:

ReferenceError: Excel is not defined at loadDataAndCreateChart

有谁知道什么是错的?可以初始化Office并使用angular.bootstrap吗?

1 个答案:

答案 0 :(得分:0)

您需要确保调用

Excel.run(function (ctx) {
        var sheet = ctx.workbook.worksheets.getActiveWorksheet();
        sheet.getRange("A1").values = "Quarterly Sales Report";
        return ctx.sync()
    });
在Office初始化完成后执行

我创建了一个从上面运行代码的小应用程序。实际上运行它只有三个文件。

  1. 的manifest.xml
  2. 的index.html
  3. app.js
  4. 请确保在以下文件中将 PathToYourLocalFile 替换为您的实际本地路径。

    <强>的manifest.xml

    <?xml version="1.0" encoding="utf-8"?>
    <OfficeApp xsi:type="TaskPaneApp" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.microsoft.com/office/appforoffice/1.0">
         <Id>6ed5a5d8-57e4-4739-9a38-cff59f23e266</Id>
         <Version>1.0.0.0</Version>
         <ProviderName>Test Provider</ProviderName>
         <DefaultLocale>en-US</DefaultLocale>
         <DisplayName DefaultValue="Test" />
         <Description DefaultValue="Angular Test" />
         <Capabilities>
            <Capability Name="Workbook" />
         </Capabilities>
         <DefaultSettings>
             <SourceLocation DefaultValue="PathToYourLocalFile/index.html" />
         </DefaultSettings>
         <Permissions>ReadWriteDocument</Permissions>
    </OfficeApp>
    

    <强>的index.html

    <!DOCTYPE html>
    <html lang="en" ng-app="AngularTest"  ng-controller="MainController">
    <head>
        <meta charset="utf-8">
        <title>Angular Test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
     </head>
     <body>
         <div ng-view></div>  
         <!-- Load Js Libaries -->
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
         </script>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
         </script>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-resource.min.js"></script>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
    
         <script src="PathToYourLocalFile/app.js"></script>
      </body>
      </html>
    

    <强> app.js

    'use strict';
    angular.module('AngularTest', [])
        .controller('MainController', [
            function () {
                Office.initialize = function () {
                    $(document).ready(function () {
                        loadDataAndCreateChart();
                    });
                };
    
                function loadDataAndCreateChart() {
                    Excel.run(function (ctx) {
                        var sheet = ctx.workbook.worksheets.getActiveWorksheet();
                        sheet.getRange("A1").values = "Quarterly Sales Report";
                        return ctx.sync();
                    });
                }
    
            }
        ]);
    

    你可以在app.js文件中看到在Office初始化完成后执行了方法loadDataAndCreateChart。

    在这里,您可以找到有关如何将清单添加到Excel的文档: Office Dev Center