Вставляем PDF на сайт для просмотра со страницы

Комментарии: 26

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

<iframe src="https://docs.google.com/viewer?url=http://RealAdmin.ru/assets/Instruction.pdf&embedded=true" 
style="width: 600px; height: 600px;" frameborder="0">Ваш браузер не поддерживает фреймы</iframe>

Результат работы:

Параметры:

«https://RealAdmin.ru/assets/Instruction.pdf» — полный путь к pdf файлу, который требуется вывести.
«width: 600px» — ширина фрейма для вывода.
«height: 600px» — высота фрейма для вывода.

Таким образом можно добавить на сайт просмотр содержимого PDF файла. При этом, вывод не зависит от браузера или движка. Сам сервис называется «Google Docs Viewer» и поддерживает вывод многих форматов документов. Вот перечень самых распространенных: doc, docx, odt, pdf, rtf, ppt, pptx.

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

Andy Si

23 мая 2014 г.

75402

Темы:

PDF HTML Сервисы

Ещё интересное — 6

Набор анимированных svg-preloader иконок

Телевидение и радио на компьютере с ComboPlayer

Транслит русских букв в английские

Онлайн генератор HTML таблиц

Увеличение фото на сайте по клику на jquery

Конвертор кириллических ссылок в Punicode

Комментарии —

trizna
trizna31 марта 2015, 15:23# ↓

Не работает.
После слов «Результат работы:» — ничего нет, пустое поле.
И в других случаях тоже не работает.

ответить
1. Andy Si31 марта 2015, 15:34# ↑ ↓
  
  Да, похоже Гугл удалил свой сервис Google Viewer или переделал его работу. Как узнаю — отпишу.
  
  ответить
Умный
Умный06 августа 2015, 13:38# ↓

Просто нужно теперь https указывать

Тобишь <iframe src="https://docs.google.com/viewer?url=http://www.RealAdmin.ru/assets/Instruction.pdf&embedded=true"
style=«width: 600px; height: 600px;» frameborder=«0»>Ваш браузер не поддерживает фреймы

ответить
1. Andy Si06 августа 2015, 15:04# ↑ ↓
  
  Спасибо за подсказку, хотя сейчас и с http работает, но на всякий случай заменю.
  
  ответить
Cергей
Cергей22 декабря 2015, 17:09# ↓

Все равно не работает. Нет такого сервиса теперь у гугла.

ответить
1. Andy Si22 декабря 2015, 17:15# ↑ ↓
  
  Если нет, то как у меня на этой странице pdf отображается?
  
  ответить
  1. Igor
    Igor11 апреля 2017, 21:48# ↑ ↓
    
    хз, у меня не отображается…
    
    ответить
Cергей
Cергей22 декабря 2015, 21:22(был изменён)# ↓

У меня получилось сегодня сделать подобное через drive.google.com/ Если загрузить туда документ, потом открыть в полный размер для просмотра (и нажав справа сверху квадратик со стрелочкой открыть в новом окне), щелкнуть сверху на трех точках и выбрать в выпавшем меню — «Вписать», откроется окошко с кодом фрейма, который и нужно уже вставлять на страничку.

Можно это же самое сделать и со своего сайта — положить в любую папку документ и прописать вместо адреса на сервере гугла путь к документу на своем сайте. И все также отлично выводится. За статью спасибо, она подтолкнула к шевелению извилинами.

Андрей, еще подскажите, пожалуйста, как лучше выводить PDF документы — во фрейме или в браузере по адресу site.ru/folder/file.pdf?

Как лучше для поисковых систем? Во фрейме ведь они не видят текст? А если вывести в браузере — они прочитают? Мне нужно добавить кучу нормативных документов по строительству. И стоит ли их делать доступными для индексации? ведь по сути они не уникальны?

ответить
1. Andy Si23 декабря 2015, 09:27# ↑ ↓
  
  Ну тебе тоже спасибо, надо будет попробовать.
  
  ответить
Борис
Борис20 сентября 2016, 11:02# ↓

Отлично сработало!

ответить
Алена
Алена28 октября 2016, 13:04# ↓

Подскажите, а это работает только для pdf или документы word тоже можно так организовать? Если нет, то как сделать с word?

ответить
1. Andy Si28 октября 2016, 14:14# ↑ ↓
  
  Точно так же работает и для Word. Просто подставляете вместо PDF файл DOC или DOCX
  
  ответить
  1. Алена
    Алена29 октября 2016, 19:53# ↑ ↓
    
    Спасибо.
    Еще присоединюсь к вопросу Сергея:
    «Как лучше для поисковых систем? Во фрейме ведь они не видят текст? А если вывести в браузере — они прочитают? Мне нужно добавить кучу нормативных документов по строительству. И стоит ли их делать доступными для индексации? ведь по сути они не уникальны? „
    У меня тоже планируются не уникальные нормативные документы. Это решаемо как-то?
    
    ответить
    1. Andy Si30 октября 2016, 12:00(был изменён)# ↑ ↓
      
      Лучше создать отдельную страницу с названием — Нормативные документы по строительству. Написать на странице от себя пару абзацев что это за документы и для чего нужны. А дальше вывести сами документы любым из способов. Сами документы лучше не индексировать, оставить в iframe. Для поисковиков это лучший вариант.
      
      ответить
Сергей
Сергей16 января 2018, 17:03# ↓

Метод для того, что бы изредка показывать документ. Если на сайте много посетителей, метод не годится, потому как гугл режет iframe, если часто через него ходить. Сделано это для защиты от разного рода дурней, который в ифраймах пихают чужие сайты и потом порно рассылают, а ещё хуже такой вот флуд устраивают…

ответить
1. Andy Si16 января 2018, 22:28# ↑ ↓
  
  Да, пожалуй, так и есть.
  
  ответить
Татьяна
Татьяна26 июня 2018, 16:37# ↓

Добрый день. Подскажите, пожалуйста, можно ли каким-то образом настроит, чтобы в опубликованном PDF-файле не появлялся значок «Открыть в новом окне»? Спасибо.

ответить
1. Andy Si26 июня 2018, 19:55# ↑ ↓
  
  Попробуйте в ссылке прописать embedded=false, если не поможет, значит нельзя.
  
  ответить
Екатерина
Екатерина06 июля 2018, 07:30# ↓

Подскажите, что нужно сделать что бы загрузить файл PDF на сайт в «Медиа менеджер»? При загрузке пишет «Некорректное изображение»((( Этим сайтом занимался другой человек, и за другим компом. В дальнейшем предстоит мне вести сайт. Почему не получается у меня загрузить PDF, может нужно на комп устанавливать что-то дополнительно???

ответить
1. Andy Si06 июля 2018, 09:08# ↑ ↓
  
  А что за медиаменеджер? Наверно, не поддерживает формат PDF.
  
  ответить
Ellina
Ellina22 июля 2019, 10:52# ↓

Спасибо большое!) долго искала решение данной проблемы. Важно что это работает и в мобильной версии и на айфоне!)

ответить
1. Andy Si22 июля 2019, 11:49# ↑ ↓
  
  Отлично, рад что ещё актуально.
  
  ответить
Маргарита
Маргарита01 декабря 2021, 12:39# ↓

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

ответить
1. Andy Si01 декабря 2021, 14:22# ↑ ↓
  
  Добрый день. Готовых решений не встречал. Для реализации скорее всего потребуется нанять программиста, который бы и решил эту проблему. Тоже самое касается аренды и подписки на промежутки времени.
  
  По поводу хранилища — тут нужно какое-то собственное решение для просмотра книг. Если просто открывать книгу в pdf/doc, то никакая защита не поможет от скачивания.
  
  ответить
  1. Маргарита
    Маргарита01 декабря 2021, 15:24(был изменён)# ↑ ↓
    
    это получается нет читалок которые можно с интегрировать с сайтом? а как тогда работают другие сайты, я не говорю конечно про литрес или других гигантов у которых куча разработчиков. но вот например https://knigolub.net/reader/5747/ они же как то ее привязали
    
    ответить
    1. Andy Si02 декабря 2021, 09:51(был изменён)# ↑ ↓
      
      Все эти сервисы считывают текст из исходника (pdf, doc или другого формата) и выводят частями в формате html на сайт. Чтобы считать текст из pdf нужно знание языка PHP. Решения есть, типа готовых классов — class.pdf2text.php, но для их внедрения нужен веб-разработчик.
      
      ответить

Написать комментарий