Simple Office Previewer (SOP) — Angular

Client-side, high-fidelity .docx / .xlsx / .pptx preview 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-previewer/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-previewer/angular

This installs the package (and its @simple-office-previewer/core dependency) and wires the WASM/worker assets core ships into your angular.json (assets glob) automatically, so OFFICE_PREVIEW_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-previewer/angular

Copy node_modules/@simple-office-previewer/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-previewer/core/assets",
  "output": "office-preview-assets"
}

Usage

import { Component } from '@angular/core';
import { OfficePreviewComponent } from '@simple-office-previewer/angular';

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

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

import { OFFICE_PREVIEW_ASSETS_BASE_URL } from '@simple-office-previewer/angular';

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

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

<opv-office-preview [file]="file">
  <ng-template #opvEmptyTemplate><my-icon /></ng-template>
  <ng-template #opvLoadingTemplate><app-spinner /></ng-template>
</opv-office-preview>