Cualquiera que haya dado formato a un documento de Word extenso en el navegador conoce el problema: un encabezado de sección queda huérfano al final de una página mientras que su texto de cuerpo comienza en la siguiente, o el contenido pegado desde otro archivo arrastra consigo una cadena de páginas en blanco no deseadas. Ambos problemas casi siempre se remontan a los saltos de página: ya sea ausentes donde deberían estar, o dejados atrás donde no deberían.
Spire.Doc for JavaScript se ejecuta por completo en el navegador mediante WebAssembly, utilizando un sistema de archivos virtual (VFS) para gestionar la E/S de archivos. Eso significa que puede insertar y eliminar saltos de página sin ninguna ida y vuelta al backend. Esta guía cubre ambas operaciones y aborda dos casos límite que suelen aparecer con documentos del mundo real:
- Insertar un salto de página en un párrafo específico
- Eliminar todos los saltos de página en una sola pasada
- Corregir la línea en blanco adicional que aparece después de insertar un salto
- Corregir el documento que sigue paginándose después de eliminar los saltos
Para la instalación y la configuración del proyecto, consulte Integrar Spire.Doc for JavaScript en un proyecto de React. Los ejemplos a continuación asumen que el módulo WASM ya está inicializado.
Insertar un salto de página en un párrafo específico
El flujo de trabajo consta de tres pasos: cargar el documento de destino en el sistema de archivos virtual de WASM mediante FetchFileToVFS, abrirlo como un objeto Document y, a continuación, localizar el párrafo donde desea que se produzca la división y llamar a AppendBreak con BreakType.PageBreak. El salto se añade como un objeto hijo al final de ese párrafo, por lo que todo lo que le sigue fluye a la página siguiente. Por último, lea el archivo guardado desde el VFS, envuélvalo como un Blob y active una descarga en el navegador.
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;
El documento después de que se añade un salto de página al final del cuarto párrafo
Eliminar todos los saltos de página en una sola pasada
Cuando un documento acumula saltos de página por ediciones repetidas u operaciones de copiar y pegar, a menudo es necesario eliminarlos todos y dejar que el contenido se refluya de forma natural. El enfoque: recorrer cada párrafo de la sección de destino e inspeccionar cada objeto hijo. Cuando un hijo se identifica como un Break con BreakType.PageBreak, se elimina mediante ChildObjects.Remove.
Un detalle crítico en el bucle interno: los objetos hijos se recorren hacia atrás, desde el último índice hasta cero. Eliminar un elemento de una colección recorrida hacia adelante desplaza los índices de todos los elementos siguientes, lo que puede provocar que se omitan elementos o accesos fuera de los límites. El recorrido inverso evita por completo este problema, porque cada eliminación solo afecta a índices que ya se han procesado.
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;
El documento después de que se haya eliminado cada salto de página
Línea en blanco adicional después de insertar un salto de página
Después de llamar a AppendBreak, es posible que observe una franja en blanco no deseada en la parte superior de la nueva página. Esto ocurre porque AppendBreak adjunta el salto al final del párrafo de destino, y la configuración de "espacio después" de ese párrafo se traslada al comienzo de la página siguiente. Cuando el espaciado automático está habilitado, el hueco incluso escala con el tamaño de la fuente, lo que lo hace especialmente visible después de encabezados grandes.
La solución consiste en neutralizar el espaciado final del párrafo antes de añadir el salto:
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);
Establecer AfterAutoSpacing en false y AfterSpacing en 0 garantiza que el párrafo no aporte ningún hueco vertical después del salto, de modo que la nueva página comience al ras del margen superior.
El documento sigue paginado después de eliminar los saltos
Incluso después de eliminar correctamente cada objeto de salto de página, el documento puede seguir dividiéndose en las mismas posiciones. La razón: la paginación también puede originarse en una propiedad a nivel de párrafo llamada "salto de página anterior". Cuando esta marca está establecida en un párrafo, ese párrafo siempre comienza en una página nueva, independientemente de si existe un objeto Break. El bucle de eliminación anterior solo apunta a los objetos de salto, por lo que los párrafos que llevan esta marca permanecen intactos.
Para eliminar por completo la paginación forzada, restablezca la marca PageBreakBefore en cada párrafo junto con la limpieza de los objetos de salto:
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;
}
}
Puede ejecutar este bucle en la misma pasada que la eliminación de los objetos de salto o como un paso separado posteriormente; el orden no importa porque las dos operaciones afectan a propiedades independientes.
Preguntas frecuentes
¿Cómo obtengo una licencia gratuita de Spire.Doc for JavaScript?
Spire.Doc for JavaScript ofrece una licencia de prueba gratuita de 30 días con todas las funciones y sin limitaciones funcionales. Puede solicitarla aquí para evaluar el producto antes de comprarlo.