Quiconque a déjà mis en forme un long document Word dans le navigateur connaît cette souffrance : un titre de section reste orphelin en bas d'une page tandis que son corps de texte commence sur la suivante, ou bien du contenu collé depuis un autre fichier traîne derrière lui une série de pages blanches indésirables. Ces deux problèmes remontent presque toujours aux sauts de page — soit absents là où ils devraient être, soit laissés là où ils ne devraient pas être.
Spire.Doc for JavaScript s'exécute entièrement dans le navigateur via WebAssembly, en utilisant un système de fichiers virtuel (VFS) pour gérer les entrées/sorties de fichiers. Cela signifie que vous pouvez insérer et supprimer des sauts de page sans aucun aller-retour vers un serveur. Ce guide couvre les deux opérations et aborde deux cas limites qui apparaissent fréquemment avec des documents réels :
- Insérer un saut de page à un paragraphe spécifique
- Supprimer tous les sauts de page en une seule passe
- Corriger la ligne vide supplémentaire qui apparaît après l'insertion d'un saut
- Corriger le document qui reste encore paginé après la suppression des sauts
Pour l'installation et la configuration du projet, consultez Intégrer Spire.Doc for JavaScript dans un projet React. Les exemples ci-dessous supposent que le module WASM est déjà initialisé.
Insérer un saut de page à un paragraphe spécifique
Le flux de travail comporte trois étapes : charger le document cible dans le système de fichiers virtuel WASM via FetchFileToVFS, l'ouvrir en tant qu'objet Document, puis localiser le paragraphe où vous souhaitez que la coupure se produise et appeler AppendBreak avec BreakType.PageBreak. Le saut est ajouté en tant qu'objet enfant à la fin de ce paragraphe, de sorte que tout ce qui suit passe sur la page suivante. Enfin, lisez le fichier enregistré depuis le VFS, encapsulez-le dans un Blob et déclenchez un téléchargement dans le navigateur.
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;
Le document après qu'un saut de page a été ajouté à la fin du quatrième paragraphe
Supprimer tous les sauts de page en une seule passe
Lorsqu'un document accumule des sauts de page à force de modifications répétées ou d'opérations de copier-coller, vous devez souvent les supprimer tous et laisser le contenu se réorganiser naturellement. L'approche : parcourir chaque paragraphe de la section cible et inspecter chaque objet enfant. Lorsqu'un enfant est identifié comme un Break avec BreakType.PageBreak, le supprimer via ChildObjects.Remove.
Un détail crucial dans la boucle interne — les objets enfants sont parcourus en sens inverse, du dernier index jusqu'à zéro. Supprimer un élément d'une collection parcourue vers l'avant décale les index de tous les éléments suivants, ce qui peut entraîner des éléments ignorés ou des accès hors limites. Le parcours inversé contourne entièrement ce problème, car chaque suppression n'affecte que des index que vous avez déjà traités.
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;
Le document après la suppression de tous les sauts de page
Ligne vide supplémentaire après l'insertion d'un saut de page
Après avoir appelé AppendBreak, vous pouvez remarquer une bande blanche indésirable en haut de la nouvelle page. Cela se produit parce que AppendBreak attache le saut à la fin du paragraphe cible, et que le paramètre « espace après » de ce paragraphe se répercute au début de la page suivante. Lorsque l'espacement automatique est activé, l'écart s'adapte même à la taille de police — ce qui le rend particulièrement visible après de grands titres.
La solution consiste à neutraliser l'espacement de fin du paragraphe avant d'ajouter le saut :
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);
Définir AfterAutoSpacing sur false et AfterSpacing sur 0 garantit que le paragraphe n'ajoute aucun espace vertical après le saut, de sorte que la nouvelle page commence au ras de la marge supérieure.
Le document reste paginé après la suppression des sauts
Même après avoir supprimé avec succès chaque objet de saut de page, le document peut encore se scinder aux mêmes endroits. La raison : la pagination peut également provenir d'une propriété au niveau du paragraphe appelée « saut de page avant ». Lorsque cet indicateur est activé sur un paragraphe, ce paragraphe commence toujours sur une nouvelle page — indépendamment de l'existence d'un objet Break. La boucle de suppression ci-dessus ne cible que les objets de saut, de sorte que les paragraphes portant cet indicateur restent inchangés.
Pour éliminer complètement la pagination forcée, réinitialisez l'indicateur PageBreakBefore sur chaque paragraphe en même temps que le nettoyage des objets de saut :
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;
}
}
Vous pouvez exécuter cette boucle dans la même passe que la suppression des objets de saut, ou comme étape distincte par la suite — l'ordre n'a pas d'importance, car les deux opérations ciblent des propriétés indépendantes.
FAQ
Comment obtenir une licence gratuite pour Spire.Doc for JavaScript ?
Spire.Doc for JavaScript propose une licence d'essai gratuite de 30 jours avec toutes les fonctionnalités et sans limitation fonctionnelle. Vous pouvez faire une demande ici pour évaluer le produit avant de l'acheter.