Просмотр word документов на сайте

Microsoft Word является самым популярным в мире редактором текстовых документов. Документы Word (DOC, DOCX, RTF) используются для редактирования и распространения договоров, статей, юридических и многих других документов. Благодаря предоставляемым возможностям редактирования документы содержат множество стилей, таблиц, стандартных блоков и других объектов форматирования. Чтобы структура, содержание и макет документа оставались неизменными при рендеринге, каждый элемент должен быть тщательно отрисован и правильно расположен относительно других элементов.

GroupDocs.Viewer — быстрый и эффективный API для рендеринга файлов более чем 170 различных форматов. Работая на высокопроизводительном облачном сервере GroupDocs, он отображает файлы Word в браузере. Технологии GroupDocs.Viewer позволяют добиться идеального и идентичного отображения документа на любой платформе.

Это бесплатное онлайн-приложение на базе GroupDocs.Viewer API отображает файлы Word на вашем устройстве. Даже если файл зашифрован, вы можете указать пароль и просмотреть файл. Мы сохраняем вашу конфиденциальность, файл и пароль видны только вам. Вы можете распечатать просматриваемый файл прямо из браузера. Вы также можете загрузить файл PDF, чтобы поделиться с кем-то или просмотреть его позже. Приложение работает на любом устройстве, включая смартфоны.

Видеоурок

• 
  Как открыть и просмотреть файл Word?
  
  

  
  Сначала Вам нужно загрузить файл: перетащите файл Word или щелкните внутри области загрузки файла для того чтобы выбрать файл. Как только файл будет загружен Вы будете автоматически перенаправлены на приложение для просмотра файлов.
  

• 
  Сколько времени занимает открытие файла Word?
  
  

  
  Приложение работает очень быстро. Зачастую требуется всего несколько секунд для открытия файла Word.
  

• 
  Безопасно ли просматривать файлы Word используя бесплатное приложение GroupDocs Viewer?
  
  

  
  Конечно! Просмотр файла будет доступен сразу же после загрузки файла. Файлы хранятся на наших серверах 24 часа после чего автоматически удаляются.
  

• 
  Могу ли я открывать и просматривать файлы Word на устройствах с Linux, Mac OS или Android?
  
  

  
  Да, приложение GroupDocs Viewer для просмотра файлов может использоваться на любом устройстве с операционной системой в которой есть браузер. Наше приложение для просмотра файлов Word работает онлайн и не требует установки дополнительного программного обеспечения.
  

• 
  Какой браузер нужно использовать для просмотра файлов Word?
  
  

  
  Для просмотра файлов Word подойдет любой современный браузер, например Google Chrome, Microsoft Edge, Firefox, Opera или Safari.
  

• 
  Какой код выполняется на стороне сервера для отображения файлов?
  
  

  
  Подробные примеры кода доступны на GitHub в виде исполняемых проектов.
  

Я уже писал о том как вставить на сайт документ .pdf в статье Просмотр .pdf файла прямо на сайте.

Сегодня же хочу написать о том, что подобным методом можно реализовать просмотр .xls и .doc файлов (документов Microsoft Office) на вашем сайте. В общем тема такая:

Онлайн просмотр файлов xls, онлайн просмотр файлов doc.

или: «как вставить документ на сайт».

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

Так как-же реализовать просмотр .xls и .doc файлов (документов office) прямо на сайте WordPress? Так-же как и с .pdf. В качестве обработчика выступает Google Docs.

Вот у нас есть 2 тестовых документа:   тестовый лист эксель, тестовый PDF

Ссылки активны, можете посмотреть результаты работы просмотрщика от Google кликнув по ним. Если вас устроит подобный вариант отображения документов, то для реализации подобного достаточно загрузить ваш файл через меню вордпресса > добавить медиафайл, а затем к ссылке на файл добавить http://docs.google.com/viewer?url=

То есть ссылка на ваш файл будет следующего вида: http://docs.google.com/viewer?url=http://info-business.pro/wp-content/uploads/2015/03/testovyy-list-yeksel.xlsx

Если же вы хотите просматривать документы непосредственно в фрейме на страницы вашего сайта, тогда вам необходимо пойти путем, описанным в статье Просмотр .pdf файла прямо на сайте, то есть добавить в  functions.php вашей темы (шаблона вордпресс) следующие строки:

//Просмотр pdf прямо на сайте
function pdf_viewer($attr, $url) {
    return '<iframe
                    src="https://docs.google.com/viewer?url=' . $url . '&embedded=true"
                    style="width:' .$attr['width']. '; height:' .$attr['height']. ';"
                    frameborder="0">Ваш браузер не поддерживает фреймы</iframe>';
}
add_shortcode('pdfview', 'pdf_viewer');

а далее на той странице, на которой вы хотите вывести ваш документ, вставить шоткод

[pdfview width="600px" height="500px"]
/wp-content/uploads/2015/03/testovyy-list-yeksel.xlsx
[/pdfview]

ну только ссылка на документ будет конечно ваша ))

Более подробна работа с этим шорткодом описана в статье, которую я уже упоминал: Просмотр .pdf файла прямо на сайте.

Если же вы не планируете постоянно работать с документами Microsoft Office, а, скажем так, сия акция — разовая, то вам конечно нецелесообразно добавлять в движок шорткод. Достаточно в редакторе страницы, переключившись в режим «текст» вставить в нужное место вот такое:

<iframe width="800" height="500" style="width: 800px; height: 500px;"
src="https://docs.google.com/viewer?url=url=/wp-content/uploads/2015/03/testovyy-PDF.pdf;
embedded=true" frameborder="0">Ваш браузер не поддерживает фреймы</iframe>

Результат:

или вот:

Параметры фрейма (ширина, высота) подбирать придется к вашему сайту и вашему документу. И обязательно вставлять сей код в режиме текст!

Но есть одно НО!!!

В последнее время Гугл-документы борется с использованием их сервиса в фреймах.

Но на любую хитрую, как известно, есть свой способ с резьбой )))

Альтернатива: официальный, свой собственный просмотрщик Office: Office Web Viewer

Находится он по адресу: https://products.office.com/ru-ru/office-online/view-office-documents-online

Что такое Office Web Viewer?

Это служба, создающая ссылки Office Web Viewer, которые открывают файлы Word, PowerPoint или Excel в браузере без необходимости их загрузки. Вы легко можете превратить ссылку загрузки в ссылку Office Web Viewer и использовать ее на своем сайте или в своем блоге (например, для файла с рецептами, слайд-шоу из фотографий, меню или шаблона бюджета).

К преимуществам Office Web Viewer относится следующее:

• Вам не требуется конвертировать файлы Office в интернет-формат (например, PDF или HTML).
• Любой пользователь даже при отсутствии Office может просматривать файлы Office с вашего сайта или из вашего блога.
• Эта служба помогает поддерживать интерес к вашему веб-сайту или блогу, так как читатели не загружают файлы и остаются в браузере.
• Одна ссылка пригодна для использования как на компьютерах, так и планшетных ПК и мобильных телефонах.
• Это идеальный онлайн просмотр файлов xls, онлайн просмотр файлов doc

Как пользоваться? Просто ))

Вставляете адрес документа, на выходе получаете ссылку, которую уже и вставляете себе на сайт.

Вот вам пример просмотра документа

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

Если документ нужен во фрейме, идем вышеописанным путем:

<iframe src="//view.officeapps.live.com/op/view.aspx?src=http%3A%2F%2Fwww.info-business.pro%2Fwp-content%2Fuploads%2F2015%2F03%2Ftestovyy-list-yeksel.xlsx" width="800" height="500" frameborder="0">Ваш браузер не поддерживает фреймы</iframe>

Вот образец того, что мы получим, если вставим вышеприведенный код в режиме текст в запись блога:

На этом пока все. Удачи вам!!!

Первое с чего хочется начать — это прежде всего для того, чтобы иметь возможность открывать прайс-лист в формате xls онлайн, необходимо его скачать на сайт и распаковать из zip-архива. Поступили следующим образом, создали скрипт на php, который бы скачивал архив в папку один раз в день и распаковывал его.
Скрипт на php самый примитивный:

 <?
 // Скачиваем архив
 $url = 'http://www.1c.ru/ftp/pub/pricelst/price_1c.zip';
 $path = './путь куда распаковываем прайс-лист/price_1c.zip';
 file_put_contents($path, file_get_contents($url));
 // распаковываем архив в эту же папку на сервере
 $zip = new ZipArchive;
 $res = $zip->open($path);
 if ($res === TRUE) {
   $zip->extractTo('./путь куда распаковываем прайс-лист/');
   $zip->close();
   echo 'ok';
 } else {
   echo 'failed';
 }
 ?>

В результате работы данного скрипта получим три файла в папке  ‘./путь куда распаковываем прайс-лист/’

• price_1c.zip
• PRICE_1C.XLS
• PRICE_1C_OLD.XLS

Далее заходим на хостинг в административную панель и добавляем в cron новое задание, которое будет раз в день запускать этот скрипт.
В результате работы этого скрипта получим, всегда свежий прайс-лист фирмы 1С (их два, просто они разной структуры, но показывают одно и тоже, сгруппированы по разному), но уже на своем сайте.
Далее, необходимо открывать онлайн в регулярно распакованном архиве прайс-лист. Для этого случая используем онлайн просмотр документов. Я нашел три сервиса, каждый из которых обладает своими преимуществами и недостатками. Все они работают по принципу, просто открываем ссылку с заданным параметром, в котором передаем распакованный архив и запускается просмотр прайса.

1. Google Docs Viewer

Самый быстрый — это Google Docs Viewer. Но он же и самый простой, он не смог корректно открыть прайс 1С, т.к. в нем используются сгруппированные строки, которые отказались нормально отображаться. Запуск очень прост:

http://docs.google.com/viewer?url=http://softonit.ru/price1c/PRICE_1C_OLD.XLS

Параметры запуска:

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

  http://docs.google.com/viewer?url=http://softonit.ru/price1c/PRICE_1C_OLD.XLS&a=bi&pagenumber=3

• w — ширина страницы в px (только при a=bi и указанном параметре pagenumber), минимум 1, максимум 2400 (≈A4x300px/inch), по умолчанию 800 (≈A4x100px/inch);

  http://docs.google.com/viewer?url=http://softonit.ru/price1c/PRICE_1C_OLD.XLS&a=bi&pagenumber=3&w=250

• q — источник документа в кэш Google Search (замена параметру url);
• embedded — включение/выключение (значения соответственно true или false) встраиваемого в сторонние html-страницы (по умолчанию false);

  http://docs.google.com/viewer?url=http://softonit.ru/price1c/PRICE_1C_OLD.XLS&embedded=true

  Можно встроить открытие в iframe.

2. Zoho Viewer

Этот вариант получше. Справился с открытием прайса 1С, все как положено, группировки увидел и их можно открывать.
Работает по ссылке:

https://sheet.zoho.com/sheet/view.do?url=http://softonit.ru/price1c/PRICE_1C_OLD.XLS&name=Прайс

• url — ссылка источник, которая будет открыта
• name имя открываемого документа

3. Office Online

Как ни крути, но самый лучший вариант — это все таки открытие в нативном приложении и/или сервисе.
Работает по ссылке:

https://view.officeapps.live.com/op/view.aspx?src=http%3A%2F%2Fwww.softonit.ru%2Fprice1c%2FPRICE_1C_OLD.XLS

• src — ссылка источник, которая будет открыта

На этом сервисе, мы и остановились. Он работает достаточно быстро и видит группировки.

Надо отметить, что на 100% с заданием никто не справился, на скриншотах видно, что до оригинала не дотягивает никто. Ближе всего Office Online, но и у него проблемы с отображением шрифтов.

Онлайн Word просмотрщик это простое в использовании онлайн приложение которое позволяет просматривать ваш Word документ онлайн с помощью браузера. Вам не нужно устанавливать специализированное программное обеспечение чтобы открыть Word документ, просто откройте это приложение с помощью веб браузера, и перетащите ваш документ в окно приложения, ваш документ откроется в браузере не зависимо используете вы операционную систему Windows, Linux, MacOS, Android или даже мобильное устройство.
Приложение Word просмотрщик показывает каждую страницу в виде изображения, что позволяет легко защитить его от редактирования и копирования. Простой интерфейс приложения Word просмотрщик предоставляет вам основные операции для: навигации по страницам документа, масштабирования страниц, предварительного просмотра страниц документа в меню навигации, загрузки всего документа в исходном формате или загрузки Word документа в виде изображений.
Так же вы можете открывать другие форматы документов с помощью этого приложения. Просто выберите другой тип приложения в разделе «Попробовать другие просмотрщики».

В некоторых ситуациях, пользователям требуется открыть DOCX (DOC) онлайн для просмотра или редактирования документа Word в интернете, не используя программное обеспечение, установленное на компьютере. Подобная возможность востребована, когда на ПК нет программы для открытия файлов данного типа.

В офисный пакет Microsoft Office, в качестве составной части входит текстовый редактор Word, который широко используется на предприятиях и обычными пользователями для создания и сохранения документов. Любой владелец компьютера рано или поздно встретится с файлами Word.

В документах Word используются два расширения файла. В версиях Word 97 — 2007 применяется расширение файла «.doc», а начиная с версии Word 2007 по настоящее время, используется расширение «.docx».

Microsoft Word — платная программа, из-за этого, не все пользователи готовы установить это приложение на свой компьютер. Если на ПК необходимо посмотреть содержимое документа Word, есть два варианта решения проблемы:

• открыть файл DOC (DOCX) онлайн;
• открыть документ DOC или DOCX с помощью программы, поддерживающей данный тип файла.

В этой статье мы рассмотрим варианты открытия файлов с расширениями DOCX или DOC на удаленном сервисе в интернете. В этом случае, пользователю не потребуется установка дополнительной программы, которая сможет открыть файл формата Word на компьютере.

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

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

Как открыть документ DOCX (DOC) онлайн в Word онлайн

Сначала посмотрим в качестве примера облачное хранилище OneDrive, которое входит в состав операционной системы Windows 10. Естественно, что продукты Microsoft интегрированы друг с другом. К облачному хранилищу подключены приложения Microsoft 365, среди которых есть Word онлайн.

Выполните следующие шаги:

1. Войдите в веб-версию облачного хранилища OneDrive из браузера, используя учетную запись Майкрософт.
2. Добавьте файл формате DOCX или DOC в облачное хранилище OneDrive.
3. Щелкните по документу Word.
4. Откроется окно сервиса Word онлайн с копией файла, который можно редактировать.

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

Копию итогового документа Word можно скачать на компьютер, или скачать в виде файла в других форматах: PDF или ODT.

Как открыть документ DOCX (DOC) онлайн в веб-версии Яндекс Диск

Компания Яндекс интегрировала сервис Word онлайн со своим облачным хранилищем Яндекс Диск. Пользователи могут воспользоваться услугами офисных приложений непосредственно из браузера, после входа на Диск.

Пройдите шаги:

1. С главной страницы поисковой системы Яндекс войдите в электронную почту, чтобы затем перейти в Яндекс.Диск, или нажмите на пункт «Диск», расположенный в форме входа в почту.
2. Нажмите на кнопку «Загрузить» для добавления файла DOCX или DOC на Яндекс Диск.
3. Кликните по документу Word.
4. В новой вкладке откроется окно сервиса Word онлайн с открытым документом.

Содержимое документа Word можно отредактировать, а затем скачать копию файла на ПК.

Открытие файла DOC (DOC) в Облако Mail.ru

Подобно Яндексу, группа Mail.Ru интегрировала сервис Word онлайн в свое «Облако Mail.ru».

Необходимо выполнить следующий порядок действий:

1. На главной странице сервиса Mail.ru нажмите на кнопку «Облако» для входа в облачное хранилище.
2. Нажмите на кнопку «Загрузить», а затем добавьте файл Word в «облако».
3. Откроется окно просмотрщика файла, в котором на нижней панели нужно нажать на кнопку «Редактировать».
4. После этого откроется окно сервиса Word онлайн.

Копию файла можно сохранить на компьютер в форматах Word, PDF или ODT.

Открытие файлов Word в Dropbox

Пользователи облачного хранилища Dropbox могут просматривать и редактировать файлы DOXC или DOC, благодаря интеграции сервиса Word онлайн с файловым хранилищем.

Проделайте следующие действия:

1. Войдите в веб-версию облачного хранилища Dropbox.
2. Нажмите на кнопку «Загрузить файлы».
3. Подведите курсор мыши к файлу, нажмите на кнопку «Открыть».
4. Выберите «Word for the web».

1. Файл DOC или DOCX откроется на сервисе Word онлайн.

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

Как открыть docx online в Google Docs

Сервис Google Docs (Google Документы) встроен в облачное хранилище Google Drive. Google Диск поддерживает работу с файлами Word в форматах DOC и DOCX.

Пройдите следующие шаги:

1. Войдите в веб-версию облачного хранилища Google Диск.
2. Нажмите сначала на кнопку «Создать», а затем на «Загрузить файлы».
3. Щелкните по загруженному файлу.
4. В окне просмотрщика файлов нажмите на кнопку «Открыть с помощью…», выберите «Google Документы».
5. В окне Документов Google можно редактировать файлы MS Office, а затем скачать их в разных текстовых форматах, включая DOCX.

Открытие файлов Word в Zoho Office Suite

Zoho Office Suite — офисный пакет онлайн приложений, среди которых есть приложение Writer, поддерживающее формат Word. На Zoho базовый уровень использования функций веб-сервиса предоставляется бесплатно.

На странице сервиса Zoho.com нужно выполнить следующие действия:

1. На странице Writer нажмите на кнопку «Передать», в контекстном меню выберите «Загрузить документ».
2. В окне «Загрузить документ» выберите вариант: «С локального компьютера». Поддерживаются файлы Word с расширениями «.docx» и «.doc», размером не более 10 МБ.
3. Нажмите на кнопку «Открыть…».
4. Нажмите слева на кнопку с тремя полосками, чтобы открыть панель инструментов, предназначенную для редактирования документа.

Готовый документ можно сохранить в разных текстовых форматах, в том числе в формате DOCX.

Как посмотреть DOCX (DOC) онлайн на сервисе 4html.net

В некоторых случаях, нужно просто посмотреть файл DOCX (DOC) онлайн без возможности редактирования содержимого документа. Пользователь может воспользоваться одним из сервисов, предназначенных для просмотра содержимого файлов Word в интернете.

На сайте 4html.net имеется просмотрщик «MS Office Documents viewer», открывающий файлы офисного формата Майкрософт.

На странице сервиса 4html.net необходимо пройти два шага:

1. Нажмите на кнопку «Обзор…» для выбора файла Word с компьютера.
2. Нажмите на кнопку «View!».

1. В новой вкладке браузера откроется страница с содержимым документа Word.

В интернете имеются и другие подобные сервисы, работающие аналогичным образом.

Выводы статьи

На компьютерах многих пользователей отсутствуют программы для просмотра и редактирования документов Word. Если нужно открыть файл Word в форматах DOCX или DOC для просмотра содержимого или редактирования, пользователь может воспользоваться услугами онлайн сервисов в интернете. В этом случае, пользователю не понадобиться устанавливать на свой компьютер программное обеспечение, предназначенное для работы с файлами Microsoft Office.

Как открыть файл DOCX или DOC онлайн (видео)

Introduction

A «document viewer» is a visual container for documents you
want visitors to be able to view in your website. It displays a document –
typically in response to the visitor clicking a link – within a defined window
and provides basic document navigation buttons on a toolbar. Advanced document
viewers add buttons for printing, zooming and searching, and some even offer
collaboration tools that enable visitors to add comments or black out («redact»)
selected text.

The box below is a live document viewer showing a PDF file; try the scrollbar, and the Zoom slider, to get a feel for the functions you can provide your visitors. 

Document viewers are great when you want to show documents
in their native format, without converting them to HTML and reconfiguring them
as web elements to include their content in your site. If you have a PDF or
Microsoft Word document you want to present to your visitors, they can click a
link to open the document in the viewer and explore it almost as if they had
opened it in its native program. But the visitor need not have Word or Adobe
Reader installed – the document viewer does all the work. A document viewer
frees you to show a document without worrying about whether the visitor has the
necessary application to display it. In most cases, it also displays the
document far more quickly than opening the document’s native application.

Most document viewers can display any Microsoft Office
document and PDF files. Some viewers do more, displaying hundreds of file
types, including CAD/CAM drawings and dozens of different image file formats.
These viewers enable you to show your visitors all sorts of files they probably
could not view without the document viewer’s help.

There are two basic types of document viewers:

A server-based
document viewer is a program installed on your web server, called whenever a
visitor invokes a document link configured to open it.

A cloud-based
document viewer works just like one installed on your server, but it’s stored
on cloud service provider’s server. The document link in your website is
configured to call the viewer program on the cloud server and open the document
within it. The document itself may still reside on your server, or it may have
to be uploaded to the Cloud first, depending on which cloud-based document
viewer service you choose.

Sometimes called «thin client» programs because they do most
of their work on the server and demand very little of the client, document
viewers typically require the Flash plugin to be installed in the user’s
browser, although some can work without Flash in browsers that support the
emerging HTML5 specification. Some support both HTML5 and Flash.

HTML5 document viewers are sometimes labeled «zero
footprint» because they require nothing on the client except the browser itself
— not even a plugin. These viewers are great when you want your visitors to be
able to display your documents on their mobile devices; there’s no Flash
support on Apple iOS devices like the iPad and iPhone, and Flash support can be
iffy on Android devices, but virtually all browsers for both mobile operating
systems support HTML5.

Depending on the document viewer you select and on how you
apply it in your site, you have various options for how to present the
document. It can simply open in a new tab/window, or the viewer can be
incorporated as an <iframe> element into the layout, ready to house any
document the visitor chooses. Often you can apply optional parameters that
customize the viewer in various ways, such as hiding the Print button for
sensitive documents, defining the height and width of the viewer window, or
always opening the document to a particular page.

In the following sections, you will learn how to embed
document viewing in your website using Prizm Cloud, a free cloud-based document
viewer. You can learn more about Prizm Cloud at http://prizmcloud.accusoft.com.

Phrasing
a URL that Calls a Viewer

No matter which way you choose to present your document
viewer, the critical step is phrasing a URL that points to the viewer program
and the document file. After completing a brief form to sign up for Prizm Cloud, you’ll receive a
custom key to use only for your documents on your server. (Prizm Cloud calls
documents from your server instead of making you upload them to the Cloud. This
saves you not only the time required for the upload, but the time required for
subsequent uploads anytime the document changes.) The documents you display
through Prizm Cloud must be Internet accessible.

The URL for displaying a document comprises the Prizm Cloud
viewer address (http://connect.ajaxdocumentviewer.com), the key, and your full
document address. For example, suppose that:

• Your key
  is 12345
• The direct
  address to your document is http://www.mydoc.com/resume.pdf

A text or image link with the following URL opens your
document in a new browser tab/window, using default values for any optional
parameters.

http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.mydoc.com/resume.pdf

Adding
the Viewer as a Layout Element

Using an <iframe> element, you can incorporate a
document viewer box into the layout of your web page (or HTML-formatted blog
post, email message or other HTML publication). This is an especially useful
approach when you are presenting links to multiple documents you want to open
in the same box, or when there’s a single document you want to present as soon
as the visitor arrives at your page. The image below shows the Prizm Cloud viewer
in an <iframe>, beneath a banner in the layout.

The syntax for the URL (src) portion of the <iframe>
element is the same as shown earlier. The sample code below opens the specified
document in a 650×600 frame on the current page.

<iframe seamless width=600" height="650"
src="http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.irs.gov/pub/irs-pdf/fw4.pdf">
<p>Your browser does not support iframes.</p> </iframe>

Creating
a Floating «Lightbox» Document Viewer

Using a JavaScript lightbox plugin, you can display a
document viewer in an attractive modal overlay atop the current page, rather
than opening a new tab/window or setting aside a frame in the layout.

The image below shows the Prizm Cloud viewer in a lightbox
floating over the page from which it was called. Observe that the underlying
page is «dimmed» when the lightbox appears, to focus the visitor’s attention on
the document.

This is a great option when multiple links on a page call
different documents. To do this, you need to pick up a jQuery lightbox plugin.

There are many different lightbox plugins available,
although for use with Prizm Cloud, you must choose one that supports
<iframe> content; not all do. The example below uses a lightweight
customizable lightbox plugin for jQuery called Colorbox (http://www.jacklmoore.com/colorbox/)
in building a page of three links, each of which opens a different document
through Prizm Cloud in a lightbox. (You can learn more about using a lightbox
here: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/super-simple-lightbox-with-css-and-jquery/)

The code sample below uses the Colorbox plugin and Prizm Cloud to open three different documents in a lightbox overlay that floats above the current page.

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'/>
		<title>Prizm Cloud Demo | using Colorbox</title>
		<style>
			body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
			a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
			h2{font-size:13px; margin:15px 0 0 0;}
		</style>
		<link rel="stylesheet" href="colorbox.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="../jquery.colorbox.js"></script>
		<script>
			$(document).ready(function(){
				
				$(".prizmcloud").colorbox({rel:'prizmcloud', iframe:true, innerWidth:620, innerHeight:815});
			});
		</script>
	</head>
	<body>
		<h2>Documents</h2>
		<p><a class='prizmcloud' href="http://connect.ajaxdocumentviewer.com/?key=Prizm Cloud key goes here&document=http://www.accusoft.com/docs/prizm-cloud-flash-vs-html5.pdf&viewerwidth=590&viewerheight=785&viewertype=html5&toolbarColor=E8E8E8&cache=yes" title="HTML5 vs Flash">HTML5 vs Flash</a></p>
		<p><a class='prizmcloud' href="http://connect.ajaxdocumentviewer.com/?key=Prizm Cloud key goes here&document=http://www.epa.gov/nerl/download_files/documents/NERL_FactSheet2011.pdf&viewerwidth=590&viewerheight=785&viewertype=flash&toolbarColor=E8E8E8&cache=yes" title="EPA Exposure Research">EPA Exposure Research</a></p>
		<p><a class='prizmcloud' href="http://connect.ajaxdocumentviewer.com/?key=Prizm Cloud key goes here&document=http://www.cdc.gov/phpr/documents/11_225700_A_Zombie_Final.pdf&viewerwidth=590&viewerheight=785&viewertype=flash&toolbarColor=E8E8E8&cache=yes" title="Zombie Pandemic">Zombie Pandemic</a></p>
		<br/><br/><br/><br/><br/><br/><br/>
		<p>using <a target="_blank" href='http://www.jacklmoore.com/colorbox/'>Colorbox</a> - a jQuery lightbox</p>
	</body>
</html>

About Optional Parameters

Prizm Cloud features a family of optional parameters you can
incorporate in the URL to adjust the look and functionality of the viewer.
There are parameters that define the size of the viewer box and the toolbar,
display or hide certain toolbar buttons or change the toolbar color, apply
encryption, and more. For every parameter there is a default setting used when
you omit the parameter altogether. A full listing of parameters and their
permitted and default values is available at http://prizmcloud.accusoft.com/documentation.html.

To apply optional parameters, simply add an ampersand
(&) after the document filename, followed by the parameter name, an equals
sign (=), and the setting you want to apply.

For example, to add parameters specifying a window size of
600 pixels high by 800 pixels wide for the simple URL sample earlier in this
article under Phrasing a URL that Calls a Viewer, you would phrase the
URL as follows:

http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.mydoc.com/resume.pdf&viewerheight=600&viewerwidth=800

Conclusion

Web citizens have come to expect a lot of variety from the
sites they frequent, seeming to favor those that delight their senses with a
mix of well-designed text elements, images, video, and more. A document viewer
not only enables your site to present a world of content it otherwise could
not, but also does so in a way that is fun and attractive, performs well for
the visitor, and distinguishes your site as one both rich in content and nice
to look at.

If you like what you see of Prizm Cloud, you can use it free
of charge for up to 5,000 views per month. You can get more information, and
see a live demo, at http://prizmcloud.accusoft.com.

About the
Author

Ned Averill-Snell is a computer journalist and author. A
past contributing editor to DATAMATION and Inside Technology Training
magazines, he is the author of Macromedia Contribute 3 in a Snap and Sams
Teach Yourself to Create Web Pages in 24 Hours, among other titles.

Давеча столкнулся с необходимостью вставить просмотр .pdf файла прямо на сайте под CMS WordPress клиента (Прайс-лист).

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

Представленный ниже код аналогично позволит вывести и файлы .xls, .doc. Т.е. данное решение универсально.

Код не мой и свободно гуляет по сети. Смотрите на результат его работы.

Если файл не подгрузится, то отобразится соответствующее сообщение и ссылка на «Скачать». Т.е. в любом случае посетитель сайта получит информацию. Не подгрузиться может из-за периодических глюков обработки самим Google, либо при большом объеме файла ваш сервер может отдать ошибку.

Посетитель сможет листать страницы, если их несколько, приближать/удалять, а так же вывести в полноэкранном режиме.

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

Переходим к внедрению просмотрщика pdf, xls и doc на ваш сайт. Открываем файл functions.php (лежит в папке с шаблоном на хостинге) и сразу после <?php переходим на новую строку, где вставляем следующий код:

//Просмотр pdf прямо на сайте
function pdf_viewer($attr, $url) {
    return '';
}
add_shortcode('pdfview', 'pdf_viewer');

Сейчас мы создали шорткод. Чтобы отобразился файл pdf на сайте, необходимо ссылку на этот файл разместить внутри такого шорткода (вставляете в свою статью или на страницу):

Обратите внимание где указана ссылка на файл. Так же здесь вы можете задать ширину (width) и высоту (height) блока, чтобы гармонично вписать в страницу.

Если высота и ширина у вас будет всегда одного размера, то можно избавить себя от подбора цифр. Модифицируем немного код просмотрщика:

//Просмотр pdf прямо на сайте
function pdf_viewer($attr, $url) {
    return '';
}
add_shortcode('pdfview', 'pdf_viewer');

Соответственно, отображать на странице будем уже так:

А теперь немного упростим себе жизнь. Если помните, то раньше уже научились добавлять в панель редактирования статьи свои кнопки. Статья Как выделить текст жирным, курсивом и подчеркиванием без стандартных тегов HTML. Теперь останется внедрить свою кнопку, которая будет выглядеть так:

QTags.addButton( 'pdf', 'PDF', '');

Либо так, в случае с уже заданными параметрами высоты и ширины:

QTags.addButton( 'pdf', 'PDF', '');

Соответственно, название шорткода pdfview вы можете заменить на свое в нужных местах кода. Аналогично и в названии ссылки панели форматирования. Это на случай, если вам понадобится отображать .xls или .doc.

На этом все. Побольше вам целевого трафика.