Сейчас: 19:06:21   24-го апреля 2024 г.
UsefulScript.ruХитростиОтобразить на сайте PDF
23
91

Как отобразить на сайте содержимое документов PDF, DOC и RTF

В данной теме мы рассмотрим простой пример отображения на своем сайте документов в форматах PDF, DOC и RTF.


Объясним для чего это нужно. Предположим у Вас уже есть какие-либо сформированные документы в формате PDF, DOC или RTF, которые нужно показать посетителям Вашего сайта, а не выложить в виде архивов для скачивания. Для того чтобы отобразить содержимое этих документов на своем сайте, не потеряв форматирование мы предлагаем воспользоваться вьювером Google Docs при помощи iframe.


Для встраивания документа в формате DOC, достаточно воспользоваться приведенным ниже кодом:

HTML код:
<iframe style="width: 700px; height: 400px; border: none;"
src="http://docs.google.com/gview?url=http://usefulscript.ru/download/pdf_doc_site.doc&embedded=true"></iframe>

Далее расположен наглядный пример работы приведенного выше PHP кода:




Если Вам необходимо отобразить другой документ, то просто замените имя файла и путь к нему на нужный. При необходимости можно изменить и размеры окна для просмотра документа.

Дата создания: 14:18:10 30.09.2012 г.
Дата обновления: 13:13:33 25.10.2012 г.
Посещений: 22411 раз(а).

Комментарии посетителей (21 шт.):
Александр
0
# 1183
(10:17:24  07.10.2013 г.)

Не отображается это окно в Opera 16.
Ответить

Administrator
0
# 1192
(22:27:05  08.10.2013 г.)

Не отображается сам фрейм или документ внутри него?
Ответить

Александр
0
# 1206
(18:05:47  13.10.2013 г.)

Все извините, включил какую-то надстройку в Opera и заработало.
Ответить

Динара
-1
# 1279
(21:58:30  11.11.2013 г.)

Не подскажите, почему при встраивании на сайт в iframe так, как вы написали, может возникать такая ошибка:
Load denied by X-Frame-Options: https://docs.google.com/gview?url does not permit cross-origin framing.
Ответить

Administrator
0
# 1280
(22:17:56  11.11.2013 г.)

Трудно сказать, наверно, все зависит от конкретного файла, который Вы добавляете на сайт в iframe. В нашем примере ведь работает.
Ответить

Динара
0
# 1281
(22:45:01  11.11.2013 г.)

В одном месте я прочитала, что чтобы документ открывался на сайте, необходимо вот здесь:
https://docs.google.com/viewer сгенерировать ссылку (то есть первым способом), а если просто самим писать ее, то встроить в iframe не получится. Так ли это? Вы генерировали ссылку на том сайте?
Ответить

Administrator
0
# 1282
(23:22:10  11.11.2013 г.)

Ссылку мы не генерировали, а просто прописали путь к файлу, добавив в конце &embedded=true.
Ответить

Максим
0
# 1614
(08:52:06  22.04.2014 г.)

День добрый, подскажите, пожалуйста, а можно ли проделать то же самое с форматом xls и xlsx?
Ответить

Антон
0
# 1765
(23:50:49  23.07.2014 г.)

Тоже поддерживаю Максима. Возможно ли такое?
Ответить

Administrator
0
# 1766
(00:16:44  24.07.2014 г.)

Конечно, возможно. Делается так:
<iframe src="http://docs.google.com/viewer?url=http://usefulscript.ru/file.xls&embedded=true&pagenumber=1"
width="800" height="400" style="border: none;"></iframe>
Сделано по аналогии с DOC с той лишь разницей, что для XLS необходимо указывать еще и номер листа (pagenumber=1).
Ответить

Владимир
0
# 2045
(13:40:22  19.11.2014 г.)

У меня на сайте есть страничка со списком моих публикаций и есть ссылки на файлы pdf чтобы их скачать. Можно ли добавить ссылки, при клике на которые открывалось бы новое окно и в нем отображалось содержимое pdf файла?
Ответить

Administrator
0
# 2046
(21:29:23  19.11.2014 г.)

Сделайте ссылки вида: <a href="http://docs.google.com/gview?
url=http://usefulscript.ru/download/pdf_doc_site.doc&embedded=true">Ссылка на pdf...</a>
Ответить

trizna
0
# 2370
(15:35:56  31.03.2015 г.)

Эта функция GoogleDocs уже не работает.
Ответить

Administrator
0
# 2371
(22:19:36  31.03.2015 г.)

К сожалению, уже не работает. Требует регистрацию, и только после регистрации можно загружать файлы и генерировать ссылки, но убрать панель инструментов так и не вышло.
Для PDF файлов можно использовать такую конструкцию:
<object data='pdf_doc_site.pdf#' type='application/pdf' width='600px' height='400px'>
Ответить

Administrator
0
# 2487
(19:05:15  16.05.2015 г.)

Вроде как GoogleDocs вернули все обратно и код выше опять заработал.
Ответить

Лена
0
# 2748
(14:18:38  07.10.2015 г.)

Здравствуйте, подскажите, пожалуйста, проблема такого характера, вставляю ссылку на сайт (ту что выше, только со своим документом), а на сайте на месте документа появляется надпись "Предварительный просмотр недоступен".
Ответить

Administrator
0
# 2749
(14:23:13  07.10.2015 г.)

Сам документ себе на сайт закачали? И приведите пример добавляемой Вами ссылки.
Ответить

Лена
0
# 2752
(20:47:23  08.10.2015 г.)

Да, сам документ на Google диске, доступ открыт для всех. Вот ссылка:
<iframe style="width: 700px; height: 400px; border: none;" src="http://docs.google.com/gview?url=http://usefulscript.ru/download/vidy_ode.docx&embedded=true"></iframe>
Ответить

Administrator
0
# 2753
(21:44:37  08.10.2015 г.)

У Вас в ссылке указан домен нашего сайта!
Вместо usefulscript.ru/download/vidy_ode.docx напишите правильный путь к документу.
Ответить

Андрей
0
# 3796
(13:30:25  21.03.2017 г.)

А вот *.docx не открывает:( "Не удалось загрузить изображение для предпросмотра."
В чем может быть проблема?
Ответить

Наталья
0
# 4967
(23:10:13  18.02.2023 г.)

Проблема может быть в размере сайта - слишком большой. К сожалению, я не знаю решений подобных вопросов.
Ответить

Закрыть
Ваше имя:
410 + 3 =
Добавить комментарий:
Ваше имя:
410 + 3 =

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

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Посетителей онлайн: 6

Какой браузер Вы используете?