Личный опыт

Новое в блогах


Техноблог HTTPS и Amiro.CMS  1
Личный опыт История от «Интер Электрик», #ОбновлениеЗаРассказ 
Личный опыт История от АвтоТехЦентр Субару Медведково, #ОбновлениеЗаРассказ 
Техноблог Как открыть интернет-магазин с нуля 
Личный опыт История от интернет-магазина ТД Зевс, #ОбновлениеЗаРассказ 
Личный опыт История от портала china-sky.ru, #ОбновлениеЗаРассказ 

Теги



Просмотр документов прямо на сайте, используя 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) и Дине Пятковой за реализацию «разворачивающегося» окна вьюера.

[24.07.12]  
Рейтинг: 4.167 (голосов: 12)
Комментировать

Теги: how-toпримерыинструкциягаджетыGoogle
 
Вернуться к списку
Комментарии (13)

   25.07.12 07:13
0


   30.10.12 08:54
0

+1

 (Партнер)  15.04.13 21:53
0

Здорово (:

 (Партнер)  23.07.13 08:46
1

Хорошая новость. Теперь нет необходимости переводить в спецсимволы значение параметра ##linktag##. Гугль Вьюер научился понимать «родной» урл вида http://www.site.ru/ftpgetfile.php?id=16.

Т.е. код вида

<iframe src="http://docs.google.com/viewer?url=http://www.site.ru/ftpgetfile.php?id=16&embedded=true" height="860" width="620"></iframe>


прекрасно срабатывает.

   09.10.13 20:44
0

Ага, "Гугль Вьюер научился понимать «родной» урл вида http://www.site.ru/ftpgetfile.php?id=16."

Только он не научился понимать «родной» урл вида http://www.site.ru/ftpgetfile.php?module=files&id=16."

Ошибка та же, что и в Вашем примере на http://www.amiro.ru/forum/job/hochetsja-vjuer-fajlov-iz-modulja?action=locate&id_message=19654

Компания Amiro игнорирует возможности самой же приподняться - http://www.amiro.ru/forum/ljubye-voprosy-ot-novichkov/kak-optimizirovat-ssylki?id_message=20312#m20312

А Гугль Вьювер тем временем показывает зашифрованные исходники Amiro открытым текстом!

 (Амиро)  10.10.13 07:04
0

Дмитрий Евдокимов:
Только он не научился понимать «родной» урл вида http://www.site.ru/ftpgetfile.php?module=files&id=16."


Кликните на урл, он работает: https://docs.google.com/viewer?url=http://amiro.ru/ftpgetfile.php?id=197&module=files

Дмитрий Евдокимов:
Ошибка та же, что и в Вашем примере на http://www.amiro.ru/forum/job/hochetsja-vjuer-fajlov-iz-modulja?action=locate&id_message=19654


Уточните, пожалуйста, какая здесь ошибка.

Дмитрий Евдокимов:
А Гугль Вьювер тем временем показывает зашифрованные исходники Amiro открытым текстом!


Уточните пожалуйста, о чем идет речь.

   10.10.13 12:50
0

А попробуйте такой урл - https://docs.google.com/viewer?url=http://amiro.ru/ftpgetfile.php?module=files&id=197&embedded=true

Т.е. когда id оказывается на выселках (за & от урла Amiro, то Гугль его отрезает как СВОЙ (а не исходного урла) параметр и показывает исходники амировского модуля - код PHP в чистом виде - ха-ха:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>���������������� ����������</TITLE>
<STYLE type=text/css>
<!--
H3    { font-family: verdana; color: #00000; text-align: center;}
-->
</STYLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<BR><BR><BR>
<H3>���������������������� ��������</H3>
</BODY>
</HTML>

(Думаю, Гугль и другие исходники CMS также успешно расшифрует, если ему невначай подсунуть... - я не хотел об этом открыто сообщать)

Как сформирует этот урл Amiro - нет никаких средств воздействия (замены) ##linktag##. По моим беглым наблюдениям параметры module и id возникают в разном порядке, и Гугль когда получает id после своей обрезки, когда нет (если он на выселках).
Короче: если id окажется в урле Amiro после & (после module), то Гугль не найдет искомого документа.

Замечательные примеры статьи выше этого не учитывают, как и магическим образом из примеров кода исчезает использование переменной ##linktag##, а на примере "живого" файла example.doc (а не PHP-id-подстановки) - проблем нет - это да.

Я обслуживаю сайт на купленной версии Визитки. Функциональность данной статьи у меня заработала при такой замене в files.tpl:

<!--#set var="item_details" value="
##setvar @file_link = urlencode(linktag)##
<h2>##name##</h2>
<p>##description##</p>
<iframe src="http://docs.google.com/viewer?embedded=true&url=http://www.***.ru/##file_link##" height="860" width="620" style="border:none;"></iframe>
<br>
<a target="_blank" href="##linktag##" title="&#037;&#037;download&#037;&#037;"><img border=0 align="left" src="##icons##" alt="##alt##" width="36" height="36"></a>
##num_downloaded##
...
"-->


и

<!--#set var="item_row;subitem_row;urgent_item_row" value="
##setvar @file_link = urlencode(linktag)##
...
        <div url-show="http://docs.google.com/viewer?embedded=true&url=http://www.***.ru/##file_link##" class="show_docs" onclick="showDocs(this); return false;">
            <span>Посмотреть</span>
            <div class="file_block" style="height: 0px;">
                <iframe src="" height="860" width="620" style="border:none;"></iframe>
            </div>
        </div>
        <br>
        <a target="_blank" href="##linktag##">&#037;&#037;download&#037;&#037; ##size##</a>
        ##num_downloaded##
...
"-->


Одна беда, над которой надо еще подумать - как эту функциональность деактивировать у неподдерживаемых этим Гуглем файлов JPG и XLS - надеюсь, ##alt## мне в помощь. (А потом - допилить в это место показ JPG - уж все-таки.)

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

 (Амиро)  10.10.13 14:18
0

Дмитрий Евдокимов:
Т.е. когда id оказывается на выселках (за & от урла Amiro, то Гугль его отрезает как СВОЙ (а не исходного урла) параметр


Замечание существенное, спасибо - учтем. Замечу только, что по-умолчанию система все же ставит id на первое место и он не теряется. А второй параметр в данном случае является незначительным.

Дмитрий Евдокимов:
и показывает исходники амировского модуля - код PHP в чистом виде - ха-ха:


Не хочу Вас расстраивать, но это не исходники PHP . Это HTML страницы с информацией о том, что скрипт возвращающий файл не получил корректные данные. Почему гугл отображает исходный код страницы, вопрос скорее к гуглу.

   10.10.13 14:46
0

@Андрей:
Замечу только, что по-умолчанию система все же ставит id на первое место

Я в своей системе (версия 5,14,8,20) бился с этим - иногда система ставила иначе, и все рушилось. Закономерностей не выяснял - приделал свой костыль.

А Гугл - Корпорация добра (или зла? - не помню). Но такой функционал (просмотр документов) - да вашей бы системе! А то Яндекс-браузер for iPad не очень дружит с таким вьювером.

 (Партнер)  10.10.13 15:56
0

Дмитрий Евдокимов:
Т.е. когда id оказывается на выселках (за & от урла Amiro, то Гугль его отрезает как СВОЙ (а не исходного урла)

Не уверен, что это так. Надо просто посмотреть логи веб-сервера, чтобы понять, какой же именно документ Google запрашивает.

Даже если и так (в чем я сомневаюсь), зная о такой проблеме, и владея mod_rewrite, можно добиться желаемого, передавая вьюверу удобные ему УРЛы, но делая рерайт на корректный внутренний УРЛ с контентом файла. Как это скажется на индексации таких файлов - не скажу (потому что будут "дубли" файла по стандартному и новому формату).

   15.10.13 18:08
0

Дмитрий Юзжалин:
Не уверен, что это так. Надо просто посмотреть логи веб-сервера, чтобы понять, какой же именно документ Google запрашивает.

В мобильной версии Google предлагает собственную ссылку скачать то, что ему досталось - там и было продиагностировано, что ему не достается id с номером.
Дмитрий Юзжалин:
зная о такой проблеме, и владея mod_rewrite, можно добиться желаемого, передавая вьюверу удобные ему УРЛы, но делая рерайт на корректный внутренний УРЛ с контентом файла.

Я еще с год назад просил Amiro на форуме дать больше управления содержимым ##linktag##, чтобы можно было красиво и единообразно переписать ЧПУ на /files/id, например. И добиваться желаемого с mod_rewrite, вручную парся и переписывая ##linktag## или еще более вручную формируя ссылки для Google, вбивая id ручками - имхо, слишком большой костыль - у меня в Файловом модуле бОльшая часть сайта.

   10.10.13 15:04
0

Интересные изменеия произошли с момента публикации статьи.

   10.10.13 15:56
0

Глубокомысленное замечание...

Ваш комментарий