ooxml-pages

Render Word (.docx) and PowerPoint (.pptx) files in the browser as real pages and slides.

• Laid out like Word: line breaking, page breaks, columns, sections, headers and footers, footnotes and endnotes, tables that split across pages, floating pictures with every wrap type, keep-with-next, widow control.
• View only, and small: about 160 KB (min + gzip) for Word including the PowerPoint drawing code, about 100 KB for PowerPoint alone. No framework, one dependency (zip.js).
• Fast: a typical document lays out in a few hundred milliseconds; pages are drawn lazily while scrolling.
• PDF export: the same pages as real PDFs, with selectable text, embedded fonts and vector graphics (optional entry point).
• Private: everything happens in the browser. Nothing is uploaded, and no script from the document is ever run.

Live demo · Changelog

Install

npm install ooxml-pages

Usage

import { renderDocx } from 'ooxml-pages/docx';
import 'ooxml-pages/docx.css';

const view = await renderDocx(file, document.getElementById('pages')!, {
  root: document.getElementById('scroller'), // the element that scrolls, for lazy rendering
  onProgress: ({ phase, fraction }) => console.log(phase, fraction),
});
console.log(view.pages.length, 'pages');
// later
view.destroy();

import { renderPptx } from 'ooxml-pages/pptx';
import 'ooxml-pages/pptx.css';

const view = await renderPptx(file, container, {
  // Optional: wrap each slide, e.g. with a caption.
  frame: (slide, { index, hidden }) => {
    const figure = document.createElement('figure');
    const caption = document.createElement('figcaption');
    caption.textContent = `Slide ${index + 1}${hidden ? ' (hidden)' : ''}`;
    figure.append(slide, caption);
    return figure;
  },
});

file is any Blob (a File from an <input>, a fetch response's blob() …). Pages and slides are laid out at 96 dpi in CSS pixels; scale them with CSS (zoom or transform) to fit your layout.

Options

Option	Default
lazy	true	Draw pages only when they come near the visible area. false draws all of them in order.
root	viewport	The scrolling element, used for lazy rendering (and for scrolling to bookmarks in Word documents).
preloadMargin	'1600px 0px' (Word), '1200px 0px' (PowerPoint)	How far outside the visible area pages are prepared.
errorText	'This page could not be displayed.'	Shown in place of a page that fails to render.
onProgress		Word: { phase: 'read' | 'parse' | 'layout' | 'relayout', fraction? }. PowerPoint: share of slides read (0–1).
frame		PowerPoint only: wraps each slide element before it is added.

Both views have renderNow(index), settled() (resolves once everything started so far is drawn) and destroy(). A Word view also has scrollToBookmark(name); links inside the document (tables of contents, cross references) already use it.

Lower level

To draw pages yourself (thumbnails, printing, your own virtual scrolling), load the document without any DOM output and render single pages into elements you own:

import { layoutDocx } from 'ooxml-pages/docx';
import { loadPresentation } from 'ooxml-pages/pptx';

const doc = await layoutDocx(file);            // { pages: [{ width, height, number }], bookmarks, renderPage, close }
await doc.renderPage(0, element);

const deck = await loadPresentation(file);     // { width, height, slides: [{ hidden }], renderSlide, close }
await deck.renderSlide(0, element);

Call close() when done: it releases the file, the picture URLs and embedded fonts.

Metafiles

The EMF and WMF renderer that Word pictures use is available on its own, for showing .emf, .wmf, .emz and .wmz files:

import { metafileToPng } from 'ooxml-pages/metafile';

const png = await metafileToPng(new Uint8Array(await file.arrayBuffer())); // Blob, or null if it cannot be drawn

It replays the GDI records on a canvas (at most 2400 px on the longer side), so it needs a DOM.

Content

ooxml-pages/content reads what a Word document says without laying it out, for converting it into another markup (LaTeX, Markdown, HTML …):

import { readDocxContent } from 'ooxml-pages/content';

const content = await readDocxContent(file);
for (const block of content.blocks) {
  if (block.type === 'paragraph') console.log(block.outlineLevel, block.list?.marker, block.inlines);
  else console.log(block.rows.length, 'rows'); // a table
}
const picture = await content.picture(id); // Blob of a picture inline (PNG for EMF/WMF)
content.close();

Paragraphs come with their style, outline level (0 for Heading 1), alignment and list marker as Word numbers it; text runs with bold, italic, underline, strike, super- and subscript, caps, monospace and links (runs that look the same are joined). Tables give their grid widths and cells with column and row spans (vertical merges resolved), notes are separate maps referenced from the text, equations stay Office MathML elements, and text frames and boxes appear where they are anchored. Field results and symbol fonts come as Unicode text; hidden text is left out.

PDF

ooxml-pages/pdf turns documents and presentations into PDFs that look like the rendered pages: real text (selectable, searchable, in reading order), embedded fonts reduced to the characters used, vector shapes, charts and gradients, pictures, equations, and working links (web, mail and bookmarks).

npm install @cantoo/pdf-lib @cantoo/fontkit

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗