Pull to refresh

Как сделать онлайн просмотр документов

LLC Tik-Tok Coach corporate blogWebsite development
Tutorial
Первый рабочий день. Первая задача в Redmine. Первая спецификация в формате doc. На новой рабочей машине. К чтению спецификации удалось приступить часа через 3. Пока скачался и установился MS Office. Вспоминая этот случай, я был уверен, что в нашей системе управления задачами надо сделать онлайн просмотр документов. Вот только идей по реализации за разумное время и трудозатраты не было. Недавно мы нашли способ – Microsoft Office Web Apps.

В этой статье пойдет речь о том, как добавить онлайн просмотр документов в любой продукт.

Общее представление


Office Web Apps Server(далее OWA) – веб-версия популярного офисного пакета приложений, включает в себя облегченные браузерные приложения Word, Excel, PowerPoint и OneNote.

Доступен для бесплатного скачивания и использования в режиме просмотра документов.

Посмотреть на OWA в действии можно на OneDrive. Несколько документов в режиме чтения:


OWA ставится на отдельный физический сервер и отвечает только за отображение документов в браузере. Вся логика по организации хранения файлов ложится на Ваше приложение. Взаимодействие между OWA и хранилищем происходит через WOPI API, который придется реализовывать.
image


Устанавливается с помощью визарда и кнопки некст.
После успешной установки по адресу HTTPS://OWA-server/hosting/discovery будет xml-описание поддерживаемых приложений, действий и url-шаблоны доступа:

<?xml version="1.0" encoding="utf-8"?>
<wopi-discovery>
<net-zone name="external-http">
<app name="Excel" favIconUrl="https://OWA-server/x/_layouts/images/FavIcon_Excel.ico" checkLicense="true">
...
</app>
<app name="OneNote" favIconUrl="https://OWA-server/o/resources/1033/FavIcon_OneNote.ico" checkLicense="true">
...
</app>
<app name="PowerPoint" favIconUrl="https://OWA-server/p/resources/1033/FavIcon_Ppt.ico" checkLicense="true">
...
</app>
<app name="Word" favIconUrl="https://OWA-server/wv/resources/1033/FavIcon_Word.ico" checkLicense="true">
...
<action name="view" ext="docx" default="true" urlsrc="https://OWA-server/wv/wordviewerframe.aspx?<ui=UI_LLCC&><rs=DC_LLCC&><showpagestats=PERFSTATS&>" />
...
<action name="view" ext="odt" default="true" urlsrc="https://OWA-server/wv/wordviewerframe.aspx?<ui=UI_LLCC&><rs=DC_LLCC&><showpagestats=PERFSTATS&>" />
...
<action name="edit" ext="docx" requires="locks,cobalt,update" urlsrc="https://OWA-server/we/wordeditorframe.aspx?<ui=UI_LLCC&><rs=DC_LLCC&><showpagestats=PERFSTATS&>" />
...
<action name="editnew" ext="docx" requires="locks,cobalt,update" urlsrc="https://OWA-server/we/wordeditorframe.aspx?new=1&<ui=UI_LLCC&><rs=DC_LLCC&><showpagestats=PERFSTATS&>" />
...
<action name="imagepreview" ext="doc" urlsrc="https://OWA-server/wv/WordPreviewHandler.ashx?<ui=UI_LLCC&><rs=DC_LLCC&><showpagestats=PERFSTATS&>" />
<action name="interactivepreview" ext="doc" urlsrc="https://OWA-server/wv/wordviewerframe.aspx?embed=1&<ui=UI_LLCC&><rs=DC_LLCC&><showpagestats=PERFSTATS&>" />
...
<action name="mobileView" ext="doc" urlsrc="https://OWA-server/wv/wordviewerframe.aspx?<ui=UI_LLCC&><rs=DC_LLCC&><showpagestats=PERFSTATS&>" />
...
<action name="embedview" ext="doc" urlsrc="https://OWA-server/wv/wordviewerframe.aspx?embed=1&<ui=UI_LLCC&><rs=DC_LLCC&><showpagestats=PERFSTATS&>" />
...
</app>
<app name="WordPdf" favIconUrl="https://OWA-server/wv/resources/1033/FavIcon_Word.ico" checkLicense="true">
...
</app>
</net-zone>
<proof-key oldvalue="" value="..." />
</wopi-discovery>

Здесь много скрыто за многоточиями. Но по оставшимся действиям видно, что поддерживаются как документы в формате Microsoft Office, так и Open Office. Помимо просмотра(view) можно открывать документы и на редактирование(edit). Есть мобильная версия(mobileView). OWA умеет генерировать предпросмотр первой страницы документа в виде изображения(imagepreview) и предпросмотр всех страниц документа(interactivepreview).

Предположим, мы хотим отобразить в браузере Word документ с расширением docx. Находим url-шаблон:
HTTPS://OWA-server/wv/wordviewerframe.aspx?<ui=UI_LLCC&><rs=DC_LLCC&><showpagestats=PERFSTATS&>
В угловые скобки(<>) заключены опциональные параметры:

  • UI_LLCC – предпочитаемый язык в интерфейсе OWA;
  • DC_LLCC – предпочитаемый язык, когда он может повлиять на отображение документа;
  • Showpagestats – отображение служебной статистики.

К данному url нам надо добавить параметр WOPISrc, по которому OWA запросит документ из нашего хранилища, и параметр access_token, который будет передаваться вместе с запросом файла для авторизации.

В итоге будет URL вида HTTPS://OWA-server/wv/wordviewerframe.aspx?WOPISrc=https%3A%2F%2Fmy-wopi-host%2Fwopi%2Ffiles%2FDocument.docx&access_token=0bf6fe96-3510-4105-ac4c-2656f1f14579 (*)

WOPI


WOPI(Web Application Open Platform Interface) – RESTful API, который определяет набор операций для доступа и модификаций файлов на нашем файловом хранилище. Работает через HTTP/HTTPS.

Я подготовил пример простейшего хранилища файлов с минимально необходимыми для просмотра документов операциями из WOPI. Проект на ASP.Net MVC 5. Но ничего не мешает использовать любой другой фреймворк и язык программирования.

Откроем в браузере полученный нами чуть ранее URL (*).

Первым делом OWA вызовет метод CheckFileInfo доступный по адресу HTTP://server/<...>/wopi*/files/<id>?access_token=<token>.
Реализация метода:
[Route("files/{fileName}")]
[HttpGet]
public FileInfoDto CheckFileInfo(string fileName, [FromUri(Name = "access_token")] Guid tokenId)
{
    var fullFileName = GetFullPath(fileName);
    Validation(tokenId, fullFileName);

    return new FileInfoDto
    {
        BaseFileName = fileName,
        OwnerId = "admin",
        ReadOnly = true,
        SHA256 = GetChecksum(fullFileName),
        Size = new FileInfo(fullFileName).Length,
        Version = 1
    };
}

private static string GetChecksum(string filePath)
{
    using (var stream = new BufferedStream(File.OpenRead(filePath), 1200000))
    {
        var checksum = SHA256.Create().ComputeHash(stream);
        return Convert.ToBase64String(checksum);
    }
}


Здесь возвращаются только обязательные параметры. Это информация о файле. Еще ряд опциональных параметров описывают, например, можно ли редактировать файл и как, информацию об авторе, поддержку работы с папками, информацию о правах пользователя, нужно ли защищать файл от копирования и тд. Все конфиги описаны здесь.

Если метод успешно отработал и вернул корректные данные, OWA запросит сам файл по адресу HTTP://server/<...>/wopi*/files/<id>/contents?access_token=<token>.
Отдаем файл:
[Route("wopi/files/{fileName}/contents")]
[HttpGet]
public HttpResponseMessage GetFile(string fileName, [FromUri(Name = "access_token")] Guid tokenId)
{
    var fullFileName = GetFullPath(fileName);
    Validation(tokenId, fullFileName);

    var stream = new FileStream(fullFileName, FileMode.Open);
    var result = new HttpResponseMessage(HttpStatusCode.OK)
    {
        Content = new StreamContent(stream)
    };
    result.Content.Headers.ContentType = new MediaTypeHeaderValue(MimeMapping.GetMimeMapping(fileName));
    result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
    {
        FileName = fileName
    };

    return result;
}


Собственно все, мы написали необходимый функционал для показа файлов!

Железо


Самое узкое и затратное место во всей этой идее.

Минимальные системные требования:

  • 8 ГБ ОЗУ;
  • 64-разрядный четырехъядерный процессор;
  • 80 ГБ на диске.

Утверждается, что 8ми ядерный сервер с 8ю ГБ ОЗУ выдерживает нагрузку в 10 000 пользователей. А 16и ядерный с 16 ГБ ОЗУ – 20 000 пользователей.

Поддерживаемые операционные системы:

  • 64-разрядный Windows Server 2008 R2,
  • 64-разрядный Windows Server 2012 Standard или Datacenter

Ставится на отдельный физический или виртуальный сервер. При этом другие серверные приложения(например, MS SQL Server) устанавливать на этот же сервер нельзя.

Сервер обязательно должен быть частью домена, в противном случае OWA просто не установится, я пробовал. Также OWA не будет работать, если установить его на контроллер домена.

А можно ли редактировать документы в браузере?


OWA поддерживает редактирование, но бесплатно можно использовать только просмотр документов. Редактирование требует лицензию.

По умолчанию режим редактирования выключен. Но его можно в любой момент включить. Редактирование PowerPoint и Excel документов работает через WOPI. А вот для Word придется реализовывать FSSHTTP.
Tags:office web appsoffice online.netC#онлайндокументыdocxxlsxdocxlspptpptxpdfmicrosoftmicrosoft officewordpowerpointpowerpoint onlineword onlineexcel onlineonenoteonenote onlineWOPIFSSHTTP
Hubs: LLC Tik-Tok Coach corporate blog Website development
Total votes 18: ↑15 and ↓3 +12
Views45.7K

Comments 36

Only those users with full accounts are able to leave comments. Log in, please.

Information

Founded
Location
Россия
Website
tiktokcoach.ru
Employees
2–10 employees
Registered