Erstellen Sie Excel-Aufgabenbereich-Add-Ins mit React

Artikel
11/17/2022
3 Minuten Lesedauer

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

Voraussetzungen

Hinweis

Wenn Sie mit Node.js oder npm nicht vertraut sind, sollten Sie damit beginnen, Ihre Entwicklungsumgebung einzurichten.

Node.js (die aktuellsteLTS-Version).
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.

Erstellen des Add-In-Projekts

Führen Sie den folgenden Befehl aus, um ein Add-In-Projekt mit dem Yeoman-Generator zu erstellen:

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 auf die angezeigten Eingabeaufforderungen entsprechend zu reagieren.

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 Task Pane project using React framework
Wählen Sie einen Skripttyp aus:TypeScript
Wie möchten Sie Ihr Add-In benennen?My Office Add-in
Welche Office-Clientanwendung möchten Sie unterstützen?Excel

Screenshot der Befehlszeilenoberfläche des Yeoman Office-Add-In-Generators, wobei der Projekttyp auf das React Framework festgelegt ist.

Nach Abschluss des Assistenten erstellt der Generator erstellt das Projekt und installiert unterstützende Node-Komponenten.

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.

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/taskpane/taskpane.html definiert das HTML-Framework des Aufgabenbereichs, und die Dateien im Ordner ./src/taskpane/components definieren die verschiedenen Teile der Aufgabenbereich-Benutzeroberfläche.
Die ./src/taskpane/taskpane.css-Datei enthält das CSS, das auf die Inhalte im Aufgabenbereich angewendet wird.
Die Datei ./src/taskpane/components/App.tsx enthält den Office-JavaScript-API-Code, der die Interaktion zwischen dem Aufgabenbereich und Excel erleichtert.

Probieren Sie es aus

Navigieren Sie zum Stammordner des Projekts.
```
cd "My Office Add-in"
```
Führen Sie die folgenden Schritte aus, um den lokalen Webserver zu starten und das Add-In querzuladen.

Hinweis

Auch von Ihnen erstellte Office-Add-Ins sollten HTTPS und nicht HTTP verwenden. Wenn Sie aufgefordert werden, ein Zertifikat zu installieren, nachdem Sie einen der folgenden Befehle ausgeführt haben, akzeptieren Sie die Eingabeaufforderung, um das Zertifikat zu installieren, das der Yeoman-Generator bereitstellt. Möglicherweise müssen Sie Ihre Eingabeaufforderung oder Ihr Terminal auch als Administrator ausführen, damit die Änderungen vorgenommen werden können.
Tipp

Wenn Sie Ihr Add-In auf einem Mac testen, führen Sie den folgenden Befehl aus, bevor Sie fortfahren. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet.
```
npm run dev-server
```
- Führen Sie zum Testen Ihres Add-Ins in Excel den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Dadurch wird der lokale Webserver gestartet und Excel mit geladenem Add-In geöffnet.
```
npm start
```
- Führen Sie zum Testen Ihres Add-Ins in Excel in einem Browser den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet. Ersetzen Sie „{url}“ durch die URL eines Excel-Dokuments auf Ihrem OneDrive oder einer SharePoint-Bibliothek, für die Sie über Berechtigungen verfügen.
```
npm run start:web -- --document {url}
```
  Es folgen einige Beispiele.
  - npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
  - npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
  - npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP
  Hinweis
  
  Wenn Sie auf einem Mac entwickeln, schließen Sie die {url} in einfache Anführungszeichen ein. Tun Sie dies nicht unter Windows.
  
  Wenn Ihr Add-In das Dokument nicht querladen wird, laden Sie es manuell quer, indem Sie die Anweisungen unter Manuelles Querladen von Add-Ins in Office im Web befolgen.
Wählen Sie in Excel die Registerkarte Start und dann die Schaltfläche Aufgabenbereich anzeigen im Menüband aus, um den Add-In-Aufgabenbereich zu öffnen.
Wählen Sie einen beliebigen Zellbereich im Arbeitsblatt.
Wählen Sie am unteren Rand des Aufgabenbereichs den Link Ausführen, um die Farbe für den ausgewählten Bereich auf Gelb festzulegen.

Nächste Schritte

Herzlichen Glückwunsch, Sie haben erfolgreich ein Excel-Aufgabenbereich-Add-In mithilfe von React 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