Интегрируйте просмотрщик документов на мой сайт, как в Firmroom.

Содержание

Вопрос или проблема
Ответ или решение
1. Использование сторонних библиотек и сервисов
1.1. FlowPaper
1.2. LEADTOOLS Document Viewer
2. Обработка и конвертация документов
3. Серверная составляющая
4. Визуализация документов на клиентской стороне
5. Безопасность и доступ
Заключение

Вопрос или проблема

Я работаю над веб-сайтом на Vanilla Js и PHP, где один пользователь может загружать файлы формата (pdf, doc, ppt, excel) и делиться ими с другими, но другие могут только просматривать файл на сайте, а не загружать его. Что я хочу создать – это что-то вроде этого сайта firmroom.com

Я создал бесплатный аккаунт здесь и проверил, что могу загружать документы и просматривать их на сайте вместо загрузки

Вот некоторые скриншоты

Я загрузил эти документы.

И могу просмотреть их в их просмотрщике.

Здесь я вижу, что они использовали flow paper viewer.

Но на сайте flowpaper сказано, что он работает только с PDF. Как они тогда показывают Excel и другие файлы doc?

Это то, что я у них наблюдал.

Если есть какое-либо аналогичное решение, плагин или инструмент, отличный от встроенного просмотрщика Google или Microsoft,
так как я не хочу, чтобы пользователи могли загружать файлы напрямую и раскрывать публичный URL

Если вы хотите рассмотреть коммерческий продукт, вы можете обратить внимание на LEADTOOLS Document Viewer для веба (Отказ от ответственности: я сотрудник компании, которая распространяет LEADTOOLS SDK)

Он может загружать и сохранять различные типы документов, включая все форматы Office (без использования MSO), а также PDF.

Вы можете протестировать его с вашими файлами на следующей онлайн-демонстрации: https://demo.leadtools.com/JavaScript/DocumentViewer/index.html

Вот скриншот DocumentViewer:

Ответ или решение

Для интеграции документа-вьюера, подобного тому, который используется на сайте Firmroom, в ваше веб-приложение на Vanilla JS и PHP, необходимо рассмотреть различные решения, которые позволят пользователям загружать и просматривать документы без возможности скачивания. Важно учитывать форматы файлов, которые вы хотите поддерживать: PDF, DOC, PPT и Excel. Давайте рассмотрим несколько подходов и внедрим соответствующие решения.

1. Использование сторонних библиотек и сервисов

1.1. FlowPaper

Как вы уже заметили, FlowPaper в первую очередь предназначен для PDF-документов. Однако, чтобы обрабатывать другие форматы (например, DOC, PPT и Excel), можно воспользоваться дополнительными инструментами.

1.2. LEADTOOLS Document Viewer

LEADTOOLS — мощный инструмент для работы с документами, который поддерживает все основные форматы файлов, включая Office и PDF. Это коммерческое решение, которое позволяет интегрировать документа-вьюер на ваш сайт. Вы можете протестировать его на об онлайн демонстрации.

2. Обработка и конвертация документов

Чтобы документы разных форматов могли отображаться корректно, рекомендуется использовать сервисы для конвертации. Например:

LibreOffice API: для конвертации документов Office в PDF на серверной стороне.
Ghostscript: для работы с PDF-документами, если требуется дополнительная обработка.

3. Серверная составляющая

На серверной стороне необходимо настроить обработку загруженных файлов:

Загрузка файла:
- Создайте форму для загрузки, которая будет отправлять файл на сервер.
- Используйте PHP для обработки и хранения файлов на сервере.
```
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['document'])) {
   $target_dir = "uploads/";
   $target_file = $target_dir . basename($_FILES['document']['name']);
   move_uploaded_file($_FILES['document']['tmp_name'], $target_file);
}
```
Конвертация загруженных документов:
- После загрузки вам нужно конвертировать файл в подходящий формат, например, в PDF, что позволяет использовать FlowPaper.

4. Визуализация документов на клиентской стороне

Подключение библиотеки:

Если вы выбрали FlowPaper, добавьте его на странице, где будет происходить просмотр документа.

<div id="documentViewer"></div>
<script src="flowpaper.js"></script>
<script>
   FlowPaperViewer({
       swfPath: "/path/to/flowpaper/",
       documentPath: "/path/to/your/document.pdf",
       ...
   });
</script>

Интеграция других форматов:
Для отображения форматов DOC, PPT и Excel можно создать серверный API, который будет возвращать URL для доступа к PDF версиям, создаваемым в момент загрузки.

5. Безопасность и доступ

Чтобы избежать прямого доступа к загруженным документам, стоит ограничить доступ к файлам:

Используйте контроллеры на сервере для управления доступом.
При формировании URL для доступа к документу, добавляйте токен аутентификации или создавайте временные ссылки.

Заключение

Интеграция документа-вьюера на ваш сайт требует тщательно продуманного подхода к загрузке, конвертации и отображению файлов. Рассмотрите использование LEADTOOLS как коммерческого продукта, обеспечивающего полный функционал для работы с документами. Это позволит вам создать эффективный инструмент для просмотра файлов с нужной степенью безопасности и удобства для пользователей.