以下是我在 +page.svelte 中尝试过的方法
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.”
也试过
<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;
});
}
}
控制台日志显示“浏览器加载”而不是“窗口加载”
和
<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;
});
}
}
控制台日志显示“在浏览器中加载”而不是“办公室分配”
有人能在 SvelteKit 中使用 office.js 吗？有一篇文章，您可以使用 Svelte 构建 Excel 任务窗格加载项吗？，关于将 Svelte 用于 Web 加载项，但我找不到它是否已使用 SvelteKit 完成。我可能会做错，所以任何输入将不胜感激。
这是我目前拥有的，它似乎正在加载和工作
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>
我不确定这是最好的方法，所以对其他答案持开放态度。
使用
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>
编辑：这将在您的 IDE 中显示错误（
Officewindow@types/office-js