skip to:contentpackage searchsign in ❤ Pro Teams Pricing Documentation npm Search packages Search universal-file-viewer 1.0.1 • Public • Published 2 months ago /universal-file-viewer/README.md / universal-file-viewer / README.md

Back 288 LOC 8.19 kB

Universal File Viewer

An enterprise-ready multi-format document viewer for web applications, supporting preview of PDF, Word, Excel, PowerPoint, and image files with a clean and extensible API.

Features

• 📄 PDF Support - View PDF documents with zoom, pagination, thumbnail navigation, and password-protected file support
• 📝 Word Documents - Render .doc and .docx files with full formatting preservation
• 📊 Excel Spreadsheets - Display .xls and .xlsx files with interactive spreadsheet functionality
• 🖼️ Image Viewer - Support for multiple image formats (JPG, PNG, GIF, BMP, TIFF)
• 🔒 Password Protection - Handle password-protected PDF files
• 📱 Responsive Design - Works seamlessly across different screen sizes
• ⚡ Performance Optimized - Efficient rendering with lazy loading
• 🎨 Customizable UI - Clean interface with control panels for navigation and zoom
• 📥 Download Support - Optional download functionality for documents

Supported File Formats

| Format | Extensions | Status | |--------|-----------|--------| | PDF | .pdf | ✅ Supported | | Word | .doc, .docx | ✅ Supported | | Excel | .xls, .xlsx | ✅ Supported | | PowerPoint | .ppt, .pptx | 🚧 Planned | | Images | .jpg, .jpeg, .png, .gif, .bmp, .tiff | ✅ Supported |

Installation

npm install universal-file-viewer

Usage

Basic Example

import React from 'react';
import { DocumentViewer } from 'universal-file-viewer';

function App() {
  const [file, setFile] = React.useState(null);
  const [fileExt, setFileExt] = React.useState('');

  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];
    if (selectedFile) {
      setFile(selectedFile);
      const extension = selectedFile.name.split('.').pop().toLowerCase();
      setFileExt(extension);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {file && (
        <DocumentViewer
          file={file}
          fileExt={fileExt}
          fileName={file.name}
        />
      )}
    </div>
  );
}

export default App;

PDF Viewer with Download

<DocumentViewer
  file={pdfFile}
  fileExt="pdf"
  fileName="document.pdf"
  showDownload={true}
  pdfDownloadData={{
    url: 'https://example.com/document.pdf',
    filename: 'document.pdf'
  }}
/>

Image Viewer (Multiple Images)

<DocumentViewer
  file={[image1, image2, image3]} // Array of image files
  fileExt="jpg"
  fileName="images"
  showDownload={false}
/>

Word Document Viewer

<DocumentViewer
  file={docxFile}
  fileExt="docx"
  fileName="report.docx"
/>

Excel Spreadsheet Viewer

<DocumentViewer
  file={xlsxFile}
  fileExt="xlsx"
  fileName="spreadsheet.xlsx"
/>

API Reference

DocumentViewer Component

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | file | File or File[] | Yes | - | The file object(s) to display. For images, can be an array | | fileExt | string | Yes | - | File extension (e.g., 'pdf', 'docx', 'xlsx', 'jpg') | | fileName | string | No | - | Display name for the document | | showDownload | boolean | No | false | Show download button in control panel | | pdfDownloadData | object | No | - | Download configuration for PDF files | | pdfDownloadData.url | string | No | - | URL for downloading the file | | pdfDownloadData.filename | string | No | - | Filename for the download |

Features by File Type

PDF Viewer

• ✅ Zoom in/out controls
• ✅ Page navigation (next/previous/jump to page)
• ✅ Thumbnail view for quick navigation
• ✅ Password-protected PDF support
• ✅ Download functionality
• ✅ Responsive scaling

Word Viewer

• ✅ Full formatting preservation
• ✅ Headers and footers rendering
• ✅ Page-by-page navigation
• ✅ Thumbnail navigation
• ✅ Scroll-based viewing

Excel Viewer

• ✅ Interactive spreadsheet display
• ✅ Multiple sheet support
• ✅ Formula rendering
• ✅ Charts and shapes support
• ✅ Excel 2013 white theme

Image Viewer

• ✅ Zoom controls
• ✅ Multi-image support with pagination
• ✅ Responsive image scaling
• ✅ Support for multiple formats

Dependencies

This package uses the following key libraries:

• PDF.js - PDF rendering
• docx-preview - Word document rendering
• @mescius/spread-sheets - Excel spreadsheet rendering
• React - UI framework

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Development

Build

npm run build

This will compile the source code and output to the dist directory.

Project Structure

src/
├── components/
│   ├── DocumentViewer.js       # Main component
│   └── viewers/
│       ├── PDFViewer/          # PDF viewer implementation
│       ├── DocViewer/          # Word document viewer
│       ├── ExcelViewer/        # Excel spreadsheet viewer
│       └── ImageViewer/        # Image viewer
├── commons/
│   └── Loader.js               # Loading component
├── consts/
│   └── index.js                # File type constants
├── styles.css                  # Component styles
└── index.js                    # Package entry point

Styling

The component comes with default styles. You can override them by targeting the following CSS classes:

• .PDFheading - Document header
• .control_panel - Control panel styling
• .sectionBag - Main viewer container
• .doc-preview-wrapper - Word document wrapper
• .thumbnail-container - Thumbnail navigation

Security Considerations

• Password-protected PDFs are handled securely in the browser
• File processing happens client-side
• No data is sent to external servers
• Ensure proper file validation before passing to the viewer

Performance Tips

1. Large Files: For large PDF files, consider implementing pagination or lazy loading
2. Multiple Images: Use optimized image formats and sizes
3. Excel Files: Large spreadsheets may take time to render initially
4. Memory Management: Clear file references when unmounting components

Troubleshooting

PDF Not Rendering

• Ensure the file is a valid PDF
• Check if the file requires a password
• Verify browser console for errors

Word Document Formatting Issues

• Some complex Word features may not render perfectly
• Ensure the file is in .docx format for best results

Excel Spreadsheet Not Loading

• Verify the file is in .xlsx or .xls format
• Check browser console for import errors
• Ensure the file is not corrupted

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Authors

• Sarbasish Mishra - Primary Author
• Krishna Amarghade - Contributor

License

This project is licensed under the MIT License - see the LICENSE file for details.

Roadmap

• [ ] PowerPoint (.ppt, .pptx) support
• [ ] Text file (.txt) support
• [ ] CSV file viewer
• [ ] Print functionality
• [ ] Annotation support for PDFs
• [ ] Full-screen mode
• [ ] Keyboard shortcuts
• [ ] Mobile touch gestures

Support

For issues, questions, or contributions, please visit the GitHub repository.

Changelog

Version 1.0.0

• Initial release
• PDF viewer with password support
• Word document viewer
• Excel spreadsheet viewer
• Image viewer with multi-image support
• Download functionality
• Responsive design Package Sidebar Install npm i [email protected]