How to load and use office.js in Sveltekit

Question

Here are the ways I have tried in a +page.svelte

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

This seems to try to load but has the following error - "Uncaught (in promise) Office Web Extension script library file name should be office.js or office.debug.js."

Also tried

<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"> 
    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;
        });
        }
    }

console log shows "browser load" but not "window onload"

and

<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js">
    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;
            });
        }
    }

console log shows "load in browser" but not "Office assigned"

Has anyone been able to use office.js in SvelteKit? There is a post, Can you build an Excel task pane add-in with Svelte?, about using Svelte for a web add-in but I could not find if it has been done using SvelteKit. I might be going about it wrong so any input would be appreciated.

Please use three backquotes around your code. (I edited the question). — Luuk, May 12 '23 at 17:55
Thanks. I noticed that also and edited. Duplicate edits must work! — dkoeder, May 12 '23 at 18:00

score 1 · Answer 1 · answered May 13 '23 at 02:22

Here is what I currently have and it seems to be loading and working

app.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%sveltekit.assets%/favicon.png" />

        <!-- https://stackoverflow.com/questions/42642863/office-js-nullifies-browser-history-functions-breaking-history-usage -->
        <script type="text/javascript">
            // Office js deletes window.history.pushState and window.history.replaceState. Cache them and restore them
            window._historyCache = {
                replaceState: window.history.replaceState,
                pushState: window.history.pushState
            };
        </script>
        
        <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
        
        <script type="text/javascript">
            // Office js deletes window.history.pushState and window.history.replaceState. Restore them
            window.history.replaceState = window._historyCache.replaceState;
            window.history.pushState = window._historyCache.pushState;
        </script>

        <meta name="viewport" content="width=device-width" />
        %sveltekit.head%
    </head>
    <body data-sveltekit-preload-data="hover">
        <div style="display: contents">%sveltekit.body%</div>
    </body>
</html>

+page.svelte

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

    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;
            });
        }
    }

    let itemSubject = "";

    function setSubject() {
        const item = Office.context.mailbox.item;
        if (item)
        {
            itemSubject = item.subject;
        }
        else
        {
            itemSubject = "N/A";
        }
    }

</script>


<h1>Welcome to the Add-in TaskPane</h1>

<div>
    <button on:click={setSubject}>
        Current Item Subject {itemSubject}
    </button>
</div>

I am not sure this is the best way so am open to other answers.

What is the path that you are using in the manifest file for taskpane resource? Im having issues with my add-in loading in the taskpane, and struggling to find a solution — Justin Greywolf, Jul 19 '23 at 17:46

Caleb Irwin · Answer 2 · 2023-05-13T02:51:41.293

Use svelte:head

<script>
  import { onMount } from "svelte";

  onMount(() => {
    const Office = window.Office;
    Office.onReady(() => {
      console.log("Office Ready!");
    });
  });
</script>

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

Edit: This will display an error in your IDE (Office is not property of window). To fix that (and add types!) install @types/office-js.

How to load and use office.js in Sveltekit

2 Answers2