File Viewer: браузерный рендерер для просмотра документов и архивов

Проект File Viewer предоставляет возможность просмотра различных файлов в браузере без редактирования. Это касается таких форматов, как документы Office, PDF, CAD, архивы, электронные письма и других типов файлов. Все встроенные рендереры работают без необходимости в сервере для конвертации, и возможность использования Workers, WASM и шрифтов может быть реализована на самоуправляемом решении.

Быстрый старт

Чтобы начать использовать File Viewer, достаточно установить нужный пакет с помощью npm:

npm install @file-viewer/web-full

Затем можно подключить его к своему проекту:

import { mountViewer } from '@file-viewer/web-full'

mountViewer(document.querySelector('#viewer'), {
  url: '/documents/handbook.pdf',
  filename: 'handbook.pdf'
})

Обязательно установи высоту для элемента с идентификатором #viewer. Если файл находится на другом домене, нужно убедиться, что он доступен с соответствующими заголовками CORS. Также можно передать объект File вместо URL.

Поддерживаемые форматы и ограничения

В проекте есть матрица форматов, которая описывает поддерживаемые расширения файлов и уровни поддержки. Важно отметить, что не каждое файл данного типа обладает одинаковой точностью отображения. Существуют *-full пакеты, которые поддерживают 221 расширение во множестве потоков предварительного просмотра. Для установки более легкого пакета можно использовать варианты, такие как @file-viewer/preset-lite, @file-viewer/preset-office и другие.

File Viewer не предназначен для редактирования файлов. Ограничения могут возникнуть при работе со шрифтами, специфичными для определённых производителей функциями или при открытии очень больших файлов. Рекомендуется проверять матрицу форматов перед использованием специфичных форматов в рабочих процессах.

Установка и управление активами

Полные пакеты включают в себя соответствующие Workers, WASM, шрифты и другие активы, однако их необходимо обслуживать наряду с приложением. По умолчанию активы размещаются по пути <deployment-base>/file-viewer/. В зависимости от системы сборки, существуют разные способы установки активов:

• Для Vite необходимо установить @file-viewer/vite-plugin и настроить fileViewerRenderers({ copyAssets: true }).
• Для Webpack, Rspack, Rollup и других — запустить npx --no-install file-viewer-copy-assets ./public/file-viewer.
• Для Web Full IIFE/CDN нужно раздать всю директорию dist/, а не только входной JavaScript файл.

Если какой-либо Worker или файл WASM отсутствует, это может привести к недоступности формата, даже если его JavaScript пакет установлен.

Вклад в проект и поддержка

Если возникла проблема с форматами, ты можешь предоставить упрощённый пример или ссылку на публичное воспроизведение, указать версию браузера и ожидаемый результат. Прежде чем открывать pull request, ознакомься с CONTRIBUTING.md.

Поддержка проекта осуществляется через GitHub Sponsors. Для частных развертываний или проектов, требующих обязательств по отклику, существует возможность получить корпоративную поддержку.

Лицензия

Исходный код проекта лицензирован по Apache-2.0, в то время как поддержка форматов DWG/DWF/DWFX требует соблюдения лицензии AGPL-3.0-only.