# React DOCX Viewer: echte Seiten, Kommentare, Änderungen > Bau einen React DOCX Viewer mit echten Seiten, Kopfzeilen, Kommentaren und Änderungen direkt im Browser, und erfahre, wann Editor oder PDF besser passen. - Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI - Veröffentlicht: 16. Okt. 2026 - Kategorie: [Komponenten-Guides](https://wingo-ui.com/de/blog/category/components) - Lesezeit: 9 Min. - Kanonische URL: https://wingo-ui.com/de/blog/react-docx-viewer - Englische Fassung: https://wingo-ui.com/blog/react-docx-viewer ## Kurz gesagt Ein guter React DOCX Viewer liest die .docx-Datei im Browser, setzt sie als echte Seiten mit Kopfzeilen, Fußzeilen und Seitenzahlen und zeigt die Kommentare und nachverfolgten Änderungen der Datei neben dem Text. Der DOCX Viewer von Wingo UI macht das auf Basis des Open-Source-Parsers docx-preview, die Datei geht also nie an einen fremden Dienst. Nimm einen DOCX Editor, wenn Leute die Datei ändern und wieder als .docx speichern müssen, und wandle sie in ein PDF um, wenn jede Seite für alle an derselben Stelle umbrechen muss. Jemand lädt ein Angebot als Word-Datei hoch, und deine App soll es so zeigen, wie es in Word aussieht: Seiten, der Briefkopf in der Kopfzeile, Seitenzahlen in der Fußzeile und die Kommentare der Person, die es geprüft hat. Ein Download-Link oder reiner Text verliert all das. Ein React DOCX Viewer muss die Seiten aus dem XML der Datei neu aufbauen. Schwierig sind dabei die Seitenumbrüche, Felder wie Seitenzahlen und die Markierungen aus der Überarbeitung. Die Beispiele nutzen den [DOCX Viewer](https://wingo-ui.com/components/docx-viewer) von Wingo UI, der Bibliothek, die wir bauen. Wir sind also nicht neutral; Fakten von außen verlinken auf ihre Quellen. ## Welche Wege gibt es, ein Word-Dokument in React anzuzeigen? Um ein Word-Dokument in React anzuzeigen, kannst du den Online-Viewer von Microsoft einbetten, die Datei im Browser mit Mammoth oder docx-preview lesen, ein kommerzielles SDK lizenzieren oder die Datei vorher in ein PDF umwandeln. Die fünf Zeilen unten unterscheiden sich darin, wohin die Datei geht und wie nah das Ergebnis an Word herankommt. Die Fakten stammen von der jeweiligen Projektseite, geprüft am 16. Oktober 2026. | Ansatz | Wohin die Datei geht | Was du bekommst | Haken | |---|---|---|---| | Office-Viewer von Microsoft im iframe | Server von Microsoft | Das Rendering von Microsoft selbst | [react-doc-viewer](https://github.com/cyntler/react-doc-viewer) nutzt diesen Dienst für .doc und .docx und unterstützt nur öffentliche Datei-URLs | | [Mammoth](https://github.com/mwilliamson/mammoth.js) | Bleibt im Browser | Sauberes, semantisches HTML | Lässt visuelles Styling bewusst weg; Tabellenrahmen fallen weg, Kommentare sind standardmäßig aus | | [docx-preview](https://github.com/VolodymyrBaydalka/docxjs) (Apache-2.0) | Bleibt im Browser | HTML, das das Aussehen behält, mit Kopfzeilen, Fußzeilen und Fußnoten | Seiten brechen nur dort um, wo die Datei es vorgibt; Kommentare und nachverfolgte Änderungen sind experimentell und standardmäßig aus | | Kommerzielle SDKs ([Apryse WebViewer](https://apryse.com/blog/webviewer/how-view-documents-in-a-react-app/), [Syncfusion](https://github.com/SyncfusionExamples/Build-react-docx-viewer-syncfusion)) | Apryse rendert im Browser; Syncfusion schickt sie an seinen serverseitigen Dienst | Hohe Darstellungstreue, viele Formate | Kostenpflichtige Lizenzen ([die Preise von Apryse](https://apryse.com/pricing) gibt es auf Anfrage, die Einstiegspläne beginnen laut Anbieter schon ab 1.500 $); der Document Editor von Syncfusion braucht dieses Backend | | In PDF umwandeln, dann das PDF zeigen | Einmal auf deinen Server | Überall dasselbe Layout | Nur zum Lesen; Kommentare als echte Daten und das Bearbeiten gehen verloren | Die iframe-Zeile ist die, die Teams erst später überrascht: Der Dienst von Microsoft holt die Datei selbst ab. Eine private Datei hinter deinem Login kann diesen Weg also nicht nehmen. Für private Dokumente sind die Parser im Browser die realistische Wahl. Mammoth passt besser, wenn du den Text in deiner eigenen Typografie willst (ein Artikel im Hilfe-Center, ein Blog-Import) und dir die Seite egal ist. Für eine schnelle React DOCX Preview liefert dir docx-preview allein gerendertes HTML mit einem Aufruf. Setz die Optionen selbst: Standardmäßig ignoriert die Bibliothek die Seitenumbrüche, die Word zuletzt gerendert hat (`ignoreLastRenderedPageBreak: true`), und lässt Kommentare und Änderungen weg. ```ts import { renderAsync } from "docx-preview" // file: ein Blob oder ArrayBuffer, container: ein leeres div await renderAsync(file, container, undefined, { ignoreLastRenderedPageBreak: false, renderComments: true, renderChanges: true, }) ``` Der DOCX Viewer startet docx-preview mit genau diesen Flags und ergänzt, was die Bibliothek weglässt. Laut README ist ein Seitenumbruch in Echtzeit nicht implementiert, also misst der Viewer jede Seite und teilt eine, die zu lang wird. Er füllt außerdem die Felder PAGE und NUMPAGES aus, die docx-preview zusammen mit allen anderen Feldern verwirft. So bleibt „Seite 3 von 12“ in einer Fußzeile erhalten. Dazu kommen Seiten-Thumbnails, eine Gliederung aus den Überschriften, eine Suche und Karten für Kommentare und Änderungen. ## Wie baue ich einen React DOCX Viewer in eine Next.js-App ein? Installier die Komponente mit der CLI und gib ihr eine URL. Die CLI bringt docx-preview und die Teile von Wingo UI mit, auf denen der Viewer aufbaut, etwa Button, Dropdown Menu, Popover und Tooltip: ```bash npx wingo-ui@latest add docx-viewer ``` Die Komponente ist eine Client-Komponente, eine Server-Seite kann sie also direkt rendern. `src` nimmt eine URL vom selben Origin, eine URL mit CORS oder eine `blob:`-URL: ```tsx // app/proposals/[id]/page.tsx import { DocxViewer } from "@/components/ui/docx-viewer" export default function ProposalPage() { return ( ) } ``` docx-preview und JSZip (etwa 190 KB) laden mit dem ersten Viewer auf der Seite und nicht mit dem Bundle deiner Route. Eine Seite, die nur manchmal ein Dokument zeigt, zahlt den Parser also nicht vorab. `defaultZoom="automatic"` (der Standard) passt die Seite an die Breite an, höchstens bis 100 %. So öffnet sich eine Seite nie riesig auf einem großen Monitor oder abgeschnitten auf dem Smartphone. Für eine Datei, die jemand auf dem eigenen Gerät auswählt, brauchst du keinen Upload. Das ⋯-Menü der Toolbar öffnet eine andere .docx, eine auf den Viewer gezogene Datei öffnet sich ebenfalls, und `onDocxUpload` gibt dir das `File`, wenn du es speichern willst. In Ansichten, die nur zum Lesen da sind, schaltest du das mit `showUpload={false}` ab. ## Kann ein React DOCX Viewer Kommentare und nachverfolgte Änderungen zeigen? Ja: Der DOCX Viewer zeigt Kommentare standardmäßig und nachverfolgte Änderungen, wenn du sie einschaltest. Kommentare (`defaultCommentsVisible`, true) stehen als Karten in einer Spalte neben den Seiten, die kommentierte Stelle ist hervorgehoben. Nachverfolgte Änderungen sind standardmäßig aus (`defaultChangesVisible={false}`), das Dokument liest sich also, als wären alle Änderungen angenommen. Schaltest du sie ein, sind Einfügungen grün unterstrichen und Löschungen rot durchgestrichen, jeweils mit Autor und Datum. Probier es unten aus: Das Beispielangebot öffnet sich mit sichtbaren Änderungen. Klick auf eine Kommentarkarte oder den hervorgehobenen Text, um ihn auszuwählen, und blende dann Kommentare oder Änderungen mit den Schaltern in der Toolbar aus. > Live-Demo (DOCX Viewer): Das Angebot öffnet sich mit markierten Änderungen und Kommentaren neben den Seiten: Klick auf eine Karte oder den hervorgehobenen Text und schalte dann Kommentare und Änderungen in der Toolbar um. Probier sie unter [DOCX Viewer](https://wingo-ui.com/components/docx-viewer) aus und installier sie mit `npx wingo-ui@latest add docx-viewer`. `onAnnotationClick` meldet den Kommentar oder die Änderung, die jemand auswählt. `onDocumentLoadSuccess` gibt dir alle gleich zu Beginn (`annotations`, jeweils mit `kind`, `author`, `date`, `text`, `anchorText` und `pageNumber`). Das reicht für eine Review-Checkliste neben dem Dokument. ### Ein Inhaltsverzeichnis aus der Gliederung bauen Derselbe Callback liefert `outline`, die Überschriften des Dokuments mit Ebene und Seite. Kombinier das mit `scrollToHeading` aus der Ref und mit `onActivePageChange`, und du bekommst eine Liste der Abschnitte, die durch das Dokument springt und den sichtbaren Abschnitt markiert: ```tsx "use client" import { useRef, useState } from "react" import { DocxViewer, type DocxViewerHandle, type DocxViewerHeading } from "@/components/ui/docx-viewer" export function ProposalWithOutline() { const viewer = useRef(null) const [outline, setOutline] = useState([]) const [page, setPage] = useState(1) const current = outline.filter((heading) => heading.pageNumber <= page).at(-1) return (
setOutline(doc.outline)} onActivePageChange={setPage} />
) } ``` Zwei weitere Props solltest du kennen. `toolbarActions` setzt deine eigenen Buttons ans Ende der Toolbar (Freigeben, Teilen, Zur Unterschrift senden). `renderPageOverlay` zeichnet über jede Seite, mit Seitengröße und Skalierung beim aktuellen Zoom. Ein Stempel oder ein Unterschriftsfeld, das du in Prozent platzierst, bleibt so beim Zoomen an seiner Stelle. ## Wie funktioniert ein DOCX Viewer auf dem Smartphone? Der DOCX Viewer passt sich an seine eigene Breite an, gemessen mit einem ResizeObserver. In einem schmalen Seitenpanel verhält er sich also genauso wie auf dem Smartphone. Unter 720px Breite wandern die Schalter für Kommentare, Änderungen und dunkle Seiten sowie Download ins ⋯-Menü. Unter 520px startet die Thumbnail-Leiste geschlossen und gleitet beim Öffnen über die Seiten, und unter 440px landen auch die Zoomstufen im Menü. Wenn die Seite keinen Platz für die Kommentarspalte lässt, werden Kommentare zu Markierungen am Seitenrand. Sie öffnen die Karte in einem Popover, auf dem Smartphone in einem Bottom Sheet. Pinch zoomt um deine Finger herum, und Strg oder ⌘ plus Scrollen macht dasselbe mit der Maus. ## Wann brauchst du stattdessen einen React DOCX Editor? Du brauchst einen React DOCX Editor, wenn Leute den Text ändern und eine Word-Datei zurückgeben müssen. Ein Viewer reicht, wenn sie die Datei lesen, freigeben oder woanders besprechen. Der [DOCX Editor](https://wingo-ui.com/components/docx-editor) öffnet dieselbe Art von Datei als echte Seiten und speichert eine .docx: ```tsx "use client" import { DocxEditor } from "@/components/ui/docx-editor" export function AgreementEditor() { return ( { const body = new FormData() body.append("file", blob, fileName) await fetch("/api/documents", { method: "POST", body }) }} /> ) } ``` `onSave` zeigt einen Speichern-Button und belegt Strg oder ⌘+S. Gibst du ein Promise zurück, zeigt der Editor erst „Wird gespeichert“, dann „Gespeichert“ oder den Fehler. `defaultSuggesting` öffnet im Modus „Vorschlagen“: Jede Bearbeitung wird zu einer nachverfolgten Änderung unter `author`, und Prüfende nehmen sie über die Änderungskarten an oder lehnen sie ab. Installier ihn mit `npx wingo-ui@latest add docx-editor`. Er baut auf ProseMirror und der Layout-Engine `@eigenpal/docx-editor-core` (Apache-2.0) auf; beides lädt wie der Parser des Viewers erst bei Bedarf. Markier unten etwas Text und füg einen Kommentar hinzu, oder stell das Modus-Menü auf Vorschlagen und tipp los: Die Bearbeitung erscheint als nachverfolgte Änderung, die du annehmen oder ablehnen kannst. > Live-Demo (DOCX Editor): Klick in den Vertrag und tipp, markier Text für einen Kommentar oder stell das Modus-Menü auf Vorschlagen, damit deine Bearbeitungen zu nachverfolgten Änderungen werden. Probier sie unter [DOCX Editor](https://wingo-ui.com/components/docx-editor) aus und installier sie mit `npx wingo-ui@latest add docx-editor`. Eine Grenze solltest du einplanen: Kopf- und Fußzeilen lassen sich im Editor nicht bearbeiten. Ihre ursprünglichen Teile gehen unverändert in die gespeicherte Datei zurück. Briefköpfe und Felder für Seitenzahlen bleiben so intakt, aber eine Änderung am Text der Fußzeile braucht weiterhin Word. ## Wann solltest du die Word-Datei stattdessen in ein PDF umwandeln? Wandle sie in ein PDF um, wenn jede Seite für alle an derselben Stelle umbrechen muss, denn ein Browser baut das Layout einer .docx neu auf, statt es aus der Datei zu lesen. Eine .docx-Datei speichert für die meisten Seiten nicht, wo Word umbricht; Word berechnet das aus den installierten Schriften und seiner eigenen Layout-Engine. docx-preview bricht Seiten an expliziten Seitenumbrüchen, Abschnittswechseln und den zuletzt von Word gerenderten Umbrüchen um, und der DOCX Viewer teilt eine Seite, die dann noch zu lang ist, an ihren Absätzen und Tabellenzeilen. Das kommt nah heran, aber eine fehlende Schrift oder ein schwebendes Textfeld kann trotzdem eine Zeile auf die nächste Seite schieben. Wandle in ein PDF um, wenn dieser Unterschied zählt: - **Unterschriebene oder rechtliche Dokumente**, bei denen Seite 4 für alle Seite 4 sein muss. - **Druck und Archive**, wenn die Datei fertig ist und niemand sie mehr bearbeitet. - **Komplexe Layouts**: schwebende Formen, Textfelder und mehrspaltige Designs, die HTML anders setzt. - **Alte .doc-Dateien**, die die Parser im Browser nicht lesen. LibreOffice wandelt auf dem Server über die Kommandozeile um ([Startparameter](https://help.libreoffice.org/latest/en-US/text/shared/guide/start_parameters.html)): ```bash soffice --headless --convert-to pdf --outdir ./converted contract.docx ``` Zeig das Ergebnis dann im [PDF Viewer](https://wingo-ui.com/components/pdf-viewer). Er hat eine ähnliche Toolbar, Thumbnails und eine Suche, dazu Markierungen mit Notizen, die als echte PDF-Annotationen exportiert werden (unser Guide zum [React PDF Viewer](https://wingo-ui.com/de/blog/react-pdf-viewer) zeigt ihn im Detail). Ein häufiges Setup behält beides: die .docx im DOCX Viewer, solange ein Dokument geprüft wird, und das PDF, sobald es unterschrieben ist. Präsentationen folgen derselben Logik mit dem [PPTX Viewer](https://wingo-ui.com/components/pptx-viewer). ## Was geht schief, wenn du DOCX-Dateien im Browser renderst? Plan vor dem Launch vier Dinge ein: Dateien von anderen Origins, fehlende Schriften, sehr lange Dokumente und ungeprüfte Uploads. - **CORS.** Eine Datei auf einem anderen Origin braucht `Access-Control-Allow-Origin`, oder du holst sie auf deinem Server und lieferst sie von deiner Domain aus. Für eine Datei im Speicher gibt dir `URL.createObjectURL(file)` eine `blob:`-URL, die du als `src` übergibst. - **Schriften.** Fehlt Calibri auf dem Gerät, fällt der Text auf eine ähnliche generische Schrift zurück, und Zeilen brechen etwas anders um. Der Viewer behält Schriften, die in die Datei eingebettet sind. Der Editor hat das Prop `webFonts`, das metrisch kompatible Schriften (Carlito für Calibri, Caladea für Cambria) von Google Fonts lädt. Es ist standardmäßig aus, es gibt also keine Anfragen an Dritte, solange du es nicht einschaltest. - **Lange Dokumente.** Bei mehr als 24 Seiten setzt der Viewer `content-visibility: auto` auf jede Seite, der Browser überspringt also Layout und Paint für Seiten außerhalb des Bildschirms. Die Suche deckt trotzdem die ganze Datei ab, denn sie indexiert den Text und nicht das, was gezeichnet wird. - **Uploads.** Wenn Leute dir die Datei zuerst schicken, prüf Typ und Größe, bevor du sie speicherst. Unser [Guide zum React File Upload](https://wingo-ui.com/de/blog/react-file-upload) beschreibt diesen Ablauf, und die Komponente [File Upload](https://wingo-ui.com/components/file-upload) übernimmt Auswahl und Fortschritt. ## Wie geht es weiter? Installier den Viewer mit `npx wingo-ui@latest add docx-viewer` und setz `src` auf eine deiner eigenen Word-Dateien, am besten eine mit Tabellen, einer Kopfzeile und ein paar Kommentaren, denn genau dort unterscheiden sich Renderer. DOCX Viewer, DOCX Editor und PDF Viewer gehören zu Wingo UI Pro; was enthalten ist, steht unter [Preise](https://wingo-ui.com/de/pricing). Tabellenkalkulationen werfen dieselben Fragen auf, die der [Guide zum React Excel Viewer](https://wingo-ui.com/de/blog/react-excel-viewer) beantwortet. Mehr findest du in den [Komponenten-Guides](https://wingo-ui.com/de/blog/category/components), oder du startest mit dem [Guide zu React-Formularkomponenten](https://wingo-ui.com/de/blog/react-form-components-guide), dem Pillar-Artikel dieser Kategorie. ## Komponenten in diesem Artikel - [DOCX Viewer](https://wingo-ui.com/components/docx-viewer) (Pro): A React Word (.docx) viewer with real pages, headers and footers, thumbnails, zoom, search, comments, tracked changes and download. Installation: `npx wingo-ui@latest add docx-viewer` - [DOCX Editor](https://wingo-ui.com/components/docx-editor) (Pro): A React Word (.docx) editor with real pages, styles, tables, images, find and replace, comments and tracked changes, saved as .docx. Installation: `npx wingo-ui@latest add docx-editor` - [PDF Viewer](https://wingo-ui.com/components/pdf-viewer) (Pro): A React PDF viewer on PDFium: sharp pages, search, thumbnails, rotation, and highlights with notes that export as real PDF annotations. Installation: `npx wingo-ui@latest add pdf-viewer` ## Häufige Fragen ### Wie zeige ich eine .docx-Datei in React ohne Server an? Lies sie im Browser mit einer Bibliothek wie docx-preview, die das ZIP öffnet und das Dokument als HTML rendert. Der DOCX Viewer packt das in eine Komponente: Gib als src eine URL vom selben Origin, eine URL mit CORS oder eine blob:-URL an, und die Datei verlässt das Gerät nie. ### Kann ein React DOCX Viewer Kommentare und nachverfolgte Änderungen zeigen? docx-preview kann beides rendern, laut README ist beides aber experimentell und standardmäßig deaktiviert. Der DOCX Viewer schaltet beides ein: Kommentare erscheinen standardmäßig als Karten neben den Seiten, nachverfolgte Änderungen (Einfügungen in Grün, Löschungen in Rot), sobald du ihren Schalter in der Toolbar umlegst oder defaultChangesVisible setzt. ### Warum brechen Word-Seiten im Browser anders um? Eine .docx-Datei speichert für die meisten Seiten nicht, wo Word umbricht; Word berechnet das beim Rendern aus Schriften und Layout. docx-preview bricht nur an expliziten Seitenumbrüchen, Abschnittswechseln und den Umbrüchen, die Word zuletzt gerendert hat. Deshalb teilt der Viewer zusätzlich jede zu lange Seite an ihren Absätzen und Tabellenzeilen. ### Kann React alte .doc-Dateien rendern? Mit diesen Werkzeugen nicht im Browser. Der DOCX Viewer und docx-preview lesen nur das Format .docx (Office Open XML); wandle .doc-Dateien vorher auf dem Server um, zum Beispiel mit LibreOffice. ### Sollte ich Word-Dokumente zum Anzeigen in PDF umwandeln? Wandle sie um, wenn das Layout auf jedem Gerät exakt gleich sein muss: unterschriebene oder rechtliche Dokumente, Druck, Archive oder Dateien mit komplexen schwebenden Layouts. Behalte die .docx, wenn Leute sie kommentieren, prüfen oder bearbeiten, denn ein PDF verliert die bearbeitbare Struktur. --- Quelle: https://wingo-ui.com/de/blog/react-docx-viewer