0

我正在调试 React 中内置的 Excel 加载项。以前，开发人员将应用程序编码为网站而不是 Excel 加载项，并且没有关注 Office.js。结果，当我们在 Excel 中运行它时，我们遇到了著名的错误Error: Office.js has not fully loaded. Your app must call "Office.onReady()" as part of it's loading sequence (or set the "Office.initialize" function). If your app has this functionality, try reloading this page.

在此处输入图像描述

我搜索Office.onReady并Office.initialize在整个项目中，我没有找到它们。

在这里frontend/src/index.tsx，dva是一个“基于 redux、redux-saga 和 react-router 的框架（受 elm 和 choo 启发）”。

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import dva from 'dva';
import './index.css';
import router from './router';
import AuthModel from './models/auth';
import SubscribtionModel from './models/subscription';
import AppModel from './models/app';
import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';

//@ts-ignore
//import createLoading from 'dva-loading';

// 1. Initialize
const app = dva();
//app.use(createLoading());

// 2. Plugins
// app.use({});

// 3. Model
//@ts-ignore
app.model(AuthModel);
app.model(SubscribtionModel)
app.model(AppModel);
// 4. Router
//@ts-ignore
app.router(router);

// 5. Start
app.start('#root');

initializeIcons();

有谁知道我应该放在哪里，Office.onReady()这样我们才能确保每次启动加载项时 Office.js 都可以完全加载？

编辑1：

我试图模仿这个文件并将我的一个更改index.tsx为

  render() {
    const { items, farItems } = this.props;

    console.log("Here is Office:");
    console.log(Office);

    return (
      <AwaitPromiseThenRender
        promise={Promise.resolve().then(async () => {
              await Office.onReady();
        })}
      >
        <CommonHeader
          items={items.map((item: IHeaderItem) => this.renderItem(item))}
          farItems={farItems.map((item: IHeaderItem) => this.renderItem(item))}
        />
      </AwaitPromiseThenRender>
    );
  }

它返回了一个 TypeScript error: Property 'onReady' does not exist on type 'typeof Office'. TS2339，而该对象Office在控制台中打印得很好。有人知道这个问题吗？

编辑2：

我尝试在frontend/src/index.tsx上面添加以下代码。它还是回来了Property 'onReady' does not exist on type 'typeof Office'. TS2339。

export function render(oldRender: () => void) {
    Office.onReady((reason: any) => {
      oldRender();
    });
}
4

2 回答 2

0

你可以把它放在 componentWillMount

async componentWillMount() {
 await hostApp.onReady();}
于 2021-01-07T07:42:06.657 回答
0

如果你使用类组件，你可以把它放在componentWillMount.

如果你使用函数组件，你可以Effect像这样把它放在钩子里：</p> 

useEffect(()=>{
    Office.onReady(function(info) {
      console.log(info);
      if (info.host === Office.HostType.Word) {
        console.log("hhhhhhhhhhh")
      }
      if (info.platform === Office.PlatformType.PC) {
        // Make minor layout changes in the task pane.
        console.log("ooooooooooooo")
      }
      console.log(`Office.js is now ready in ${info.host} on ${info.platform}`);
    });
  })
于 2021-04-22T05:36:15.553 回答