Работаем с документами в браузере с помошью jDoc

Думаю, что большинство из нас очень часто использует отличный сервис Google Docs. Однажды меня озарила мысль попробовать написать что-нибудь подобное, только не сервис, а библиотеку, которая решит задачу работы с документами наиболее популярных форматов непосредственно в браузере и offline! И конечно же для разработки только JavaScript и ничего более :) Так на свет родилась библиотека jDoc, которая еще находится на ранней стадии своего развития, под версией 0.1.0.

Что мы умеем

С помощью jDoc на данном этапе есть возможность читать, с сохранением форматирования, картинок, ссылок и т.п., документы таких форматов:

• .docx
• .txt
• .fb2
• .odt
• .csv
• .tsv

Специально выделил слово «читать», т.к. редактирование и создание новых документов в дальнейших планах.

Как использовать

Подключаем в проект библиотеку:

<script src="js/jDoc.0.1.0.js"></script>

Или её минифицированную версию:

<script src="js/jDoc.0.1.0.min.js"></script>

И читаем необходимый файл:

//file - объект типа File
jDoc.read(file, {
    success: function (result) {
    },

    error: function (error) {

    }
});

result — объект, результат чтения файла. Имеет 2 метода:

1. result.html() — вернет documentFragment с преобразованной структурой file в html, удобно использовать для моментального отображения документа пользователю
2. result.data() — вернет прочитанную структуру документа как обычный JavaScript-объект

Используемые технологии

Для чтения некоторых форматов файлов (docx, odt), которые собой представляют архив, встала необходимость писать свой распаковщик архивов, но вскоре я нашёл прекрасную библиотеку zip.js и сэкономил кучу времени. Библиотека предоставляет удобный API для работы с архивами с помощью JavaScript, и хотя в zip.js пришлось поправить несколько багов, я остался очень рад такой находке.

Конечно же вы догадались, что для чтения файлов с помощью JavaScript в браузере используются наиболее новые технологии, которые все включают в единое понятие HTML5, такие как: Blob, FileAPI, JavaScript typed arrays

Сборка исходников в один единственных файл осуществляется с помощью Grunt.

Особенности

Для меня сущим кошмаром стала работа с форматом Office Open XML, который включает в себя файлы .docx. По сравнению с тем же OpenDocument (.odt-файлы), структура Open XML выглядит невероятно монструозной.

Не обошлось и без забавных казусов. В манифесте к файлу .docx есть тэг

<Pages>

который регламентирует количество страниц документа для отображения. Но если взять и открыть этот же документ в MS Word, то количество страниц будет равняться 2 :) Для почти десятка остальных тестируемых документов такой ситуации не возникало.

Пришлось помучиться и с WebWorkers, т.к. и в Chrome, и в FireFox одновременное создания более 20 воркеров закончивалось ничем или крашило браузер. Для примера, один файл .docx «разбирается» в 20-25 файлов, не учитывая изображения и другие сторонние ресурсы.

Поддержка браузерами

К сожалению, была возмость проверить работу библиотеки только в последних версиях Google Chrome и Mozilla FireFox.

Планы

Планы по развитию библиотеки наполеоновские оптимистичные:

• Кастомизация — сделать отдельную страницу для сборки библиотеки под определенные форматы документом, что-то наподобие сборки jQuery UI
• Все же использовать WebWorkers, т.к. технология очень удобная и мощная, хотя, возможно, использовать не для всех форматов файлов
• Возможность редактирования, создания новых файлов с возможностью указания конкретного формата для сохранения файла
• Расширение списка поддерживаемых форматов файлов

P.S. Хотя библиотека еще достаточно сыровата, ее можно уже использовать для весьма тривиальных задач, например, чтения, предпросмотра документов на клиенте перед отправкой на сервер.
Это мой первый пост, так что не пинайте сильно. Буду рад конструктивным предложениям и пожеланиям в комментариях.

Автор: webschik

Источник