From 6204d594182d9ee215acafa076555373b420cf12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9A=D1=83=D1=80=D0=BD=D0=B0=D1=82=20=D0=90=D0=BD=D0=B4?= =?UTF-8?q?=D1=80=D0=B5=D0=B9?= Date: Mon, 1 Jun 2026 19:35:11 +0300 Subject: [PATCH] Preserve QWord page breaks in DOCX --- README.md | 4 +- src/features/qword/QWord.tsx | 8 ++++ src/io/wordOffice.test.ts | 21 +++++++++ src/io/wordOffice.ts | 76 ++++++++++++++++++++++++++------- src/io/wordOfficeImport.test.ts | 17 ++++++++ src/styles.css | 25 +++++++++++ 6 files changed, 134 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 6e51b19..34748f2 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ npm run build ## Поддержка форматов -- QWord открывает `.docx` и сохраняет `.docx`; при импорте базовых DOCX-абзацев читает выравнивание, переносы строк, табуляцию, внешние гиперссылки, простые таблицы, базовые растровые изображения, явные цвета текста, подсветку, размер и семейство шрифта из OOXML, а при экспорте DOCX сохраняются заголовки, абзацы, переносы строк, табуляция, выравнивание абзацев, списки, простые таблицы, внешние гиперссылки, базовые растровые изображения и базовое inline-форматирование текста: полужирный, курсив, подчеркивание, зачеркивание, цвет текста, подсветка, размер и семейство шрифта. +- QWord открывает `.docx` и сохраняет `.docx`; при импорте базовых DOCX-абзацев читает выравнивание, переносы строк, разрывы страниц, табуляцию, внешние гиперссылки, простые таблицы, базовые растровые изображения, явные цвета текста, подсветку, размер и семейство шрифта из OOXML, а при экспорте DOCX сохраняются заголовки, абзацы, переносы строк, разрывы страниц, табуляция, выравнивание абзацев, списки, простые таблицы, внешние гиперссылки, базовые растровые изображения и базовое inline-форматирование текста: полужирный, курсив, подчеркивание, зачеркивание, цвет текста, подсветка, размер и семейство шрифта. - QExcell открывает `.xlsx` и сохраняет `.xlsx`; сетка расширяется по фактически заполненным ячейкам, поддерживает несколько листов, скрытые и veryHidden листы через `sheet state`, закрепленные области через `sheetViews pane`, скрытие сетки через `sheetView showGridLines`, масштаб листа через `sheetView zoomScale`, автофильтр через `autoFilter ref`, цвет вкладки листа через `sheetPr tabColor`, ширину колонок через `cols/col width`, высоту строк через `row ht/customHeight`, активный лист через `workbookView activeTab`, формулы за пределами стартового диапазона A-H, shared formulas XLSX с относительными ссылками, базовые merged cells, внешние и внутренние гиперссылки ячеек, базовые диаграммы листа и базовое форматирование ячеек: полужирный, курсив, подчеркивание, зачеркивание, размер и семейство шрифта, прямые RGB/theme/indexed цвета текста с учетом `xl/theme/theme1.xml`, заливку, горизонтальное и вертикальное выравнивание, перенос текста, границы и цвет границ ячеек, числовые форматы XLSX для дат, процентов, денежных и дробных значений. - QPowerPoint открывает `.pptx` и сохраняет `.pptx`; импорт учитывает порядок слайдов из `presentation.xml`, переносы абзацев и ручные переносы строк `a:br` внутри текстовых блоков, скрытые слайды через атрибут `show`, а также заметки докладчика через relationships слайда, сохраняет скрытые слайды, заметки докладчика, базовые растровые изображения слайдов, пользовательский цвет фона слайда, а также цвет, размер и семейство шрифта текста заголовка/подзаголовка. - QOutlook открывает `.eml` и одиночные сообщения Outlook `.msg`, сохраняет письма в `.eml`; импорт EML поддерживает простые текстовые письма, `multipart/alternative`, `multipart/mixed`, `multipart/related`, `text/plain`, fallback из `text/html` в читаемый текст, base64, quoted-printable, MIME encoded-word заголовки UTF-8/windows-1251, MIME-вложения и inline-вложения с `Content-ID`, `To`, `Cc` и `Bcc`. Импорт MSG читает тему, отправителя, получателей `To/Cc/Bcc`, текст/HTML body и вложения, если эти поля доступны в MSG-файле. Новые письма можно адресовать через `To/Cc/Bcc` и сохранять в EML вместе с добавленными файлами. `.pst` и экспорт в `.msg` пока не реализованы. @@ -46,7 +46,7 @@ Desktop-меню поддерживает системные команды дл - `Ctrl/Cmd+Shift+E`: экспортировать текущую рабочую область в PDF. - `Ctrl/Cmd+P`: печать текущей рабочей области. -Импорт и экспорт реализуют базовую совместимость с Office Open XML, EML и чтением MSG: текст, базовое inline-форматирование, явные `w:br`, `w:tab`, `w:color`, `w:shd`, `w:highlight`, `w:sz`, `w:rFonts` и `w:strike` для переносов строк/табуляции/цвета/подсветки/размера/семейства/зачеркивания текста DOCX, выравнивание абзацев DOCX, внешние гиперссылки DOCX, внешние и внутренние гиперссылки XLSX, базовые растровые изображения DOCX/PPTX, простые таблицы, несколько листов, скрытые/veryHidden листы через `sheet state`, закрепленные области через `sheetViews pane`, скрытие сетки через `sheetView showGridLines`, масштаб листа через `sheetView zoomScale`, автофильтр через `autoFilter ref`, цвет вкладки листа через `sheetPr tabColor`, ширину колонок через `cols/col width`, высоту строк через `row ht/customHeight` и активный лист XLSX через `workbookView activeTab`, ячейки, формулы, shared formulas XLSX с относительными ссылками, базовые merged cells, базовые стили, RGB/theme/indexed цвета XLSX с учетом `xl/theme/theme1.xml`, размеры и семейства шрифта, зачеркивание ячеек, горизонтальное и вертикальное выравнивание, перенос текста, границы и цвет границ ячеек, числовые форматы и простые bar/line/pie диаграммы ячеек XLSX, текстовые слайды PPTX с переносами абзацев и ручными переносами строк `a:br` при импорте, скрытые слайды PPTX через атрибут `show`, пользовательский фон слайдов PPTX, цвет, размер и семейство шрифта текста заголовка/подзаголовка PPTX, импорт и экспорт заметок докладчика, адресацию `To/Cc/Bcc`, MIME encoded-word заголовки UTF-8/windows-1251, MIME-вложения EML, inline-вложения EML с `Content-ID` и базовые поля одиночных MSG-писем. Сложные стили, макросы, сложные диаграммы, сложное позиционирование и обтекание изображений, PST, экспорт MSG и полная fidelity документов Microsoft Office в текущем инкременте не заявлены. +Импорт и экспорт реализуют базовую совместимость с Office Open XML, EML и чтением MSG: текст, базовое inline-форматирование, явные `w:br`, `w:br w:type="page"`, `w:tab`, `w:color`, `w:shd`, `w:highlight`, `w:sz`, `w:rFonts` и `w:strike` для переносов строк/разрывов страниц/табуляции/цвета/подсветки/размера/семейства/зачеркивания текста DOCX, выравнивание абзацев DOCX, внешние гиперссылки DOCX, внешние и внутренние гиперссылки XLSX, базовые растровые изображения DOCX/PPTX, простые таблицы, несколько листов, скрытые/veryHidden листы через `sheet state`, закрепленные области через `sheetViews pane`, скрытие сетки через `sheetView showGridLines`, масштаб листа через `sheetView zoomScale`, автофильтр через `autoFilter ref`, цвет вкладки листа через `sheetPr tabColor`, ширину колонок через `cols/col width`, высоту строк через `row ht/customHeight` и активный лист XLSX через `workbookView activeTab`, ячейки, формулы, shared formulas XLSX с относительными ссылками, базовые merged cells, базовые стили, RGB/theme/indexed цвета XLSX с учетом `xl/theme/theme1.xml`, размеры и семейства шрифта, зачеркивание ячеек, горизонтальное и вертикальное выравнивание, перенос текста, границы и цвет границ ячеек, числовые форматы и простые bar/line/pie диаграммы ячеек XLSX, текстовые слайды PPTX с переносами абзацев и ручными переносами строк `a:br` при импорте, скрытые слайды PPTX через атрибут `show`, пользовательский фон слайдов PPTX, цвет, размер и семейство шрифта текста заголовка/подзаголовка PPTX, импорт и экспорт заметок докладчика, адресацию `To/Cc/Bcc`, MIME encoded-word заголовки UTF-8/windows-1251, MIME-вложения EML, inline-вложения EML с `Content-ID` и базовые поля одиночных MSG-писем. Сложные стили, макросы, сложные диаграммы, сложное позиционирование и обтекание изображений, PST, экспорт MSG и полная fidelity документов Microsoft Office в текущем инкременте не заявлены. ## Сборка пакета diff --git a/src/features/qword/QWord.tsx b/src/features/qword/QWord.tsx index 7cd4d2a..b06964d 100644 --- a/src/features/qword/QWord.tsx +++ b/src/features/qword/QWord.tsx @@ -14,6 +14,7 @@ import { PaintBucket, Pilcrow, Save, + SeparatorHorizontal, Strikethrough, Type, Underline @@ -144,6 +145,10 @@ export function QWord({ document, onChange }: QWordProps) { updateHtml(); } + function insertPageBreak() { + runCommand("insertHTML", '


'); + } + async function insertImage(file: File | undefined) { if (!file) { return; @@ -278,6 +283,9 @@ export function QWord({ document, onChange }: QWordProps) { + diff --git a/src/io/wordOffice.test.ts b/src/io/wordOffice.test.ts index c9d1393..18820e4 100644 --- a/src/io/wordOffice.test.ts +++ b/src/io/wordOffice.test.ts @@ -64,6 +64,18 @@ describe("wordOffice helpers", () => { ]); }); + it("сохраняет служебные HTML-разрывы страниц как inline runs для DOCX", () => { + const blocks = htmlToWordBlocks('

BeforeAfter

'); + + expect(blocks).toEqual([ + { + type: "paragraph", + text: "Before After", + runs: [{ text: "Before\fAfter" }] + } + ]); + }); + it("сохраняет служебные HTML-табы как inline runs для DOCX", () => { const blocks = htmlToWordBlocks('

Before\tAfter

'); @@ -156,6 +168,15 @@ describe("wordOffice helpers", () => { expect(documentXml).toMatch(/]*>Line 1<\/w:t>[\s\S]*[\s\S]*]*>Line 2<\/w:t>/); }); + it("записывает HTML-разрывы страниц как w:br w:type page в XML экспортированного DOCX", async () => { + const blob = await exportDocxBlob("Разрыв.docx", '

BeforeAfter

'); + const zip = await JSZip.loadAsync(await blob.arrayBuffer()); + const documentXml = await zip.file("word/document.xml")?.async("string"); + + expect(documentXml).toMatch(/]*w:type="page"[^>]*\/>/); + expect(documentXml).toMatch(/]*>Before<\/w:t>[\s\S]*]*w:type="page"[^>]*\/>[\s\S]*]*>After<\/w:t>/); + }); + it("записывает служебные HTML-табы как w:tab в XML экспортированного DOCX", async () => { const blob = await exportDocxBlob("Табуляция.docx", '

Before\tAfter

'); const zip = await JSZip.loadAsync(await blob.arrayBuffer()); diff --git a/src/io/wordOffice.ts b/src/io/wordOffice.ts index 1a35c15..227f31c 100644 --- a/src/io/wordOffice.ts +++ b/src/io/wordOffice.ts @@ -81,6 +81,7 @@ type DocxModule = { toBuffer?: (document: unknown) => Promise; }; Paragraph: new (options: Record) => unknown; + PageBreak?: new () => unknown; Table: new (options: Record) => unknown; TableCell: new (options: Record) => unknown; TableRow: new (options: Record) => unknown; @@ -112,6 +113,8 @@ const xmlParserOptions = { const wordHyperlinkRelationshipType = "http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink"; const wordImageRelationshipType = "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image"; const emptyDocxRelationshipTargets = { hyperlinks: {}, images: {} }; +const pageBreakMarker = "\f"; +const pageBreakHtml = ''; export async function importDocxFile(file: File): Promise { if (!file.name.toLowerCase().endsWith(".docx")) { @@ -220,6 +223,11 @@ export function htmlToWordBlocks(html: string): WordBlock[] { return; } + if (isQOfficePageBreakElement(node)) { + blocks.push({ type: "paragraph", text: "", runs: [{ text: pageBreakMarker }] }); + return; + } + if (tagName === "h1" || tagName === "h2") { const runs = elementInlineRuns(node); const text = inlineRunsText(runs); @@ -402,15 +410,22 @@ function wordInlineRunToTextRunsForRun(run: WordInlineRun, docx: DocxModule, opt const text = String(option.text ?? ""); const baseOption = { ...option }; delete baseOption.text; - const lines = text.split("\n"); + const segments = text.split(/(\n|\f)/); const textRuns: unknown[] = []; - lines.forEach((line, index) => { - if (index > 0) { + segments.forEach((segment) => { + if (segment === "\n") { textRuns.push(new docx.TextRun({ ...baseOption, break: 1 })); + return; } - if (line || lines.length === 1) { - textRuns.push(wordInlineTextRunForSegment(line, docx, baseOption)); + + if (segment === pageBreakMarker) { + textRuns.push(docx.PageBreak ? new docx.PageBreak() : new docx.TextRun({ ...baseOption, break: 1 })); + return; + } + + if (segment || segments.length === 1) { + textRuns.push(wordInlineTextRunForSegment(segment, docx, baseOption)); } }); @@ -511,7 +526,8 @@ function paragraphElementToBlocks(element: Element): WordBlock[] { const flushParagraph = () => { const runs = normalizeInlineRuns(pendingRuns); const text = inlineRunsText(runs); - if (text) { + const hasPageBreak = runs.some((run) => run.text.includes(pageBreakMarker)); + if (text || hasPageBreak) { blocks.push({ type: "paragraph", text, runs, ...(alignment ? { alignment } : {}) }); } pendingRuns = []; @@ -650,6 +666,7 @@ async function styledDocxHtmlFromArrayBuffer(arrayBuffer: ArrayBuffer) { result.hasTable || result.hasImage || result.hasLineBreak || + result.hasPageBreak || result.hasTab ? result.html : ""; @@ -674,6 +691,7 @@ function orderedDocxDocumentToHtml( let hasTable = false; let hasImage = false; let hasLineBreak = false; + let hasPageBreak = false; let hasTab = false; const blocks = orderedElementChildren(body) .flatMap((block) => { @@ -684,6 +702,7 @@ function orderedDocxDocumentToHtml( hasParagraphAlignment = hasParagraphAlignment || result.hasParagraphAlignment; hasImage = hasImage || result.hasImage; hasLineBreak = hasLineBreak || result.hasLineBreak; + hasPageBreak = hasPageBreak || result.hasPageBreak; hasTab = hasTab || result.hasTab; return result.html ? [result.html] : []; } @@ -692,6 +711,7 @@ function orderedDocxDocumentToHtml( hasTable = hasTable || Boolean(result.html); hasImage = hasImage || result.hasImage; hasLineBreak = hasLineBreak || result.hasLineBreak; + hasPageBreak = hasPageBreak || result.hasPageBreak; hasTab = hasTab || result.hasTab; return result.html ? [result.html] : []; } @@ -706,6 +726,7 @@ function orderedDocxDocumentToHtml( hasTable, hasImage, hasLineBreak, + hasPageBreak, hasTab }; } @@ -722,19 +743,21 @@ function orderedDocxParagraphToHtml( let hasInlineColorOrHighlight = false; let hasImage = false; let hasLineBreak = false; + let hasPageBreak = false; let hasTab = false; const runs = orderedDocxParagraphInlineRecords(paragraph, hyperlinkTargets).map((inline) => { const result = docxRunToHtml(inline.run, imageDataByRelationshipId, inline.text); hasInlineColorOrHighlight = hasInlineColorOrHighlight || result.hasInlineColorOrHighlight || Boolean(inline.href); hasImage = hasImage || result.hasImage; hasLineBreak = hasLineBreak || result.hasLineBreak; + hasPageBreak = hasPageBreak || result.hasPageBreak; hasTab = hasTab || result.hasTab; return inline.href && result.html ? `${result.html}` : result.html; }); const content = runs.join(""); if (!content.trim()) { - return { html: "", hasInlineColorOrHighlight, hasParagraphAlignment, hasImage, hasLineBreak, hasTab }; + return { html: "", hasInlineColorOrHighlight, hasParagraphAlignment, hasImage, hasLineBreak, hasPageBreak, hasTab }; } return { @@ -743,6 +766,7 @@ function orderedDocxParagraphToHtml( hasParagraphAlignment, hasImage, hasLineBreak, + hasPageBreak, hasTab }; } @@ -754,6 +778,7 @@ function orderedDocxTableToHtml( ) { let hasImage = false; let hasLineBreak = false; + let hasPageBreak = false; let hasTab = false; const rows = orderedDirectElements(table, "w:tr") .map((row) => { @@ -764,6 +789,7 @@ function orderedDocxTableToHtml( const result = orderedDocxParagraphToHtml(paragraph, hyperlinkTargets, imageDataByRelationshipId); hasImage = hasImage || result.hasImage; hasLineBreak = hasLineBreak || result.hasLineBreak; + hasPageBreak = hasPageBreak || result.hasPageBreak; hasTab = hasTab || result.hasTab; return result.html; }) @@ -777,7 +803,7 @@ function orderedDocxTableToHtml( }) .filter(Boolean); - return { html: rows.length > 0 ? `${rows.join("")}
` : "", hasImage, hasLineBreak, hasTab }; + return { html: rows.length > 0 ? `${rows.join("")}
` : "", hasImage, hasLineBreak, hasPageBreak, hasTab }; } function orderedDocxCellText(cell: unknown) { @@ -837,7 +863,7 @@ function orderedDocxRunText(run: unknown) { return "\t"; } if (name === "w:br") { - return "\n"; + return isDocxPageBreakAttributes(orderedElementAttributes(child)) ? pageBreakMarker : "\n"; } return ""; @@ -994,11 +1020,12 @@ function docxRunToHtml(run: unknown, imageDataByRelationshipId: DocxImageDataByR const hasStrike = hasDocxBoolean(properties, "w:strike") || hasDocxBoolean(properties, "w:dstrike"); const hasInlineColorOrHighlight = Boolean(color || highlightColor || fontSize || fontFamily || hasStrike); const hasLineBreak = text.includes("\n"); + const hasPageBreak = text.includes(pageBreakMarker); const hasTab = text.includes("\t"); let html = escapeHtmlDocxText(text); if (!text && !imageHtml) { - return { html: "", hasInlineColorOrHighlight, hasImage: false, hasLineBreak, hasTab }; + return { html: "", hasInlineColorOrHighlight, hasImage: false, hasLineBreak, hasPageBreak, hasTab }; } if (text) { @@ -1027,7 +1054,7 @@ function docxRunToHtml(run: unknown, imageDataByRelationshipId: DocxImageDataByR } } - return { html: `${imageHtml}${text ? html : ""}`, hasInlineColorOrHighlight, hasImage: Boolean(imageHtml), hasLineBreak, hasTab }; + return { html: `${imageHtml}${text ? html : ""}`, hasInlineColorOrHighlight, hasImage: Boolean(imageHtml), hasLineBreak, hasPageBreak, hasTab }; } function docxRunImageHtml(run: XmlRecord, imageDataByRelationshipId: DocxImageDataByRelationshipId) { @@ -1139,7 +1166,9 @@ function emuToPixels(value: number) { function docxRunText(run: XmlRecord) { const text = toArray(run["w:t"]).map(xmlNodeText).join(""); const tabs = toArray(run["w:tab"]).map(() => "\t").join(""); - const breaks = toArray(run["w:br"]).map(() => "\n").join(""); + const breaks = toArray(run["w:br"]) + .map((breakRecord) => (isDocxPageBreakAttributes(asRecord(breakRecord)) ? pageBreakMarker : "\n")) + .join(""); return `${text}${tabs}${breaks}`; } @@ -1254,7 +1283,11 @@ function escapeHtml(value: string) { } function escapeHtmlDocxText(value: string) { - return escapeHtml(value).replace(/\t/g, '\t').replace(/\n/g, "
"); + return escapeHtml(value) + .split(pageBreakMarker) + .join(pageBreakHtml) + .replace(/\t/g, '\t') + .replace(/\n/g, "
"); } function collectInlineRuns(nodes: ChildNode[], format: InlineFormat): WordInlineRun[] { @@ -1272,6 +1305,10 @@ function collectInlineSegments(nodes: ChildNode[], format: InlineFormat): Inline return []; } + if (isQOfficePageBreakElement(node)) { + return [{ type: "runs", runs: [{ text: pageBreakMarker, ...format }] }]; + } + if (node.tagName.toLowerCase() === "br") { return [{ type: "runs", runs: [{ text: "\n", ...format }] }]; } @@ -1586,9 +1623,18 @@ function normalizeInlineWhitespace(value: string) { function normalizeInlineRunText(value: string) { return value .replace(/\u00a0/g, " ") - .replace(/[^\S\n\t]+/g, " ") + .replace(/[^\S\n\t\f]+/g, " ") .replace(/ *\n */g, "\n") - .replace(/ *\t */g, "\t"); + .replace(/ *\t */g, "\t") + .replace(/ *\f */g, pageBreakMarker); +} + +function isQOfficePageBreakElement(element: Element) { + return element.getAttribute("data-qoffice-page-break") === "true"; +} + +function isDocxPageBreakAttributes(attributes: XmlRecord) { + return docxAttribute(attributes, "w:type").toLowerCase() === "page"; } async function loadMammoth() { diff --git a/src/io/wordOfficeImport.test.ts b/src/io/wordOfficeImport.test.ts index 1686c21..69a65e9 100644 --- a/src/io/wordOfficeImport.test.ts +++ b/src/io/wordOfficeImport.test.ts @@ -112,6 +112,23 @@ describe("wordOffice DOCX import", () => { ]); }); + it("imports DOCX page breaks from OOXML", async () => { + const blob = await exportDocxBlob("PageBreak.docx", '

BeforeAfter

'); + const file = new File([blob], "PageBreak.docx", { + type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" + }); + const imported = await importDocxFile(file); + + expect(imported.html).toContain('data-qoffice-page-break="true"'); + expect(htmlToWordBlocks(imported.html)).toEqual([ + { + type: "paragraph", + text: "Before After", + runs: [{ text: "Before\fAfter" }] + } + ]); + }); + it("imports DOCX tabs from OOXML", async () => { const blob = await exportDocxBlob("Tab.docx", '

Before\tAfter

'); const file = new File([blob], "Tab.docx", { diff --git a/src/styles.css b/src/styles.css index 5eb30eb..9256df7 100644 --- a/src/styles.css +++ b/src/styles.css @@ -554,6 +554,31 @@ button { margin: 14px 0; } +.document-content [data-qoffice-page-break="true"] { + display: block; + position: relative; + height: 0; + margin: 28px 0; + border-top: 1px dashed #94a3b8; + break-after: page; + page-break-after: always; +} + +.document-content [data-qoffice-page-break="true"]::after { + position: absolute; + top: -11px; + left: 50%; + padding: 2px 8px; + border: 1px solid #d5dde8; + border-radius: 999px; + background: #ffffff; + color: #64748b; + content: "Разрыв страницы"; + font-size: 11px; + transform: translateX(-50%); + white-space: nowrap; +} + .document-content table { width: 100%; margin-top: 14px;