The Document Preview component provides an embedded viewer for various document formats with navigation, zoom, and download capabilities.
Basic usage
<flx-document-preview
[src]="documentUrl"
[type]="documentType">
</flx-document-preview>
Properties
URL or data URI of the document to preview
type
'pdf' | 'image' | 'text' | 'auto'
default:"auto"
Type of document. Set to ‘auto’ to detect from file extension
Height of the preview container
Shows toolbar with controls
Shows download button in toolbar
Shows print button in toolbar
Shows page navigation for multi-page documents
Initial zoom level (1 = 100%)
Name of the file for download
Events
Emitted when document finishes loading
Emitted when document fails to load
Emitted when current page changes
Examples
PDF preview
Image preview
Dynamic document
Minimal toolbar
Custom zoom
From API
<flx-document-preview
[src]="pdfUrl"
type="pdf"
height="800px"
fileName="document.pdf">
</flx-document-preview>
export class PDFViewer {
pdfUrl = '/assets/documents/report.pdf';
}
<flx-document-preview
[src]="imageUrl"
type="image"
[showNavigation]="false">
</flx-document-preview>
export class ImageViewer {
imageUrl = '/assets/images/diagram.png';
}
<flx-select
label="Select document"
[(ngModel)]="selectedDoc"
[options]="documents">
</flx-select>
<flx-document-preview
*ngIf="selectedDoc"
[src]="selectedDoc.url"
[type]="selectedDoc.type"
[fileName]="selectedDoc.name"
(load)="onDocumentLoad()"
(error)="onDocumentError($event)">
</flx-document-preview>
export class DocumentLibrary {
selectedDoc: any;
documents = [
{ value: '1', label: 'Annual Report', url: '/docs/annual-report.pdf', type: 'pdf', name: 'annual-report.pdf' },
{ value: '2', label: 'Org Chart', url: '/docs/org-chart.png', type: 'image', name: 'org-chart.png' },
{ value: '3', label: 'Meeting Notes', url: '/docs/notes.txt', type: 'text', name: 'notes.txt' }
];
onDocumentLoad() {
console.log('Document loaded successfully');
}
onDocumentError(error: Error) {
console.error('Failed to load document:', error);
}
}
<flx-document-preview
[src]="documentUrl"
[showDownload]="false"
[showPrint]="false"
[showZoom]="false">
</flx-document-preview>
<flx-document-preview
[src]="documentUrl"
[initialZoom]="1.5"
type="pdf">
</flx-document-preview>
<flx-document-preview
*ngIf="documentData"
[src]="documentData"
type="pdf"
[fileName]="fileName">
</flx-document-preview>
export class APIDocumentViewer implements OnInit {
documentData: string;
fileName = 'invoice.pdf';
constructor(private documentService: DocumentService) {}
async ngOnInit() {
const blob = await this.documentService.getDocument('invoice-123');
const reader = new FileReader();
reader.onloadend = () => {
this.documentData = reader.result as string;
};
reader.readAsDataURL(blob);
}
}
The Document Preview component supports:
- PDF: Full-featured PDF viewer with navigation and zoom
- Images: JPG, PNG, GIF, SVG, WebP
- Text: Plain text files (TXT, CSV, JSON, XML)
For security reasons, the component does not support executable files or scripts. Microsoft Office formats (DOC, XLS, PPT) require server-side conversion to PDF.
Styling
flx-document-preview {
--flx-preview-background: #f3f4f6;
--flx-preview-toolbar-background: #ffffff;
--flx-preview-toolbar-height: 48px;
--flx-preview-border-color: #d1d5db;
--flx-preview-button-color: #374151;
--flx-preview-button-hover-background: #f3f4f6;
}
Best practices
- Always provide a
fileName for better download experience
- Set appropriate
height based on your layout
- Handle load errors gracefully with fallback UI
- Use loading indicators while documents load
- Consider file size limits for client-side rendering
- For sensitive documents, ensure proper authentication
- Test with various document types and sizes
For large PDF files, consider showing a loading indicator and implementing progressive loading or thumbnail previews.
Accessibility
- PDF content maintains document accessibility features
- Keyboard navigation support (arrow keys, page up/down)
- Focus management for toolbar controls
- Screen reader compatible
- Alternative text for images