Erstellen Sie Excel-Aufgabenbereich-Add-Ins mit Vue

  • Artikel

In diesem Artikel werden Sie schrittweise durch den Prozess der Erstellung eines Excel-Aufgabenbereich-Add-Ins mithilfe von Vue und der Excel-JavaScript-API geführt.

Voraussetzungen

  • Node.js (die aktuellsteLTS-Version). Besuchen Sie die Node.js Website , um die richtige Version für Ihr Betriebssystem herunterzuladen und zu installieren.

  • Die neueste Version von Yeoman und des Yeoman-Generators für Office-Add-Ins. Um diese Tools global zu installieren, führen Sie den folgenden Befehl an der Eingabeaufforderung aus.

    npm install -g yo generator-office

    Hinweis

    Selbst wenn Sie bereits den Yeoman-Generator installiert haben, empfehlen wir Ihnen, das npm-Paket auf die neueste Version zu aktualisieren.

  • Office in Verbindung mit einem Microsoft 365-Abonnement (einschließlich Office im Internet).

    Hinweis

    Wenn Sie noch nicht über Office verfügen, können Sie sich über das Microsoft 365-Entwicklerprogramm für ein Microsoft 365 E5-Entwicklerabonnement qualifizieren. Weitere Informationen finden Sie in den häufig gestellten Fragen. Alternativ können Sie sich für eine kostenlose 1-monatige Testversion registrieren oder einen Microsoft 365-Plan erwerben.

  • Installieren Sie Vue CLI global. Führen Sie im Terminal den folgenden Befehl aus.

    npm install -g @vue/cli

Generieren einer neuen Vue-App

Verwenden Sie die Vue CLI zum Generieren einer neuen Vue-App.

vue create my-add-in

Wählen Sie dann die Voreinstellung Default für „Vue 3“ aus (wählen Sie „Vue 2“, wenn Sie dies bevorzugen).

Generieren der Manifestdatei

Jedes Add-In benötigt eine Manifestdatei zur Definition der Einstellungen und Funktionen.

  1. Navigieren Sie zu Ihrem App-Ordner.

    cd my-add-in

  2. Verwenden Sie den Yeoman-Generator, um die Manifestdatei für das Add-In zu generieren.

    yo office

    Hinweis

    Wenn Sie den yo office-Befehl ausführen, werden möglicherweise Eingabeaufforderungen zu den Richtlinien für die Datensammlung von Yeoman und den CLI-Tools des Office-Add-In angezeigt. Verwenden Sie die bereitgestellten Informationen, um entsprechend auf die Eingabeaufforderungen zu reagieren. Falls Sie auf die zweite Eingabeaufforderung hin Beenden auswählen, müssen Sie den yo office-Befehl erneut ausführen, wenn Sie zum Erstellen des Add-In-Projekts bereit sind.

    Wenn Sie dazu aufgefordert werden, geben Sie die folgenden Informationen an, um das Add-In-Projekt zu erstellen.

    • Wählen Sie einen Projekttyp aus:Office Add-in project containing the manifest only
    • Wie möchten Sie Ihr Add-In benennen?My Office Add-in
    • Welche Office-Clientanwendung möchten Sie unterstützen?Excel

    Die Yeoman Generator für Office-Add-Ins-Befehlszeilenschnittstelle, wobei der Projekttyp auf Nur Manifest festgelegt ist.

Nach Abschluss des Vorgangs erstellt der Assistent einen Ordner Mein Office-Add-In, der eine Datei manifest.xml enthält. Sie verwenden das Manifest zum Querladen und Testen Ihres Add-Ins.

Tipp

Die vom Yeoman-Generator nach der Erstellung des Add-In-Projekts unter Nächste Schritte bereitgestellten Anweisungen können Sie ignorieren. Die Schritt-für-Schritt-Anleitungen in diesem Artikel enthalten alle Anweisungen, die Sie zum Durchführen dieses Tutorials benötigen.

Sichern der App

Die Verwendung eines HTTPS-Endpunkts für Ihr Add-In ist zwar nicht in allen Add-In-Szenarien streng erforderlich, wird aber unbedingt empfohlen. Add-Ins, die nicht SSL-gesichert (HTTPS) sind, generieren Warnungen zu unsicheren Inhalten und Fehlern während der Verwendung. Wenn Sie ihr Add-In in Office im Web ausführen oder in AppSource veröffentlichen möchten, muss es SSL-gesichert sein. Wenn Ihr Add-In auf externe Daten und Dienste zugreift, sollte es SSL-gesichert sein, damit die Daten bei der Übertragung geschützt sind. Selbstsignierte Zertifikate können für die Entwicklung und für Tests verwendet werden, sofern das Zertifikat auf dem lokalen Computer als vertrauenswürdig festgelegt ist.

  1. Aktivieren Sie HTTPS für Ihre App. Erstellen Sie im Stammordner des Vue-Projekts eine Datei vue.config.js mit den folgenden Inhalten.

    const fs = require("fs");
const path = require("path");
const homedir = require('os').homedir()

module.exports = {
  devServer: {
    port: 3000,
    https: {
      key: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/localhost.key`)),
      cert: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/localhost.crt`)),
      ca: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/ca.crt`)),
     }
   }
}

  2. Installieren Sie die Zertifikate des Add-Ins erneut.

    npx office-addin-dev-certs install

Erkunden des Projekts

Das Add-In-Projekt, das Sie mit dem Yeoman-Generator erstellt haben, enthält Beispielcode für ein einfaches Aufgabenbereich-Add-In. Wenn Sie die Schlüsselkomponenten Ihres Add-In-Projekts erkunden möchten, öffnen Sie das Projekt in Ihrem Code-Editor, und überprüfen Sie die unten aufgeführten Dateien. Wenn Sie bereit sind, das Add-In zu testen, fahren Sie mit dem nächsten Abschnitt fort.

  • Die manifest.xml-Datei im Stammverzeichnis des Projekts definiert die Einstellungen und Funktionen des Add-Ins. Weitere Informationen zur Datei manifest.xml finden Sie unter XML-Manifest für Office-Add-Ins.
  • Die Datei ./src/App.vue enthält das HTML-Markup für den Aufgabenbereich, das auf den Inhalt im Aufgabenbereich angewendete CSS sowie den Office-JavaScript-API-Code, der die Interaktion zwischen dem Aufgabenbereich und Excel erleichtert.

Aktualisieren der App

  1. Öffnen Sie die Datei ./public/index.html, und fügen Sie das folgende <script>-Tag direkt vor dem </head>-Tag hinzu.

    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

  2. Öffnen Sie manifest.xml , und suchen Sie die <bt:Urls> Tags im <Ressourcentag> . Suchen Sie das <bt:Url>-Tag mit der ID Taskpane.Url, und aktualisieren Sie dessen DefaultValue-Attribut. Der neue DefaultValue lautet https://localhost:3000/index.html. Das gesamte aktualisierte Tag sollte der folgenden Zeile entsprechen.

    <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/index.html" />

  3. Öffnen Sie ./src/main.js, und ersetzen Sie den Inhalt durch den folgenden Code.

    import { createApp } from 'vue'
import App from './App.vue'

window.Office.onReady(() => {
    createApp(App).mount('#app');
});

  4. Öffnen Sie ./src/App.vue, und ersetzen Sie den Dateiinhalt durch den folgenden Code.

    <template>
  <div id="app">
    <div class="content">
      <div class="content-header">
        <div class="padding">
          <h1>Welcome</h1>
        </div>
      </div>
      <div class="content-main">
        <div class="padding">
          <p>
            Choose the button below to set the color of the selected range to
            green.
          </p>
          <br />
          <h3>Try it out</h3>
          <button @click="onSetColor">Set color</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'App',
    methods: {
      onSetColor() {
        window.Excel.run(async context => {
          const range = context.workbook.getSelectedRange();
          range.format.fill.color = 'green';
          await context.sync();
        });
      }
    }
  };
</script>

<style>
  .content-header {
    background: #2a8dd4;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    overflow: hidden;
  }

  .content-main {
    background: #fff;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
  }

  .padding {
    padding: 15px;
  }
</style>

Starten des Entwicklungsservers

  1. Starten Sie den Entwicklungsserver.

    npm run serve

  2. Navigieren Sie in einem Webbrowser zu https://localhost:3000 (denken Sie an das https). Falls die Seite unter https://localhost:3000 leer und ohne Zertifikatfehler ist, bedeutet dies, dass Sie funktioniert. Die Vue-App wird nach der Initialisierung von Office bereitgestellt, sodass nur Elemente in einer Excel-Umgebung dargestellt werden.

Probieren Sie es aus

  1. Führen Sie Ihr Add-In aus, und laden Sie das Add-In in Excel quer. Befolgen Sie die Anweisungen für die Plattform, die Sie verwenden möchten:

  2. Öffnen Sie den Aufgabenbereich des Add-Ins in Excel. Wählen Sie auf der Registerkarte Start die Schaltfläche Aufgabenbereich anzeigen aus.

    Das Excel Startmenü mit hervorgehobener Schaltfläche Aufgabenbereich anzeigen.

  3. Wählen Sie einen beliebigen Zellbereich im Arbeitsblatt.

  4. Legen Sie die Farbe des ausgewählten Bereichs auf Grün fest. Wählen Sie im Aufgabenbereich Ihres Add-Ins die Schaltfläche Farbe festlegen aus.

    Der Add-In-Aufgabenbereich wird in Excel geöffnet.

Nächste Schritte

Herzlichen Glückwunsch, Sie haben erfolgreich ein Excel-Aufgabenbereich-Add-In mithilfe von Vue erstellt. Erfahren Sie als Nächstes mehr über die Funktionen eines Excel-Add-Ins, und erstellen Sie ein komplexeres Add-In mithilfe des Lernprogramms zum Excel-Add-In.

Lernprogramm zum Excel-Add-In

Problembehandlung

Siehe auch