Jeder, der ein langes Word-Dokument im Browser formatiert hat, kennt das Problem: Eine Abschnittsüberschrift steht verwaist am unteren Rand einer Seite, während ihr Fließtext auf der nächsten Seite beginnt, oder aus einer anderen Datei eingefügter Inhalt zieht eine Kette unerwünschter leerer Seiten mit sich. Beide Probleme lassen sich fast immer auf Seitenumbrüche zurückführen – entweder fehlen sie dort, wo sie sein sollten, oder sie bleiben dort zurück, wo sie nicht sein sollten.
Spire.Doc for JavaScript läuft vollständig im Browser über WebAssembly und verwendet ein virtuelles Dateisystem (VFS) für Datei-Ein-/Ausgabe. Das bedeutet, Sie können Seitenumbrüche einfügen und entfernen, ohne einen Umweg über das Backend. Dieser Leitfaden behandelt beide Vorgänge und geht auf zwei Randfälle ein, die bei realen Dokumenten häufig auftreten:
- Einen Seitenumbruch an einem bestimmten Absatz einfügen
- Alle Seitenumbrüche in einem Durchgang entfernen
- Die zusätzliche leere Zeile beheben, die nach dem Einfügen eines Umbruchs auftritt
- Das Dokument beheben, das nach dem Entfernen der Umbrüche weiterhin paginiert wird
Informationen zur Installation und Projekteinrichtung finden Sie unter Integrieren von Spire.Doc for JavaScript in ein React-Projekt. Die folgenden Beispiele gehen davon aus, dass das WASM-Modul bereits initialisiert ist.
Einen Seitenumbruch an einem bestimmten Absatz einfügen
Der Ablauf besteht aus drei Schritten: Laden Sie das Zieldokument über FetchFileToVFS in das virtuelle Dateisystem von WASM, öffnen Sie es als Document-Objekt, suchen Sie dann den Absatz, an dem der Umbruch erfolgen soll, und rufen Sie AppendBreak mit BreakType.PageBreak auf. Der Umbruch wird als untergeordnetes Objekt am Ende dieses Absatzes angefügt, sodass alles danach auf die nächste Seite fließt. Lesen Sie schließlich die gespeicherte Datei aus dem VFS, verpacken Sie sie als Blob und lösen Sie einen Browser-Download aus.
function App() {
const InsertPageBreak = async () => {
const docModule = window.wasmModule?.spiredoc;
if (!docModule) {
alert('Spire.Doc is not ready yet');
return;
}
// Load the target Word document into VFS
const inputFileName = "Template_Docx_1.docx";
await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
// Create a Document instance and load the document
const doc = new docModule.Document();
doc.LoadFromFile(inputFileName);
// Locate the fourth paragraph of the first section and append a page break to its end
doc.Sections.get_Item(0).Paragraphs.get_Item(3).AppendBreak(docModule.BreakType.PageBreak);
// Define the output file name
const outputFileName = "InsertPageBreak_out.docx";
// Save the document to VFS
doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });
doc.Dispose();
const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Insert a Page Break into a Word Document</h1>
<button onClick={InsertPageBreak}>Generate</button>
</div>
);
}
export default App;
Das Dokument, nachdem am Ende des vierten Absatzes ein Seitenumbruch angefügt wurde
Alle Seitenumbrüche in einem Durchgang entfernen
Wenn ein Dokument durch wiederholte Bearbeitungen oder Kopier- und Einfügevorgänge Seitenumbrüche ansammelt, müssen Sie sie oft alle entfernen und den Inhalt natürlich neu fließen lassen. Der Ansatz: Durchlaufen Sie jeden Absatz im Zielabschnitt und prüfen Sie jedes untergeordnete Objekt. Wenn ein untergeordnetes Objekt als Break mit BreakType.PageBreak identifiziert wird, entfernen Sie es über ChildObjects.Remove.
Ein kritisches Detail in der inneren Schleife – die untergeordneten Objekte werden rückwärts durchlaufen, vom letzten Index bis null. Das Entfernen eines Elements aus einer vorwärts durchlaufenen Sammlung verschiebt die Indizes jedes nachfolgenden Elements, was zu übersprungenen Elementen oder Zugriffen außerhalb des gültigen Bereichs führen kann. Die Rückwärtsdurchquerung umgeht dieses Problem vollständig, da sich jede Entfernung nur auf Indizes auswirkt, die bereits verarbeitet wurden.
function App() {
const RemovePageBreaks = async () => {
const docModule = window.wasmModule?.spiredoc;
if (!docModule) {
alert('Spire.Doc is not ready yet');
return;
}
// Load the target Word document into VFS
const inputFileName = "Template_Docx_4.docx";
await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
// Create a Document instance and load the document
const doc = new docModule.Document();
doc.LoadFromFile(inputFileName);
// Get the first section
const section = doc.Sections.get_Item(0);
// Walk through every paragraph in the section
for (let j = 0; j < section.Paragraphs.Count; j++) {
const p = section.Paragraphs.get_Item(j);
// Walk the paragraph's child objects backwards, so that removing an element does not shift the indices still to come
for (let i = p.ChildObjects.Count - 1; i >= 0; i--) {
const obj = p.ChildObjects.get_Item(i);
// Test whether the object is a page break
if (obj.DocumentObjectType == docModule.DocumentObjectType.Break
&& obj.BreakType == docModule.BreakType.PageBreak) {
// Remove the page break from the paragraph
p.ChildObjects.Remove(obj);
}
}
}
// Define the output file name
const outputFileName = "RemovePageBreaks_out.docx";
// Save the document to VFS
doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });
doc.Dispose();
const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Remove Page Breaks from a Word Document</h1>
<button onClick={RemovePageBreaks}>Generate</button>
</div>
);
}
export default App;
Das Dokument, nachdem jeder Seitenumbruch entfernt wurde
Zusätzliche leere Zeile nach dem Einfügen eines Seitenumbruchs
Nach dem Aufruf von AppendBreak können Sie oben auf der neuen Seite einen unerwünschten leeren Streifen bemerken. Dies geschieht, weil AppendBreak den Umbruch an das Ende des Zielabsatzes anhängt und die Einstellung „Abstand danach“ dieses Absatzes auf den Anfang der nächsten Seite übertragen wird. Wenn der automatische Abstand aktiviert ist, skaliert die Lücke sogar mit der Schriftgröße – was besonders nach großen Überschriften sichtbar wird.
Die Lösung besteht darin, den nachfolgenden Abstand des Absatzes vor dem Anfügen des Umbruchs zu neutralisieren:
const para = document.Sections.get_Item(0).Paragraphs.get_Item(3);
// Turn off automatic spacing after the paragraph and set the space after it to 0
para.Format.AfterAutoSpacing = false;
para.Format.AfterSpacing = 0;
// Then insert the page break
para.AppendBreak(wasmModule.BreakType.PageBreak);
Wenn Sie AfterAutoSpacing auf false und AfterSpacing auf 0 setzen, wird sichergestellt, dass der Absatz nach dem Umbruch keinen vertikalen Abstand beiträgt, sodass die neue Seite bündig am oberen Rand beginnt.
Dokument ist nach dem Entfernen der Umbrüche weiterhin paginiert
Selbst nachdem alle Seitenumbruch-Objekte erfolgreich entfernt wurden, kann das Dokument weiterhin an denselben Stellen geteilt werden. Der Grund: Die Paginierung kann auch von einer Absatzeigenschaft namens „Seitenumbruch davor“ stammen. Wenn dieses Kennzeichen für einen Absatz gesetzt ist, beginnt dieser Absatz immer auf einer neuen Seite – unabhängig davon, ob ein Break-Objekt vorhanden ist. Die oben genannte Entfernungsschleife zielt nur auf Umbruch-Objekte ab, sodass Absätze mit diesem Kennzeichen unverändert bleiben.
Um erzwungene Paginierung vollständig zu beseitigen, setzen Sie das Kennzeichen PageBreakBefore bei jedem Absatz zusammen mit der Bereinigung der Umbruch-Objekte zurück:
const section = document.Sections.get_Item(0);
for (let j = 0; j < section.Paragraphs.Count; j++) {
const p = section.Paragraphs.get_Item(j);
// Clear the page-break-before property set on the paragraph
if (p.Format.PageBreakBefore) {
p.Format.PageBreakBefore = false;
}
}
Sie können diese Schleife im selben Durchgang wie das Entfernen der Umbruch-Objekte ausführen oder als separaten Schritt danach – die Reihenfolge spielt keine Rolle, da die beiden Vorgänge auf unabhängige Eigenschaften abzielen.
FAQ
Wie erhalte ich eine kostenlose Lizenz für Spire.Doc for JavaScript?
Spire.Doc for JavaScript bietet eine 30-tägige kostenlose Testlizenz mit vollem Funktionsumfang und ohne funktionale Einschränkungen. Sie können hier beantragen, um das Produkt vor dem Kauf zu testen.