ReferenceError：未定义Excel

2022-04-04 00:00:00 angularjs ms-office javascript 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？

解决方案

您需要确保调用

Excel.run(function (ctx) {
        var sheet = ctx.workbook.worksheets.getActiveWorksheet();
        sheet.getRange("A1").values = "Quarterly Sales Report";
        return ctx.sync()
    });

在Office初始化完成后执行。

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

  1. mark.xml
  2. index.html
  3. app.js

请确保将以下文件中的单词PathToYourLocalFile替换为您的实际本地路径。

mark.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文件中看到，方法loadDataAndCreateChart是在Office初始化完成后执行的。

您可以在此处找到如何将清单添加到Excel的文档： Office Dev Center

相关文章