Preserve QWord tabs in DOCX
This commit is contained in:
Курнат Андрей
@@ -31,7 +31,7 @@ npm run build
|
||||
|
||||
## Поддержка форматов
|
||||
|
||||
- QWord открывает `.docx` и сохраняет `.docx`; при импорте базовых DOCX-абзацев читает выравнивание, переносы строк, внешние гиперссылки, простые таблицы, базовые растровые изображения, явные цвета текста, подсветку, размер и семейство шрифта из OOXML, а при экспорте DOCX сохраняются заголовки, абзацы, переносы строк, выравнивание абзацев, списки, простые таблицы, внешние гиперссылки, базовые растровые изображения и базовое inline-форматирование текста: полужирный, курсив, подчеркивание, зачеркивание, цвет текста, подсветка, размер и семейство шрифта.
|
||||
- QWord открывает `.docx` и сохраняет `.docx`; при импорте базовых DOCX-абзацев читает выравнивание, переносы строк, табуляцию, внешние гиперссылки, простые таблицы, базовые растровые изображения, явные цвета текста, подсветку, размер и семейство шрифта из OOXML, а при экспорте DOCX сохраняются заголовки, абзацы, переносы строк, табуляция, выравнивание абзацев, списки, простые таблицы, внешние гиперссылки, базовые растровые изображения и базовое inline-форматирование текста: полужирный, курсив, подчеркивание, зачеркивание, цвет текста, подсветка, размер и семейство шрифта.
|
||||
- QExcell открывает `.xlsx` и сохраняет `.xlsx`; сетка расширяется по фактически заполненным ячейкам, поддерживает несколько листов, активный лист через `workbookView activeTab`, формулы за пределами стартового диапазона A-H, shared formulas XLSX с относительными ссылками, базовые merged cells, внешние и внутренние гиперссылки ячеек, базовые диаграммы листа и базовое форматирование ячеек: полужирный, курсив, подчеркивание, зачеркивание, размер и семейство шрифта, прямые RGB/theme/indexed цвета текста с учетом `xl/theme/theme1.xml`, заливку, горизонтальное и вертикальное выравнивание, перенос текста, границы и цвет границ ячеек, числовые форматы XLSX для дат, процентов, денежных и дробных значений.
|
||||
- QPowerPoint открывает `.pptx` и сохраняет `.pptx`; импорт учитывает порядок слайдов из `presentation.xml`, переносы абзацев и ручные переносы строк `a:br` внутри текстовых блоков, а также заметки докладчика через 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:color`, `w:shd`, `w:highlight`, `w:sz`, `w:rFonts` и `w:strike` для переносов строк/цвета/подсветки/размера/семейства/зачеркивания текста DOCX, выравнивание абзацев DOCX, внешние гиперссылки DOCX, внешние и внутренние гиперссылки XLSX, базовые растровые изображения DOCX/PPTX, простые таблицы, несколько листов и активный лист XLSX через `workbookView activeTab`, ячейки, формулы, shared formulas XLSX с относительными ссылками, базовые merged cells, базовые стили, RGB/theme/indexed цвета XLSX с учетом `xl/theme/theme1.xml`, размеры и семейства шрифта, зачеркивание ячеек, горизонтальное и вертикальное выравнивание, перенос текста, границы и цвет границ ячеек, числовые форматы и простые bar/line/pie диаграммы ячеек XLSX, текстовые слайды PPTX с переносами абзацев и ручными переносами строк `a:br` при импорте, пользовательский фон слайдов 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:tab`, `w:color`, `w:shd`, `w:highlight`, `w:sz`, `w:rFonts` и `w:strike` для переносов строк/табуляции/цвета/подсветки/размера/семейства/зачеркивания текста DOCX, выравнивание абзацев DOCX, внешние гиперссылки DOCX, внешние и внутренние гиперссылки XLSX, базовые растровые изображения DOCX/PPTX, простые таблицы, несколько листов и активный лист XLSX через `workbookView activeTab`, ячейки, формулы, shared formulas XLSX с относительными ссылками, базовые merged cells, базовые стили, RGB/theme/indexed цвета XLSX с учетом `xl/theme/theme1.xml`, размеры и семейства шрифта, зачеркивание ячеек, горизонтальное и вертикальное выравнивание, перенос текста, границы и цвет границ ячеек, числовые форматы и простые bar/line/pie диаграммы ячеек XLSX, текстовые слайды PPTX с переносами абзацев и ручными переносами строк `a:br` при импорте, пользовательский фон слайдов PPTX, цвет, размер и семейство шрифта текста заголовка/подзаголовка PPTX, импорт и экспорт заметок докладчика, адресацию `To/Cc/Bcc`, MIME encoded-word заголовки UTF-8/windows-1251, MIME-вложения EML, inline-вложения EML с `Content-ID` и базовые поля одиночных MSG-писем. Сложные стили, макросы, сложные диаграммы, сложное позиционирование и обтекание изображений, PST, экспорт MSG и полная fidelity документов Microsoft Office в текущем инкременте не заявлены.
|
||||
|
||||
## Сборка пакета
|
||||
|
||||
|
||||
@@ -64,6 +64,18 @@ describe("wordOffice helpers", () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it("сохраняет служебные HTML-табы как inline runs для DOCX", () => {
|
||||
const blocks = htmlToWordBlocks('<p>Before<span data-qoffice-tab="true" style="white-space: pre;">\t</span>After</p>');
|
||||
|
||||
expect(blocks).toEqual([
|
||||
{
|
||||
type: "paragraph",
|
||||
text: "Before After",
|
||||
runs: [{ text: "Before\tAfter" }]
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
it("сохраняет выравнивание абзацев и заголовков для DOCX", () => {
|
||||
const blocks = htmlToWordBlocks(`
|
||||
<h1 align="right">Итоги</h1>
|
||||
@@ -144,6 +156,15 @@ describe("wordOffice helpers", () => {
|
||||
expect(documentXml).toMatch(/<w:t[^>]*>Line 1<\/w:t>[\s\S]*<w:br\/>[\s\S]*<w:t[^>]*>Line 2<\/w:t>/);
|
||||
});
|
||||
|
||||
it("записывает служебные HTML-табы как w:tab в XML экспортированного DOCX", async () => {
|
||||
const blob = await exportDocxBlob("Табуляция.docx", '<p>Before<span data-qoffice-tab="true" style="white-space: pre;">\t</span>After</p>');
|
||||
const zip = await JSZip.loadAsync(await blob.arrayBuffer());
|
||||
const documentXml = await zip.file("word/document.xml")?.async("string");
|
||||
|
||||
expect(documentXml).toContain("<w:tab/>");
|
||||
expect(documentXml).toMatch(/<w:t[^>]*>Before<\/w:t>[\s\S]*<w:tab\/>[\s\S]*<w:t[^>]*>After<\/w:t>/);
|
||||
});
|
||||
|
||||
it("записывает цвет текста и подсветку в XML экспортированного DOCX", async () => {
|
||||
const blob = await exportDocxBlob(
|
||||
"Цвет.docx",
|
||||
|
||||
+53
-14
@@ -84,6 +84,7 @@ type DocxModule = {
|
||||
Table: new (options: Record<string, unknown>) => unknown;
|
||||
TableCell: new (options: Record<string, unknown>) => unknown;
|
||||
TableRow: new (options: Record<string, unknown>) => unknown;
|
||||
Tab?: new () => unknown;
|
||||
TextRun: new (options: string | Record<string, unknown>) => unknown;
|
||||
WidthType?: Record<string, string>;
|
||||
ExternalHyperlink?: new (options: { children: unknown[]; link: string }) => unknown;
|
||||
@@ -401,21 +402,39 @@ function wordInlineRunToTextRunsForRun(run: WordInlineRun, docx: DocxModule, opt
|
||||
const text = String(option.text ?? "");
|
||||
const baseOption = { ...option };
|
||||
delete baseOption.text;
|
||||
const parts = text.split("\n");
|
||||
const lines = text.split("\n");
|
||||
const textRuns: unknown[] = [];
|
||||
|
||||
parts.forEach((part, index) => {
|
||||
lines.forEach((line, index) => {
|
||||
if (index > 0) {
|
||||
textRuns.push(new docx.TextRun({ ...baseOption, break: 1 }));
|
||||
}
|
||||
if (part || parts.length === 1) {
|
||||
textRuns.push(new docx.TextRun({ ...baseOption, text: part }));
|
||||
if (line || lines.length === 1) {
|
||||
textRuns.push(wordInlineTextRunForSegment(line, docx, baseOption));
|
||||
}
|
||||
});
|
||||
|
||||
return textRuns;
|
||||
}
|
||||
|
||||
function wordInlineTextRunForSegment(text: string, docx: DocxModule, baseOption: Record<string, unknown>) {
|
||||
if (!text.includes("\t") || !docx.Tab) {
|
||||
return new docx.TextRun({ ...baseOption, text });
|
||||
}
|
||||
|
||||
const children: unknown[] = [];
|
||||
text.split("\t").forEach((part, index) => {
|
||||
if (index > 0 && docx.Tab) {
|
||||
children.push(new docx.Tab());
|
||||
}
|
||||
if (part) {
|
||||
children.push(part);
|
||||
}
|
||||
});
|
||||
|
||||
return new docx.TextRun({ ...baseOption, children });
|
||||
}
|
||||
|
||||
function docxAlignmentOption(alignment: WordParagraphAlignment | undefined, docx: DocxModule) {
|
||||
const value = docxAlignmentValue(alignment, docx);
|
||||
return value ? { alignment: value } : {};
|
||||
@@ -626,7 +645,12 @@ async function styledDocxHtmlFromArrayBuffer(arrayBuffer: ArrayBuffer) {
|
||||
const relationshipTargets = relationshipsXml ? docxRelationshipTargetsById(parser.parse(relationshipsXml)) : emptyDocxRelationshipTargets;
|
||||
const imageDataByRelationshipId = await docxImageDataByRelationshipId(zip, relationshipTargets.images);
|
||||
const result = orderedDocxDocumentToHtml(orderedParser.parse(documentXml), relationshipTargets.hyperlinks, imageDataByRelationshipId);
|
||||
return result.hasInlineColorOrHighlight || result.hasParagraphAlignment || result.hasTable || result.hasImage || result.hasLineBreak
|
||||
return result.hasInlineColorOrHighlight ||
|
||||
result.hasParagraphAlignment ||
|
||||
result.hasTable ||
|
||||
result.hasImage ||
|
||||
result.hasLineBreak ||
|
||||
result.hasTab
|
||||
? result.html
|
||||
: "";
|
||||
} catch {
|
||||
@@ -650,6 +674,7 @@ function orderedDocxDocumentToHtml(
|
||||
let hasTable = false;
|
||||
let hasImage = false;
|
||||
let hasLineBreak = false;
|
||||
let hasTab = false;
|
||||
const blocks = orderedElementChildren(body)
|
||||
.flatMap((block) => {
|
||||
const name = orderedElementName(block);
|
||||
@@ -659,6 +684,7 @@ function orderedDocxDocumentToHtml(
|
||||
hasParagraphAlignment = hasParagraphAlignment || result.hasParagraphAlignment;
|
||||
hasImage = hasImage || result.hasImage;
|
||||
hasLineBreak = hasLineBreak || result.hasLineBreak;
|
||||
hasTab = hasTab || result.hasTab;
|
||||
return result.html ? [result.html] : [];
|
||||
}
|
||||
if (name === "w:tbl") {
|
||||
@@ -666,6 +692,7 @@ function orderedDocxDocumentToHtml(
|
||||
hasTable = hasTable || Boolean(result.html);
|
||||
hasImage = hasImage || result.hasImage;
|
||||
hasLineBreak = hasLineBreak || result.hasLineBreak;
|
||||
hasTab = hasTab || result.hasTab;
|
||||
return result.html ? [result.html] : [];
|
||||
}
|
||||
|
||||
@@ -678,7 +705,8 @@ function orderedDocxDocumentToHtml(
|
||||
hasParagraphAlignment,
|
||||
hasTable,
|
||||
hasImage,
|
||||
hasLineBreak
|
||||
hasLineBreak,
|
||||
hasTab
|
||||
};
|
||||
}
|
||||
|
||||
@@ -694,17 +722,19 @@ function orderedDocxParagraphToHtml(
|
||||
let hasInlineColorOrHighlight = false;
|
||||
let hasImage = false;
|
||||
let hasLineBreak = 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;
|
||||
hasTab = hasTab || result.hasTab;
|
||||
return inline.href && result.html ? `<a href="${escapeHtml(inline.href)}">${result.html}</a>` : result.html;
|
||||
});
|
||||
const content = runs.join("");
|
||||
|
||||
if (!content.trim()) {
|
||||
return { html: "", hasInlineColorOrHighlight, hasParagraphAlignment, hasImage, hasLineBreak };
|
||||
return { html: "", hasInlineColorOrHighlight, hasParagraphAlignment, hasImage, hasLineBreak, hasTab };
|
||||
}
|
||||
|
||||
return {
|
||||
@@ -712,7 +742,8 @@ function orderedDocxParagraphToHtml(
|
||||
hasInlineColorOrHighlight,
|
||||
hasParagraphAlignment,
|
||||
hasImage,
|
||||
hasLineBreak
|
||||
hasLineBreak,
|
||||
hasTab
|
||||
};
|
||||
}
|
||||
|
||||
@@ -723,6 +754,7 @@ function orderedDocxTableToHtml(
|
||||
) {
|
||||
let hasImage = false;
|
||||
let hasLineBreak = false;
|
||||
let hasTab = false;
|
||||
const rows = orderedDirectElements(table, "w:tr")
|
||||
.map((row) => {
|
||||
const cells = orderedDirectElements(row, "w:tc")
|
||||
@@ -732,6 +764,7 @@ function orderedDocxTableToHtml(
|
||||
const result = orderedDocxParagraphToHtml(paragraph, hyperlinkTargets, imageDataByRelationshipId);
|
||||
hasImage = hasImage || result.hasImage;
|
||||
hasLineBreak = hasLineBreak || result.hasLineBreak;
|
||||
hasTab = hasTab || result.hasTab;
|
||||
return result.html;
|
||||
})
|
||||
.filter(Boolean);
|
||||
@@ -744,7 +777,7 @@ function orderedDocxTableToHtml(
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
return { html: rows.length > 0 ? `<table><tbody>${rows.join("")}</tbody></table>` : "", hasImage, hasLineBreak };
|
||||
return { html: rows.length > 0 ? `<table><tbody>${rows.join("")}</tbody></table>` : "", hasImage, hasLineBreak, hasTab };
|
||||
}
|
||||
|
||||
function orderedDocxCellText(cell: unknown) {
|
||||
@@ -961,10 +994,11 @@ 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 hasTab = text.includes("\t");
|
||||
let html = escapeHtmlDocxText(text);
|
||||
|
||||
if (!text && !imageHtml) {
|
||||
return { html: "", hasInlineColorOrHighlight, hasImage: false, hasLineBreak };
|
||||
return { html: "", hasInlineColorOrHighlight, hasImage: false, hasLineBreak, hasTab };
|
||||
}
|
||||
|
||||
if (text) {
|
||||
@@ -993,7 +1027,7 @@ function docxRunToHtml(run: unknown, imageDataByRelationshipId: DocxImageDataByR
|
||||
}
|
||||
}
|
||||
|
||||
return { html: `${imageHtml}${text ? html : ""}`, hasInlineColorOrHighlight, hasImage: Boolean(imageHtml), hasLineBreak };
|
||||
return { html: `${imageHtml}${text ? html : ""}`, hasInlineColorOrHighlight, hasImage: Boolean(imageHtml), hasLineBreak, hasTab };
|
||||
}
|
||||
|
||||
function docxRunImageHtml(run: XmlRecord, imageDataByRelationshipId: DocxImageDataByRelationshipId) {
|
||||
@@ -1220,7 +1254,7 @@ function escapeHtml(value: string) {
|
||||
}
|
||||
|
||||
function escapeHtmlDocxText(value: string) {
|
||||
return escapeHtml(value).replace(/\n/g, "<br>");
|
||||
return escapeHtml(value).replace(/\t/g, '<span data-qoffice-tab="true" style="white-space: pre;">\t</span>').replace(/\n/g, "<br>");
|
||||
}
|
||||
|
||||
function collectInlineRuns(nodes: ChildNode[], format: InlineFormat): WordInlineRun[] {
|
||||
@@ -1242,6 +1276,10 @@ function collectInlineSegments(nodes: ChildNode[], format: InlineFormat): Inline
|
||||
return [{ type: "runs", runs: [{ text: "\n", ...format }] }];
|
||||
}
|
||||
|
||||
if (node.getAttribute("data-qoffice-tab") === "true") {
|
||||
return [{ type: "runs", runs: [{ text: "\t", ...format }] }];
|
||||
}
|
||||
|
||||
if (node.tagName.toLowerCase() === "img") {
|
||||
return [{ type: "image", image: imageBlockFromElement(node) }];
|
||||
}
|
||||
@@ -1548,8 +1586,9 @@ function normalizeInlineWhitespace(value: string) {
|
||||
function normalizeInlineRunText(value: string) {
|
||||
return value
|
||||
.replace(/\u00a0/g, " ")
|
||||
.replace(/[^\S\n]+/g, " ")
|
||||
.replace(/ *\n */g, "\n");
|
||||
.replace(/[^\S\n\t]+/g, " ")
|
||||
.replace(/ *\n */g, "\n")
|
||||
.replace(/ *\t */g, "\t");
|
||||
}
|
||||
|
||||
async function loadMammoth() {
|
||||
|
||||
@@ -112,6 +112,23 @@ describe("wordOffice DOCX import", () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it("imports DOCX tabs from OOXML", async () => {
|
||||
const blob = await exportDocxBlob("Tab.docx", '<p>Before<span data-qoffice-tab="true" style="white-space: pre;">\t</span>After</p>');
|
||||
const file = new File([blob], "Tab.docx", {
|
||||
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
|
||||
});
|
||||
const imported = await importDocxFile(file);
|
||||
|
||||
expect(imported.html).toContain('data-qoffice-tab="true"');
|
||||
expect(htmlToWordBlocks(imported.html)).toEqual([
|
||||
{
|
||||
type: "paragraph",
|
||||
text: "Before After",
|
||||
runs: [{ text: "Before\tAfter" }]
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
it("imports DOCX external hyperlinks from OOXML relationships", async () => {
|
||||
const blob = await exportDocxBlob("Hyperlink.docx", '<p>Open <a href="https://example.com/report"><strong>report</strong></a>.</p>');
|
||||
const file = new File([blob], "Hyperlink.docx", {
|
||||
|
||||
Reference in New Issue
Block a user