Главная » Языки программирования

Google doc viewer html

На чтение 10 мин
Содержание
  1. wheelcomplex / embedded-file-viewer.md
  2. Google Docs Viewer
  3. Где и как используется
  4. GET-параметры ссылок
  5. Поддерживаемые форматы и ограничения
  6. Что же в итоге
  7. Просмотр документов прямо на сайте, используя Google Docs
  8. Поддерживается множество типов файлов
  9. Реализация просмотра на примере
  10. Настройка шаблонов модуля «Файловый архив»
  11. Использование в произвольных местах (в любом HTML)

wheelcomplex / embedded-file-viewer.md

Only files under 25 MB can be previewed with the Google Drive viewer.

Google Drive viewer helps you preview over 16 different file types, listed below:

  • Image files (.JPEG, .PNG, .GIF, .TIFF, .BMP)
  • Video files (WebM, .MPEG4, .3GPP, .MOV, .AVI, .MPEGPS, .WMV, .FLV)
  • Text files (.TXT)
  • Markup/Code (.CSS, .HTML, .PHP, .C, .CPP, .H, .HPP, .JS)
  • Microsoft Word (.DOC and .DOCX)
  • Microsoft Excel (.XLS and .XLSX)
  • Microsoft PowerPoint (.PPT and .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)
  • Archive file types (.ZIP and .RAR)
https://docs.google.com/a/[DOMINIO]/viewer?url=[FILE_URL] 
https://docs.google.com/a/[DOMINIO]/viewer?url=[FILE_URL]

Google Docs offers an undocumented feature that lets you embed PDF files and PowerPoint presentations in a web page. The files don’t have to be uploaded to Google Docs, but they need to be available online.

Google Drive Viewer: Explicit PDF files

Google Drive Viewer: Non-PDF files (fileviewer URL)

To view Google Drive docs from fileviewer links, use the file ID as the srcid attribute in the iframe.

The file ID for your PDF (one that is already in Google Drive) can be found in the PDFs web address. When you open a PDF, it’s the garbage-looking piece of the URL (it will be between forward-slashes, “/”).

The file ID is highlighted in yellow.

In this case it’s the 0B3xoQi_oa7_hU2J5S1RQbFdqS3c

Источник

Google Docs Viewer

Google Docs Viewer

Google Docs Viewer — это онлайн-сервис работающий на платформе Google Docs и позволяющий непосредственно в веб-браузере и без авторизации просматривать документы поддерживаемые сервисом Google Docs, например Adobe PDF, Microsoft Word или Microsoft PowerPoint.

Преимуществом такого варианта является возможность просмотра документов множества форматов без загрузки на локальный диск. Другим преимуществом является безопасность — не все PDF и DOC документы безопасны для просмотра через Adobe Reader и MS Word.

Где и как используется

Существует множество способов использования данного сервиса «корпорации зла». Для просмотра документов через Google Docs Viewer можно сгенерировать ссылку на странице сервиса docs.google.com/viewer. Также сервис генерирует html-код для встраивания в сторонние страницы упрощенного приложения просмотра через iframe (подробнее о таких ссылках ниже).

Читайте также:  String to java lang charsequence

Google Docs Viewer Embedded

Так же Google Docs Viewer используется в Google Search, предлагая пользователю ссылку на быстрый просмотр найденных файлов, формат которых поддерживается Google Docs. Многие браузеры уже обзавелись расширениями быстрого просмотра документов реализованные через сервис Google Docs Viewer: Google Chrome, Mozilla FireFox, Safari.

GET-параметры ссылок

  • “v” — будет отрыто приложение просмотра документа (это значение по умолчанию);
  • “gt” — будет возвращен xml документ с распознанным текстом (пример);
  • “bi” — будет возвращено изображение страницы документа в формате PNG8 (параметр pagenumber обязателен);

Поддерживаемые форматы и ограничения

Google Docs Viewer поддерживает большее количество форматов файлов, чем задокументировано. Некоторые форматы, неподдерживаемые при GET-параметре &a=v, поддерживаются при других значениях параметра (gt/bi). Так же имеется ограничение на размер файла: до 22Мб (обнаружено экспериментальным методом). Ограничений на количество страниц не было обнаружено.

Что же в итоге

Есть, очевидно, и другие сервисы, предлагающие аналогичные функциональные возможности. Например расширение для браузеров OpenITOnline, сервис ViewDocsOnline.com и другие. Но основным отличием и преимуществом Google Docs Viewer является то, что он не ограничивается просто расширением для браузера или веб-приложением для просмотра текстовых или графических документов. Данный сервис предоставляет очень гибкий и удобный интерфейс как для пользователей так и для разработчиков приложений.

С помощью сервиса легко получить тексты из различных источников, которые могут в дальнейшем быть использованы при поиске по документам или для других целей. Так же легко получить превью изображения этих документов. Предоставленный интерфейс по протоколу HTTP даст возможность работать с документами даже в скриптовых языках (JS и др.).

Надеюсь, полезный сервис станет еще полезнее благодаря этой статье.

upd-1 (12.01.2011):
Дополнил таблицу поддерживаемых форматов форматами MS Office 2007 (см. коммент). Спасибо за подсказку MaximKat.
upd-2 (21.02.2011):
Дополнил таблицу поддерживаемых форматов форматами Apple Pages (.pages), Autodesk AutoCad (.DXF), PostScript (.ps), TrueType (.TTF), XML Paper Specification (.XPS) (навеяно хабратопиком-переводом). А также расширил эксперимент следующими форматами: djvu, eot, otf, woff, chm, hlp.

Источник

Просмотр документов прямо на сайте, используя 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)
Читайте также:  Paragraph break and html

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

Давайте попробуем «рассмотреть» во вьюере рекламный буклет «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 имеет «выносной» код, который можно разместить на таком сайте. Выглядит он следующим образом:

Вас уже насторожило обильное количество спецсимволов %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 следующим образом:

##setvar @linktag = urlencode(get_file_link)##

Посмотреть 

 
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) ; 
> else oBlock.style.height = 0+'px'; 
> 
>

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

.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)

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

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

 
Посмотреть 
 
 

 
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) ; 
> else oBlock.style.height = 0+'px'; 
> 
>

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

.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;
>

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

Читайте также:  Php фреймворки самый популярный

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

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

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

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

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

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

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

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

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

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

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

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

##name## 
##description##
  
 ##num_downloaded## . "-->

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

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

Источник

Оцените статью
© 2023 Программирование