In Word-Dokumenten mit HTML, Bildern und Tabellen arbeiten

  • 9 Minuten

In dieser Lektion lernen Sie, wie Sie mit HTML, Bildern und Tabellen in Microsoft Word-Dokumenten unter Verwendung der Office JavaScript-API arbeiten.

Arbeiten mit HTML in Word-Dokumenten

Viele Entwickler finden es einfacher, mit einem Word-Dokument als HTML zu interagieren, anstatt Open Office XML (OOXML) zu verwenden. Open Office XML scheint für Entwickler eher kryptisch und schwierig zu entschlüsseln zu sein.

Mit Office.js können Entwickler Inhalte in einem Word-Dokument als vertrautes HTML schreiben oder lesen. Der Textkörper, Absätze und Bereiche des Dokuments können alle als HTML-Code mit den getHtml()- und insertHtml()-Methoden in der JavaScript-API von Word bearbeitet werden.

Der folgende Code schreibt einen HTML-Block ans Ende eines Absatzes. Derselbe Code kann auch für den Hauptteil des Dokuments und einen Bereich von Inhalten verwendet werden:

paragraph.insertHtml('<p style="font-family: verdana;">Inserted HTML.</p><p>Another paragraph</p>', "End");

Wenn Sie den Inhalt eines Absatzes als HTML-Code abrufen möchten, verwenden Sie die getHtml()-Methode, wie im folgenden Code gezeigt:

const html = paragraph.getHtml();

Arbeiten mit Bildern in Word-Dokumenten

Das Arbeiten mit Bildern kann in JavaScript eine Herausforderung darstellen, doch Office.js erlaubt es, Bilder als base64-codierte Zeichenfolgen zu bearbeiten. Bilder können in den Textkörper, in Absätze oder Bereiche eines Dokuments eingefügt werden. Jedes dieser Objekte besitzt eine inlinePictures-Sammlung, in die Entwickler schreiben können.

Office.js ermöglicht es Ihnen, zu ändern, wie Bilder im Dokument angezeigt werden, indem Sie Eigenschaften wie lockAspectRatio, height und width unter anderen verwenden.

Der folgende Code gibt eine Sammlung aller Inlinebilder im Textkörper des Dokuments zurück:

const images = body.inlinePictures;

Verwenden Sie zum Einfügen eines Bilds in den Textkörper des Dokuments die insertInlinePictureFromBase64()-Methode, wobei Sie die base64-Zeichenfolgendarstellung des Bilds übergeben und ob das Bild dem Start oder End der Sammlung hinzugefügt werden soll:

const base64Image = "..";
context.document.body.insertInlinePictureFromBase64(base64Image, "End");

Sie können die base64-codierte Zeichenfolge eines Bilds auch mithilfe von getBase64ImageSrc() in ein Dokument einfügen, wie der folgende Code zeigt:

const someInlinePicture = body.inlinePictures[0];
const base64 = someInlinePicture.getBase64ImageSrc();

Schließlich können Sie das Seitenverhältnis eines Bilds fixieren und die Abmessungen des Bilds mithilfe der bereitgestellten Eigenschaften festlegen, z. B. width:

someInlinePicture.lockAspectRatio = true;
someInlinePicture.width = 400;

Arbeiten mit Tabellen in Word-Dokumenten

Mit Office.js können Entwickler eine Tabelle relativ zu Absätzen, Bereichen und dem Textkörper eines Dokuments einfügen.

Die insertTable()-Methode gibt die Abmessungen der Tabelle sowie den Ort an, an dem sie eingefügt werden soll. Daten werden der Tabelle hinzugefügt, indem ein zweidimensionales Array von Werten an die insertTable()-Methode übergeben wird.

Die Eigenschaft tables ermöglicht den Zugriff auf Tabellen und deren Manipulation in JavaScript über die Objekte body und range.

Wichtig

Während eine Tabelle relativ zu einem Absatz in das Dokument eingefügt werden kann, ist sie innerhalb des Absatzes nicht vorhanden. Dies unterscheidet sich von den im vorherigen Abschnitt behandelten Inlinebildern, die zu Absätzen hinzugefügt werden.

Der folgende Code zeigt, wie Sie einen Verweis auf alle Tabellen im Text des Dokuments erhalten.

const originalRange = context.document.body.tables;

Hinweis

Während im vorherigen Code die body-Eigenschaft für ein Dokument verwendet wird, ist in Bereichen außerdem die tables-Sammlung vorhanden.

Wenn Sie eine Tabelle mit drei Spalten und drei Datenzeilen hinzufügen möchten, erstellen Sie zuerst ein zweidimensionales Array, das den Inhalt enthält, und nehmen dieses dann als eines der Argumente der insertTable()-Methode auf.

const tableData = [
  ["Name", "ID", "Birth City"],
  ["Bob", "434", "Chicago"],
  ["Sue", "719", "Havana"],
];
paragraph.insertTable(3, 3, "After", tableData);

Das table-Objekt enthält Eigenschaften, mit denen die Anzahl der Zeilen in einer Tabelle mithilfe der rowCount-Eigenschaft und der Inhalt der Tabelle mithilfe der values-Eigenschaft abgerufen werden kann:

const rows = table.rowCount;
const array2D = table.values;

Zusammenfassung

In dieser Lektion haben Sie erfahren, wie Sie mit HTML, Bildern und Tabellen in Microsoft Word-Dokumenten unter Verwendung der Office JavaScript-API arbeiten.