Simple Office Previewer (SOP)

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.

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

Install

npm install simple-office-previewer

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

Usage

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

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

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>