Word preview
A read-only viewer that shows .docx documents the way Word does, page by page. The style chain, numbering, table styles, line spacing, line breaks and page breaks are measured against Word itself. The file is read in the browser by a dependency-free reader; macros and embedded objects never run and external links are never fetched. Hyperlinks to external targets are drawn as links that open in a new tab (rel="noopener noreferrer"); only http, https, mailto, tel, ftp and sms targets become links, so a javascript: or data: target stays plain text.
It ships as its own entry point of the spreadsheet packages, so an application that only shows workbooks never loads it, and it is covered by the same license. Line and page breaks follow the fonts the browser has: where a document's fonts are missing, a metric-compatible face is used when there is one.
Getting started
Point source at a document. Page Up, Page Down, Home and End move between pages, and pages are drawn only when they come near the viewport.
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeWordDocument } from '@oge-ui/spreadsheet/word';
@Component({
selector: 'demo-root',
imports: [OgeWordDocument],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- One element shows a .docx file the way Word does, page by page.
[source] takes a URL, the file's bytes or a File; reading happens in the
browser, with no dependency. Page Up/Down, Home and End move between
pages. -->
<oge-word-document
source="/demo/spreadsheet/document.docx"
style="height: 640px"
/>
`,
})
export class Demo {}Controlled page
[(pageIndex)] keeps the page in your own state: it follows the scrolling and scrolls when you set it.
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeWordDocument } from '@oge-ui/spreadsheet/word';
@Component({
selector: 'demo-root',
imports: [OgeWordDocument],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- [(pageIndex)] keeps the page in your own state: it follows the
scrolling and scrolls when you set it. -->
<oge-word-document
source="/demo/spreadsheet/document.docx"
[(pageIndex)]="page"
style="height: 480px"
/>
`,
})
export class Demo {
readonly page = signal(1);
}