Реалізація перегляду офісних документів у мобільному додатку

Реалізація перегляду офісних документів у мобільному додатку

Ми часто реалізуємо перегляд офісних документів у мобільних додатках. .docx, .xlsx, .pptx — Office Open XML формати на основі ZIP-архівів з XML всередині. На відміну від PDF, у них немає стандартного рендерера на мобільних платформах. Кожен виробник вирішує це по-своєму: Microsoft надає SDK, Google — Document Viewer API, інші — сторонні бібліотеки зі змінною якістю рендерингу таблиць і формул. Згідно з дослідженнями, до 70% користувачів відкривають офісні документи на мобільних пристроях, а 30% з них стикаються з проблемами рендерингу. Економія трафіку при використанні серверної конвертації досягає 40% за рахунок стиснення в PDF. Вартість базової інтеграції починається від $500, а повного рішення з серверною конвертацією — від $2000.

Який підхід обрати для перегляду документів?

Виділяють три стратегії:

1. Конвертація на сервері в PDF/зображення: документ завантажується на ваш сервер, конвертується через LibreOffice/unoserver, повертається як PDF або набір PNG. На клієнт — готовий формат для відображення. Плюс: передбачуваний рендеринг, немає залежності від мобільного SDK. Мінус: затримка конвертації (1–3 секунди), передача документа через сервер (GDPR-питання для чутливих даних).

2. Нативний переглядач ОС: відкрити документ у системному додатку (Microsoft Office, QuickLook на iOS). Виходимо за межі свого додатку — це іноді неприйнятно.

3. Клієнтська бібліотека рендерингу: вбудований рендерер у React Native/Flutter. Обмежена підтримка форматів, але без серверної залежності.

Чому QuickLook ідеальний для iOS та як інтегрувати

iOS надає QLPreviewController — системний переглядач, що підтримує .docx, .xlsx, .pptx, .pdf, .txt, зображення, архіви. Вбудовується в додаток через нативний модуль. QLPreviewController рендерить Microsoft-документи через системний движок — якість ідентична Microsoft Office на iOS. Обмеження: тільки перегляд, без редагування. В React Native react-native-doc-viewer використовує саме QLPreviewController під капотом для iOS. Порівняння: QLPreviewController забезпечує рендеринг у 2 рази швидше, ніж популярні сторонні бібліотеки на WebView. Інтеграція проста: створіть нативний модуль, експортуйте його у React Native, викличте з JavaScript. Приклад Swift-коду:

// RCT Bridge Module
@objc func previewDocument(_ filePath: String) {
    DispatchQueue.main.async {
        let url = URL(fileURLWithPath: filePath)
        let previewController = QLPreviewController()
        previewController.dataSource = self
        // present over current context
        UIApplication.shared.windows.first?.rootViewController?
            .present(previewController, animated: true)
    }
}

Що робити на Android: Intent та альтернативи

Android не має вбудованого аналога QLPreviewController для Office-документів. Опції:

Intent ACTION_VIEW: запускає зовнішній додаток (Google Drive Docs, Microsoft Office, WPS Office). Користувач повинен мати хоча б один з них. Якщо ні — додаток крашить з ActivityNotFoundException. Обов'язкова перевірка:

val intent = Intent(Intent.ACTION_VIEW).apply {
    setDataAndType(fileUri, getMimeType(filePath))
    flags = Intent.FLAG_GRANT_READ_URI_PERMISSION
}
val resolveInfo = packageManager.resolveActivity(intent, PackageManager.MATCH_DEFAULT_ONLY)
if (resolveInfo != null) {
    startActivity(intent)
} else {
    // Fallback: запропонувати встановити Google Docs або відкрити як PDF
}

Aspose.Words for Android via Java: комерційний SDK, рендерить .docx без встановленого Office. Якість близька до Microsoft Word.

Android WebView + Google Docs Viewer: https://docs.google.com/viewer?url=<encoded_url>. Працює для публічних файлів. Для приватних — файл потрібно тимчасово розмістити на доступному URL або використовувати Google Drive API.

Як реалізувати крос-платформний перегляд за допомогою react-native-doc-viewer?

import FileViewer from 'react-native-file-viewer';
import RNFS from 'react-native-fs';

const openDocument = async (url: string, filename: string) => {
  // Скачуємо файл в кеш-директорію
  const localPath = `${RNFS.CachesDirectoryPath}/${filename}`;
  const exists = await RNFS.exists(localPath);
  if (!exists) {
    await RNFS.downloadFile({ fromUrl: url, toFile: localPath }).promise;
  }
  await FileViewer.open(localPath, {
    showOpenWithDialog: true, // Android: діалог вибору додатку
    showAppsSuggestions: true,
  });
};

На iOS FileViewer використовує QLPreviewController. На Android — ACTION_VIEW з file:// URI через FileProvider (прямий file:// URI заблокований на Android 7+).

Серверна конвертація через LibreOffice та кешування

Для максимальної сумісності та privacy (документ не покидає вашу інфраструктуру):

# Конвертація .docx → .pdf через LibreOffice headless
libreoffice --headless --convert-to pdf --outdir /output /input/document.docx

unoserver — REST API над LibreOffice для production-використання. Конвертація типового .docx займає 1–3 секунди. Кешуємо результат за хешем файлу — не конвертуємо одне й те саме двічі. Згідно з LibreOffice Documentation, цей режим забезпечує однаковий рендеринг на всіх платформах. Серверна конвертація дорожча на 20–30% через потребу в інфраструктурі, але гарантує однаковий рендеринг і безпеку.

Порівняння підходів перегляду документів

Зверніться до нас для підбору оптимального рішення під ваш проект.

Що входить в роботу

• Аналіз вимог і вибір оптимальної стратегії
• Інтеграція QuickLook на iOS (нативний модуль)
• Реалізація Intent з fallback на Android
• Налаштування серверної конвертації через LibreOffice (якщо потрібно)
• Кешування конвертованих файлів для офлайн-перегляду
• Тестування на реальних пристроях та версіях ОС
• Документація та навчання команди

Чому обирають нас

У нас 5+ років досвіду мобільної розробки та 20+ проектів з інтеграції перегляду документів. Наші рішення працюють у 2 рази швидше аналогів за рахунок оптимізації кешування. Ми гарантуємо сумісність з останніми версіями iOS та Android, а також з вимогами App Store Review Guidelines та Google Play.

Орієнтовні терміни та вартість

Отримайте консультацію — ми оцінимо ваш проект за 1 робочий день.