Convertix (app4docs) — инструменты для работы с документами
Набор офисных инструментов: сравнение, конвертация и правка Excel, Word, PDF,
PowerPoint, HTML и изображений, плюс несколько игр. Это одностраничное
веб-приложение (React + Vite), которое выкладывается мэшапом в Qlik Sense.
Главный принцип — всё работает в браузере пользователя. Серверной части
нет, файлы никуда не отправляются, интернет не нужен. Сервер только раздаёт
статические файлы сборки. Тяжёлые движки (распознавание текста, нейросеть
удаления фона, Python для PDF → PowerPoint) лежат рядом со сборкой и работают
через WebAssembly.
Содержание
Быстрый старт
git clone <url-репозитория>
cd app4docs
npm install
npm run dev # http://localhost:5173 (порт можно задать переменной PORT)
| Команда | Что делает |
|---|
npm run dev | Сервер разработки Vite |
npm run build | Сборка в dist/ |
npm run preview | Локальный просмотр собранной версии |
npm run lint | ESLint |
npx tsc -b | Проверка типов (в npm run build не входит) |
В корпоративной сети с подменой сертификатов может понадобиться .npmrc в
корне проекта (файл в .gitignore):
strict-ssl=false
Сборка и выкладка в Qlik Sense
npm run build # → dist/ (~146 МБ, из них ~137 МБ — движки)
node dist-utils/index.cjs # → unit-app-light.zip в корне проекта
dist-utils/index.cjs упаковывает сборку в расширение-мэшап:
- пишет в
dist/ описание unit-app-light.qext (type mashup, версия 0.1.0.0);
- пишет список файлов
wbfolder.wbl;
- архивирует содержимое
dist/ в unit-app-light.zip (~72 МБ).
⚠️ dist-utils/ в .gitignore — в репозитории его нет, утилиту передают
отдельно. Без неё мэшап собирается вручную: положить в dist/ файл
unit-app-light.qext с полями выше и заархивировать содержимое dist/.
Архив импортируется в QMC: Extensions → Import (при обновлении расширение
заменяется). Приложение открывается по адресу
https://<сервер>/[<префикс прокси>/]extensions/unit-app-light/index.html.
Что важно знать о сервере Qlik. Сборка уже приспособлена к его
ограничениям, отдельно настраивать сервер не нужно:
| Ограничение сервера | Как обходит сборка |
|---|
| Отдаёт только разрешённые типы файлов (иначе HTTP 415) | В сборке только .html .js .css .json .txt .svg; шрифты встроены в CSS |
| Файрвол режет «опасные» слова и расширения в адресе (403) | Файлы движков названы нейтральными хэшами xxxxxxxx_N.txt |
| Файрвол читает тело ответа (403) | Двоичные файлы движков лежат gzip → HEX-текстом (только 0-9a-f) |
| Файрвол режет большие ответы | Части не больше 6 МБ |
Подробно механизм описан ниже в разделе «PDF → PowerPoint», общий загрузчик —
src/utils/chunkedAssets.ts.
Настройки сборки (vite.config.ts): base: './' — пути относительные,
сборку можно положить в любую папку; маршрутизация через HashRouter
(index.html#/PdfEditor) — переписывать адреса на сервере не нужно; имена
JS/CSS с хэшем содержимого — не кэшировать нужно только index.html.
Content-Security-Policy портала. Если она включена, для всех инструментов
нужны: script-src 'self' 'wasm-unsafe-eval' (WebAssembly), worker-src 'self'
(фоновые потоки), connect-src 'self' (загрузка движков), img-src 'self' data: blob:
(превью). Шахматы и шашки при заблокированном потоке считают ход на самой
странице (src/games/engineRunner.ts), остальные инструменты с потоками без
него не работают.
Проверка после выкладки: главная открывается без ошибок 403/415 в консоли
(F12); компьютер в шахматах отвечает на ход; OCR скана в конвертере
документов; удаление фона в конвертере изображений; PDF → PowerPoint на
небольшом файле; открытие XLSX в Excel-группираторе.
Требования
| Что | Версия |
|---|
| Node.js (сборка) | ≥ 20.19 или ≥ 22.12 |
| npm | ≥ 10 |
| Браузер | Современный Chromium (Edge, Chrome, Яндекс); IE и режим IE не поддерживаются |
| Протокол | HTTPS — без него не работают Cache Storage и проверка SHA-256 движков |
package-lock.json в .gitignore, а у большинства зависимостей версии с ^,
поэтому сборки на разных машинах могут отличаться. Точно закреплены версии,
от которых зависят файлы в public/: onnxruntime-web, а также CodeMirror и acorn.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
