Qualquer pessoa que já formatou um documento longo do Word no navegador conhece a dor: um título de seção fica órfão na parte inferior de uma página enquanto seu texto começa na página seguinte, ou conteúdo colado de outro arquivo arrasta consigo uma sequência de páginas em branco indesejadas. Ambos os problemas quase sempre remontam a quebras de página — ou ausentes onde deveriam estar, ou deixadas onde não deveriam.
O Spire.Doc for JavaScript é executado inteiramente no navegador por meio de WebAssembly, usando um sistema de arquivos virtual (VFS) para lidar com E/S de arquivos. Isso significa que você pode inserir e remover quebras de página sem nenhuma ida e volta ao backend. Este guia cobre ambas as operações e aborda dois casos extremos que surgem frequentemente com documentos do mundo real:
- Inserir uma quebra de página em um parágrafo específico
- Remover todas as quebras de página em uma única passagem
- Corrigir a linha em branco extra que aparece após inserir uma quebra
- Corrigir o documento que ainda é paginado após as quebras serem removidas
Para instalação e configuração do projeto, consulte Integrando o Spire.Doc for JavaScript em um Projeto React. Os exemplos abaixo pressupõem que o módulo WASM já esteja inicializado.
Inserir uma Quebra de Página em um Parágrafo Específico
O fluxo de trabalho consiste em três etapas: carregar o documento de destino no sistema de arquivos virtual do WASM por meio de FetchFileToVFS, abri-lo como um objeto Document e, em seguida, localizar o parágrafo onde você deseja que a divisão aconteça e chamar AppendBreak com BreakType.PageBreak. A quebra é anexada como um objeto filho ao final desse parágrafo, de modo que tudo após ela flui para a próxima página. Por fim, leia o arquivo salvo do VFS, envolva-o como um Blob e dispare um download pelo 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;
O documento após uma quebra de página ser anexada ao final do quarto parágrafo
Remover Todas as Quebras de Página em Uma Única Passagem
Quando um documento acumula quebras de página de edições repetidas ou operações de copiar e colar, muitas vezes você precisa removê-las todas e deixar o conteúdo fluir naturalmente. A abordagem: iterar sobre cada parágrafo na seção de destino e inspecionar cada objeto filho. Quando um filho é identificado como um Break com BreakType.PageBreak, remova-o por meio de ChildObjects.Remove.
Um detalhe crítico no laço interno — os objetos filhos são percorridos de trás para frente, do último índice até zero. Remover um elemento de uma coleção percorrida para frente desloca os índices de todos os elementos subsequentes, o que pode causar itens ignorados ou acesso fora dos limites. A travessia reversa contorna esse problema inteiramente, porque cada remoção afeta apenas índices que você já processou.
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;
O documento após todas as quebras de página terem sido removidas
Linha em Branco Extra Após Inserir uma Quebra de Página
Após chamar AppendBreak, você pode notar uma faixa em branco indesejada no topo da nova página. Isso ocorre porque AppendBreak anexa a quebra ao final do parágrafo de destino, e a configuração de "espaçamento após" desse parágrafo é transportada para o início da próxima página. Quando o espaçamento automático está habilitado, a lacuna ainda escala com o tamanho da fonte — tornando-a especialmente visível após títulos grandes.
A correção é neutralizar o espaçamento final do parágrafo antes de anexar a quebra:
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);
Definir AfterAutoSpacing como false e AfterSpacing como 0 garante que o parágrafo não contribua com nenhuma lacuna vertical após a quebra, de modo que a nova página comece rente à margem superior.
Documento Ainda Paginado Após Remover as Quebras
Mesmo após remover com sucesso todos os objetos de quebra de página, o documento ainda pode se dividir nas mesmas posições. O motivo: a paginação também pode se originar de uma propriedade em nível de parágrafo chamada "quebra de página antes". Quando esse sinalizador está definido em um parágrafo, esse parágrafo sempre começa em uma nova página — independentemente de existir ou não um objeto Break. O laço de remoção acima visa apenas objetos de quebra, portanto os parágrafos que carregam esse sinalizador permanecem intactos.
Para eliminar completamente a paginação forçada, redefina o sinalizador PageBreakBefore em cada parágrafo junto com a limpeza dos objetos de quebra:
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;
}
}
Você pode executar este laço na mesma passagem da remoção dos objetos de quebra ou como uma etapa separada depois — a ordem não importa, pois as duas operações visam propriedades independentes.
Perguntas Frequentes
Como obtenho uma licença gratuita do Spire.Doc for JavaScript?
O Spire.Doc for JavaScript oferece uma licença de avaliação gratuita de 30 dias com todos os recursos e sem limitações funcionais. Você pode solicitar aqui para avaliar o produto antes de comprá-lo.