时间戳

首页 > 解决方案 > Office js 多页加载项导航

excel - Office js 多页加载项导航

问题描述

我最近开始为 Microsoft Excel 开发一个插件。我是节点 js 的新手。文档和在线教程非常适合单页加载项，但对于具有多个页面且用户可以导航到这些页面的加载项，我找不到任何帮助。

我尝试了多种方式，使用快速路线，它不会呈现页面，

尽管每个文件都包含教程中提到的 Office.OnReady 调用。

我知道我在这里做错了，但不能指望它。对此的任何帮助将不胜感激。

谢谢

编辑：location.href 确实有效，但将其用于导航是一种好习惯吗？

这是js代码：

   Office.onReady(info => {
  if (info.host === Office.HostType.Excel) {

    // Determine if the user's version of Office supports all the Office.js APIs that are used in the tutorial.
    if (!Office.context.requirements.isSetSupported('ExcelApi', '1.7')) {
      console.log('Sorry. The tutorial add-in uses Excel.js APIs that are not available in your version of Office.');
    }

    // Assign event handlers and other initialization logic.
    document.getElementById("app-body").style.display = "flex",
    document.getElementById("login").onclick = authenticate
  }
});

function get_user_input() {
  var platform_url = document.getElementById("platform-url").value
  var username = document.getElementById("username").value
  var password = document.getElementById("password").value

  return [platform_url, username, password]
}

function authenticate(request, response) {
  var input = get_user_input()

  // perform authentication logic here

  window.location.href = "https://localhost:3000/index.html";
}

这是进行调用的相关 HTML

<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. -->
<!-- This file shows how to design a first-run page that provides a welcome screen to the user about the features of the add-in. -->

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Exceljs</title>

    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>

    <!-- For more information on Office UI Fabric, visit https://developer.microsoft.com/fabric. -->
    <link rel="stylesheet"
        href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />

    <!-- Template styles -->
    <link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body class="ms-font-m ms-welcome ms-Fabric">
    <header class="ms-welcome__header ms-bgColor-neutralLighter">
        <img width="90" height="90" src="../../assets/logo.png" alt="logo" title="logo" />
    </header>
    <main id="app-body" class="ms-welcome__main" style="display: none;">
        <!-- URL section -->
        <div class="form-group">
            <label>Platform URL:</label>
            <input type="text" id="platform-url" value="" />
        </div>

        <div class="form-group">
            <label>Username:</label>
            <input type="text" id="username" value="" />
        </div>
        <div class="form-group">
            <label>Password:</label>
            <input type="password" id="password" value="" />
        </div>
        <!-- Button -->
        <div class="form-action">
            <button class="ms-Button" id="login">Login</button><br/><br/>
        </div>
        <div>
            <label class="error-banner" id="error-banner"></label>
        </div>
    </main>
</body>

</html>

标签： exceloffice-jsoffice-addinsexcel-addins

解决方案

推荐阅读