Просмотр документов прямо на сайте, используя Google Docs

Модуль «Файловый архив» часто используется для хранения файлов, имеющих «офисное» происхождение: прайс-листов Excel, документов Word и Adobe Acrobat, презентаций PowerPoint. Хотелось бы иметь возможность открывать и просматривать файлы без скачивания на диск и без запуска Word или Excel - прямо в окне сайта.

Такую возможность предоставляет Google Docs.

Поддерживается множество типов файлов

• Microsoft Word (.DOC и .DOCX)
• Microsoft Excel (.XLS и .XLSX)
• Microsoft PowerPoint (.PPT и .PPTX)
• Adobe Portable Document Format (.PDF)
• Apple Pages (.PAGES)
• Adobe Illustrator (.AI)
• Adobe Photoshop (.PSD)
• Tagged Image File Format (.TIFF)
• Autodesk AutoCad (.DXF)
• Scalable Vector Graphics (.SVG)
• PostScript (.EPS, .PS)
• TrueType (.TTF)
• XML Paper Specification (.XPS)
• Файлы архивов (.ZIP и .RAR)

Реализация просмотра на примере

Давайте попробуем «рассмотреть» во вьюере рекламный буклет «SEO с комфортом. Гид по Amiro.CMS», который находится на этой странице и имеет ссылку на скачивание: http://www.amiro.ru/ftpgetfile.php?id=197&module=files. Указываем эту ссылку в поле url вьюера https://docs.google.com/viewer?url=http://www.amiro.ru/ftpgetfile.php?id=197&module=files и – вуаля – PDF-файл буклета можно рассмотреть прямо в окне браузера.

Замечательно, но наша задача, чтобы файлы можно было просматривать прямо на сайте, сделанном на Amiro.CMS. Google Docs Viewer имеет «выносной» код, который можно разместить на таком сайте. Выглядит он следующим образом:

<iframe src=http://docs.google.com/viewer?url=
http%3A%2F%2Fwww.site.ru%2Fftpgetfile.php%3Fid%3D197%26module=files&amp;embedded=true width="700" height="820" style="border: none;"></iframe>

Вас уже насторожило обильное количество спецсимволов %3A, %2F, %3D, %26 в ссылке на документ? Правильно, дело в том, что параметр ##linktag## по умолчанию формирует значение url в виде ftpgetfile.php?id=XXX, где XXX-id документа в модуле «Файловый архив». Следовательно, нам необходимо, чтобы Amiro.CMS формировала url нужным нам образом.

Настройка шаблонов модуля «Файловый архив»

Необходимый нам формат cсылки достигается следующей функцией: ##setvar @ linktag = urlencode(url)##. Открываем шаблон модуля «Файловый архив» files.tpl, находим группу сетов Item details sets, и модифицируем сеты item_details и item_row;subitem_row;urgent_item_row следующим образом:

Вместо куска кода

<a target="_blank" href="##linktag##">##name##</a>

либо

<a target="_blank" href="##linktag##"><b></b></a>

прописываем

##setvar @linktag = urlencode(get_file_link)##
<div url-show="http://docs.google.com/viewer?url=http://amiro.ru/_mod_files/_upload/example.doc&amp;embedded=true" class="show_docs" onclick="showDocs(this); return false;">
    <span>Посмотреть</span>
    <div class="file_block" style="height: 0px;">
        <iframe src="" height="980" width="620"></iframe>
    </div>
</div>

В common.js дописываем

<script>
    function showDocs(oLink) {
        var oBlock = oLink.getElementsByTagName('div')[0];
        var oIframe = oLink.getElementsByTagName('iframe')[0];
        var oIframeUrl = oLink.getAttribute('url-show');
        if(oBlock.style.height == 0+'px') {
            oBlock.style.height = 980+'px';
            if(oIframe.src != oIframeUrl) {oIframe.src = oIframeUrl};
        } else {
            oBlock.style.height = 0+'px';
        }
    }
</script>

Теперь в каскадную таблице стилей добавляем

.file_block{
    overflow: hidden;
    background: none repeat scroll 0 0 #FFFFFF;
    position: relative;
    transition: height 0.8s ease-out 0s;
	-moz-transition: height 0.8s ease-out 0s;
	-webkit-transition: height 0.8s ease-out 0s;
	-o-transition: height 0.8s ease-out 0s;
}
    
.file_block iframe {
    border: 1px solid #000;
    padding: 10px;
}

.show_docs span {
    cursor: pointer;
}

Указанная конструкция – с ссылкой «Посмотреть» и div’ом необходима, чтобы окно вьюера открывалось, только когда посетитель сайта кликнет по ссылке «Посмотреть». 

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

Результат будет выглядеть следующим образом:

а по клику – раскрывается окно вьюера:

Использование в произвольных местах (в любом HTML)

Понятно, что указанный  код <iframe> можно «внести» в заготовки Менеджера сайта и использовать для файлов, ссылки на скачивание которых устанавливаются через Визуальный редактор «в ручном» режиме, через кнопку «Вставить/изменить гиперссылку».

Пример реализации в менеджере сайта (для статичной страницы:)

<div url-show="http://docs.google.com/viewer?url=http://amiro.ru/_mod_files/_upload/example.doc&amp;embedded=true" class="show_docs" onclick="showDocs(this); return false;">
    <span>Посмотреть</span>
    <div class="file_block" style="height: 0px;">
        <iframe src="" height="980" width="620"></iframe>
    </div>
</div>
    
<script>
    function showDocs(oLink) {
        var oBlock = oLink.getElementsByTagName('div')[0];
        var oIframe = oLink.getElementsByTagName('iframe')[0];
        var oIframeUrl = oLink.getAttribute('url-show');
        if(oBlock.style.height == 0+'px') {
            oBlock.style.height = 980+'px';
            if(oIframe.src != oIframeUrl) {oIframe.src = oIframeUrl};
        } else {
            oBlock.style.height = 0+'px';
        }
    }
</script>

В каскадную таблице стилей добавляем

.file_block{
    overflow: hidden;
    background: none repeat scroll 0 0 #FFFFFF;
    position: relative;
    transition: height 0.8s ease-out 0s;
	-moz-transition: height 0.8s ease-out 0s;
	-webkit-transition: height 0.8s ease-out 0s;
	-o-transition: height 0.8s ease-out 0s;
}
    
.file_block iframe {
    border: 1px solid #000;
    padding: 10px;
}

.show_docs span {
    cursor: pointer;
}

Результат можно увидеть в начале этой статьи.

p.s. Выражаю благодарность Евгению Лапину за раскрытие секретов urlencode(url) и Дине Пятковой за реализацию «разворачивающегося» окна вьюера.