Главная > Веб мастерская > WordPress > Просмотр .xls и .doc файлов (документов office) прямо на сайте WordPress.

Просмотр .xls и .doc файлов (документов office) прямо на сайте WordPress.

Онлайн просмотр файлов xls, онлайн просмотр файлов docЯ уже писал о том как вставить на сайт документ .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>

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

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

NEW!!! Полезное, нужное, важное:

Где заработать в интернете деньги? Надёжно, честно, без обмана!
Платежные системы, кошельки и обменники для работы

Лучшие хостинги, сервера и прочее для сайтов

Смотрите также

Продвижение молодого сайта

Основная трудность — это недостаток времени существования сайта — и не фига не сделаешь с этим фактом. И именно по этому продвижение молодого сайта отличается от периодической раскрутки старого, трастового ресурса.

17 комментариев

  1. Благодарю!
    Отличное решение!
    Как раз удалил плагин, который отвечал за эту функцию и не знал, чем заменить.
    Развития вашему полезному сайту!

  2. Здравствуйте!
    Подскажите, не повлияют ли отрицательно на продвижение сайта ссылки во фрейме генерированные на стороннем ресурсе?

    • Нет, не думаю, Олег… Понимаете, поисковики умнеют день за днем. В этом конечно и плохого много, но и хорошие моменты есть — например яндекс очень четко научился определять ссылки на соц сети и на подобные приведенным в статье сервисам типа «office-online» и другие. Он, яндекс, рассматривает это как удобство для пользователей. Вы вот на эту страницу с поиска перешли? На столь короткий текст — 3 здоровых фрейма на этой странице ))

  3. Сергей спасибо! Буду внедрять на своём сайте.

  4. Сергей здравствуйте! Воспользовался вашим кодом для документа в ворде, почему то ничего не показывает sud-isk.ru/zhilishhnye-spory.html

  5. Видно наел причину., после сохранения страницы код изменяется

    src=»https://view.officeapps.live.com/op/view.aspx?src=http%3A%2F%2Fsud-isk.ru%2Fwp-content%2Fuploads%2FObrazets-nadzornoy-zhaloby.doc;
    embedded=true» frameborder=»0″>Ваш браузер не поддерживает фреймы

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

  6. У вас на сайте код отображается нормально
    символ > изменяется на (&gt)

  7. Проблема решена.
    У меня немножко другой код получился

    • Рад за Вас, Олег) А я вот только увидел Ваши комментарии. Но рад, что разобрались,

  8. Ребята))) Написал js которая поможет всем. Она ищет на открытой странице, после загрузки всего html все ссылки на *.doc *.docx *.xls и тд ))) Заменяет их на ссылку, которая открывает в новом окне или в модальном (опционально) ресурс с данной статьи. Огромное спасибо автору за идею)) Все, кому надо, могут обращаться http://vk.com/vicimpa или skype: aple160194. Скрипт удобен тем что на его установку нужно лишь его добавить его в head и усе) Все робит) Обращайтесь

  9. Дмитрий

    Здравствуйте. На одной странице (на разных закладках) два офисных фрейма отображаются корректно, а два — нет. Может быть есть ограничения по количеству таких фреймов на одной странице?

  10. Содержимое файлов будет индексироваться поисковыми системами?

  11. Огромное спасибо за ссылку на Office Web Viewer — очень помогло красиво выйти из "безвыходного" положения на бесплатном сайте. Благодарю за информацию!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *