🌐 Live Demo: https://ranuts.github.io/document/
A local web-based document editor based on OnlyOffice, allowing you to edit documents directly in your browser without server-side processing, ensuring your privacy and security.
- 🔒 Privacy-First: All document processing happens locally in your browser, with no uploads to any server
- 📝 Multi-Format Support: Supports DOCX, XLSX, PPTX, CSV, and many other document formats
- ⚡ Real-Time Editing: Provides smooth real-time document editing experience
- 🚀 No Server Required: Pure frontend implementation with no server-side processing needed
- 🎯 Ready to Use: Start editing documents immediately by opening the webpage
- 🌐 Open from URL: Load documents directly from remote URLs via URL parameters
- 🌍 Multi-Language: Supports multiple languages (English, Chinese) with easy switching
- Visit the Online Editor
- Upload your document files or open from URL
- Edit directly in your browser
- Download the edited documents
| Parameter | Description | Values/Type | Priority |
|---|---|---|---|
locale |
Set interface language | en, zh |
- |
src |
Open document from URL (recommended) | URL string | Low |
file |
Open document from URL (backward compatible) | URL string | High |
Examples:
# Set language
?locale=zh
# Open document from URL
?src=https://example.com/document.docx
# Combine parameters
?locale=zh&src=https://example.com/doc.docxNote: When both file and src are provided, file takes priority. Remote URLs must support CORS.
This project provides foundational services for document preview components in the @ranui/preview WebComponent library.
📚 Preview Component Documentation: https://chaxus.github.io/ran/src/ranui/preview/
- OnlyOffice SDK: Provides powerful document editing capabilities
- WebAssembly: Implements document format conversion through x2t-wasm
- Pure Frontend Architecture: All functionality runs in the browser
# docker run
docker run -d --name document -p 8080:8080 ghcr.io/ranui/document:latest
# docker compose
services:
document:
image: ghcr.io/ranui/document:latest
container_name: document
ports:
- 8080:8080- CORS: Remote servers must support CORS when using
srcorfileparameters - File Size: Large files may take longer to load
git clone https://github.com/ranuts/document.git
cd document
npm install
npm run devThis project is designed as an open-source solution, and therefore does not include proprietary font files such as Arial, Times New Roman, Microsoft YaHei, SimSun, and other Windows system fonts that are subject to copyright restrictions. These font references remain in the configuration files for compatibility with existing documents, but the actual font files have been removed to ensure compliance with open-source licensing requirements.
To add fonts that are already configured in the project (such as Arial, Times New Roman, etc.), simply place the font files in the public/fonts/ directory and rename them to match their corresponding index in the __fonts_files array in public/sdkjs/common/AllFonts.js.
Example: Adding Arial Font
If you want to add the Arial font to the project:
- Check
AllFonts.jsand find that Arial regular font uses index223in the__fonts_filesarray - Place your Arial font file in
public/fonts/and rename it to223(no extension needed) - The font file should be located at
public/fonts/223 - When the application references index
223, it will automatically load the font file frompublic/fonts/223
Similarly, for other Arial variants:
- Arial Bold uses index
226→ place font file aspublic/fonts/226 - Arial Italic uses index
224→ place font file aspublic/fonts/224 - Arial Bold Italic uses index
225→ place font file aspublic/fonts/225
You can find the index for any font by checking the __fonts_infos array in AllFonts.js, where each font entry specifies the indices for its regular, bold, italic, and bold-italic variants.
Note: Only use open-source fonts or fonts for which you have proper licensing rights. Ensure compliance with font licensing terms before adding any font files.
- onlyoffice-x2t-wasm - WebAssembly-based document converter
- se-office - Secure document editor
- web-apps - OnlyOffice web applications
- sdkjs - OnlyOffice JavaScript SDK
- onlyoffice-web-local - Local web-based OnlyOffice implementation
Issues and Pull Requests are welcome to help improve this project!
See the LICENSE file for details.