cosmos-pdf-viewer

Zero-dependency PDF viewer. Uses the browser's built-in PDF engine for pixel-perfect rendering.

Install

npm install cosmos-pdf-viewer

Usage in Angular

import { CosmosPdfViewer } from 'cosmos-pdf-viewer';

@Component({
  selector: 'app-pdf-viewer',
  template: '<div #pdfContainer class="pdf-container"></div>',
  styles: [':host { display: block; width: 100%; height: 100%; } .pdf-container { width: 100%; height: 100%; position: relative; }'],
})
export class PdfViewerComponent implements AfterViewInit, OnDestroy {
  @Input() pdfSrc: any;
  @ViewChild('pdfContainer', { static: true }) pdfContainer!: ElementRef;
  private viewer!: CosmosPdfViewer;

  ngAfterViewInit() {
    this.viewer = new CosmosPdfViewer(this.pdfContainer.nativeElement, {
      enableToolbar: false,
    });
    if (this.pdfSrc) this.viewer.load(this.pdfSrc);
  }

  ngOnDestroy() {
    this.viewer?.destroy();
  }
}

Usage in React

import { useRef, useEffect } from 'react';
import { CosmosPdfViewer } from 'cosmos-pdf-viewer';

function PdfViewer({ src }) {
  const ref = useRef(null);
  const viewer = useRef(null);

  useEffect(() => {
    viewer.current = new CosmosPdfViewer(ref.current, { enableToolbar: false });
    return () => viewer.current?.destroy();
  }, []);

  useEffect(() => {
    if (src) viewer.current?.load(src);
  }, [src]);

  return <div ref={ref} style={{ width: '100%', height: '100%', position: 'relative' }} />;
}

Options

| Option | Type | Default | Description | |--------------------|-----------|---------|----------------------------| | enableToolbar | boolean | true | Show entire toolbar | | enableFileName | boolean | true | Show file name | | enableNavigation | boolean | true | Show page controls | | enableZoom | boolean | true | Show zoom controls | | enableDownload | boolean | true | Show download button | | enablePrint | boolean | true | Show print button | | zoom | number | 100 | Starting zoom % | | zoomStep | number | 2 | Zoom increment per click | | minZoom | number | 10 | Minimum zoom % | | maxZoom | number | 500 | Maximum zoom % |

API

viewer.load(source);     // File, Blob, ArrayBuffer, Uint8Array, or URL string
viewer.goToPage(3);
viewer.setZoom(150);
viewer.download();
viewer.print();
viewer.destroy();

Build

npm run build