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

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

.docx, .xlsx, .pptx — Office Open XML формати на основі ZIP-архівів з XML всередину. На відміну від PDF, у них немає стандартного рендерера на мобільних платформах. Кожен виробник вирішує це по-своєму: Microsoft надає SDK, Google — Document Viewer API, решта — сторонні бібліотеки з змінною якістю рендеринга таблиць та формул.

Три стратегії

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

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

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

iOS: QuickLook та QLPreviewController

iOS надає QLPreviewController — системний просмотрщик, що підтримує .docx, .xlsx, .pptx, .pdf, .txt, зображення, архіви. Вбудовується у застосунок через нативний модуль:

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

QuickLook рендерить Microsoft-документи через системний рушій — якість ідентична Microsoft Office на iOS. Обмеження: лише перегляд, без редагування.

У React Native: react-native-doc-viewer використовує QLPreviewController під капотом для iOS.

Android: немає єдиного системного просмотрщика

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. Ліцензія від $999/рік.

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,
    showAppsSuggestions: true,
  });
};

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

Конвертація на сервері: LibreOffice Headless

Для максимальної сумісності та privacy:

libreoffice --headless --convert-to pdf --outdir /output /input/document.docx

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

Порівняння підходів

Оцінка

QuickLook + Android Intent з fallback на серверну конвертацію: 2–4 тижні. З кешуванням та офлайн-підтримкою: 4–6 тижнів.