A powerful file preview component library that supports PDF and Office documents (DOCX, PPTX, XLSX, XLS) with a modern web interface.
- 📄 PDF Preview: Full PDF document rendering with zoom and navigation
- 📊 Office Documents: Support for Microsoft Office formats
- Word documents (DOCX)
- PowerPoint presentations (PPTX)
- Excel spreadsheets (XLSX, XLS)
- 🎨 Modern UI: Clean and responsive design with loading states
- 🔧 Customizable: Configurable options for different use cases
- 🚀 Lightweight: Optimized bundle size for better performance
- 🛡️ TypeScript: Full TypeScript support with type definitions
npm install @ranui/preview
# or
pnpm add @ranui/preview
# or
yarn add @ranui/preview<!DOCTYPE html>
<html>
<head>
<title>File Preview Demo</title>
</head>
<body>
<input type="file" id="fileInput" />
<r-preview id="preview"></r-preview>
<script type="module">
import '@ranui/preview';
const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const url = URL.createObjectURL(file);
preview.setAttribute('src', url);
}
});
</script>
</body>
</html>import { preview } from '@ranui/preview';
// The component is automatically registered as a custom element
// You can now use <r-preview> in your HTML| Attribute | Type | Default | Description |
|---|---|---|---|
src |
string | - | File URL or blob URL to preview |
closeable |
boolean | false | Whether to show close button |
baseUrl |
string | 'https://ranuts.github.io/document' | Base URL for Office document rendering |
label |
string | - | Custom label for the preview |
| Method | Description |
|---|---|
showPreview() |
Manually trigger preview display |
closePreview() |
Close the preview modal |
| Event | Description |
|---|---|
load |
Fired when file is successfully loaded |
error |
Fired when file loading fails |
- PDF:
application/pdf - Word:
application/vnd.openxmlformats-officedocument.wordprocessingml.document - PowerPoint:
application/vnd.openxmlformats-officedocument.presentationml.presentation - Excel:
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet(XLSX)application/vnd.ms-excel(XLS)
- Node.js >= 23.10.0
- pnpm (recommended)
# Clone the repository
git clone https://github.com/ranuts/fileview.git
cd fileview
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm build
# Run tests
pnpm testpnpm dev- Start development server with hot reloadpnpm build- Build for productionpnpm test- Run test suitepnpm test:ui- Run tests with UIpnpm test:report- Show test report
- Chrome >= 88
- Firefox >= 85
- Safari >= 14
- Edge >= 88
AGPL-3.0 License - see LICENSE file for details.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
If you encounter any issues or have questions, please open an issue on GitHub.