Simple Office Viewer (SOV) — Angular

Client-side, high-fidelity .docx / .xlsx / .pptx viewer for Angular. Renders entirely in the browser via a .NET WebAssembly engine — no upload, no server round-trip. Rendering runs in a dedicated Web Worker, off the main thread.

This package is an Angular wrapper around OfficeCLI's WASM rendering engine. All the actual OOXML rendering — parsing, layout, formulas, pivot tables, PowerPoint effects — happens in OfficeCLI; this repo only adds the Angular component, worker, and build wiring around it (via the framework-agnostic @simple-office-viewer/core engine this package depends on). Full credit for fidelity here belongs to OfficeCLI.

Source, engine-pinning details, and the demo app live at github.com/IoannisMaras/simple-office-previewer.

Install

ng add @simple-office-viewer/angular

This installs the package (and its @simple-office-viewer/core dependency) and wires the WASM/worker assets core ships into your angular.json (assets glob) automatically, so OFFICE_VIEWER_ASSETS_BASE_URL works with its default value out of the box. Pass --project=<name> in a multi-project workspace if it can't be inferred.

npm install @simple-office-viewer/angular

Copy node_modules/@simple-office-viewer/core/assets into your build output (an angular.json assets glob) — it contains the WASM engine and the worker bundle this library loads at runtime:

{
  "glob": "**/*",
  "input": "node_modules/@simple-office-viewer/core/assets",
  "output": "office-viewer-assets"
}

Usage

import { Component } from '@angular/core';
import { OfficeViewerComponent } from '@simple-office-viewer/angular';

@Component({
  standalone: true,
  imports: [OfficeViewerComponent],
  template: `<osv-office-viewer [file]="file" style="display:block;height:600px" />`,
})
export class MyComponent {
  file: File | null = null;
}

OFFICE_VIEWER_ASSETS_BASE_URL only needs providing if you served the assets somewhere other than office-viewer-assets/ (e.g. a CDN, or a different output in your angular.json glob):

import { OFFICE_VIEWER_ASSETS_BASE_URL } from '@simple-office-viewer/angular';

providers: [{ provide: OFFICE_VIEWER_ASSETS_BASE_URL, useValue: 'https://cdn.example.com/office-viewer/' }],

Optional empty/loading placeholders — plain template reference variables, no extra import needed:

<osv-office-viewer [file]="file">
  <ng-template #osvEmptyTemplate><my-icon /></ng-template>
  <ng-template #osvLoadingTemplate><app-spinner /></ng-template>
</osv-office-viewer>