如何在SvelteKit中加载并使用office.js？

我尝试在SvelteKit的+page.svelte中加载并使用Office.js，做了三种尝试但都遇到问题：

尝试1：动态import加载 #

onMount(async () => {
  const module = await import('https://appsforoffice.microsoft.com/lib/1/hosted/office.js');
});

报错：Uncaught (in promise) Office Web Extension script library file name should be office.js or office.debug.js.

尝试2：全局脚本引入+window.onload #

<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
<script>
  import { browser } from '$app/environment';
  import { onMount } from 'svelte';

  let isOfficeInitialized = false;
  if (browser) {
    console.log("browser load");
    window.onload = function () {
      console.log("window onload");
      const Office = window.Office;
      Office.onReady(() => {
        console.log("Office Ready");
        isOfficeInitialized = true;
      });
    }
  }
</script>

控制台仅打印browser load，未触发window.onload。

尝试3：直接读取window.Office #

<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
<script>
  import { browser } from '$app/environment';
  import { onMount } from 'svelte';

  let isOfficeInitialized = false;
  if (browser) {
    console.log('load in browser');
    const Office = window.Office;
    if (Office) {
      console.log('Office assigned');
      Office.onReady(() => {
        console.log('Office Ready');
        isOfficeInitialized = true;
      });
    }
  }
</script>

控制台仅打印load in browser，window.Office未加载完成。

可行方案 #

步骤1：正确引入Office.js脚本 #

Office.js需要作为全局脚本加载，且要确保它在组件逻辑执行前开始加载。推荐在+layout.svelte的svelte:head中添加脚本，这样所有页面都能共享：

<!-- +layout.svelte -->
<svelte:head>
  <script 
    src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"
    type="text/javascript"
    async
  ></script>
</svelte:head>

<slot />

步骤2：在组件中监听Office初始化 #

在+page.svelte中，使用onMount确保在浏览器环境下执行，然后通过Office.onReady监听初始化完成事件，同时处理脚本可能已经加载完成的情况：

<script>
  import { browser } from '$app/environment';
  import { onMount } from 'svelte';

  let isOfficeInitialized = false;

  onMount(() => {
    if (!browser) return;

    // 处理Office.js已加载完成的情况
    if (window.Office) {
      initOffice();
    } else {
      // 监听Office.js加载完成的全局事件
      window.addEventListener('OfficeReady', initOffice);
    }

    function initOffice() {
      window.Office.onReady((info) => {
        if (info.host === 'Excel') { // 可根据需要判断宿主应用
          console.log('Office初始化完成，当前宿主：Excel');
          isOfficeInitialized = true;
          // 这里可以执行你的Office相关逻辑
        }
      });
    }
  });
</script>

{#if isOfficeInitialized}
  <p>Office已就绪，可以执行操作！</p>
{:else}
  <p>正在初始化Office...</p>
{/if}

步骤3：添加类型提示（可选） #

如果需要TypeScript类型支持，安装@types/office-js：

npm install @types/office-js --save-dev

然后在src/app.d.ts中声明全局类型：

declare global {
  interface Window {
    Office: typeof import('office-js');
  }
}

export {};

关键说明 #

• Office.js不支持ES模块动态导入，必须作为全局脚本加载。
• 不要依赖window.onload，因为SvelteKit的组件生命周期中onMount已经是DOM就绪后的时机，且Office.js本身会触发OfficeReady全局事件。
• Office.onReady是官方推荐的初始化方式，它会处理脚本加载完成和宿主应用就绪两种情况。

内容的提问来源于stack exchange，提问作者dkoeder