Как встроить файл PDF в веб-сайт? - PullRequest
Новая
       39

Как встроить файл PDF в веб-сайт?

8 голосов
/ 03 ноября 2010

Я просто хочу вставить PDF-файл на веб-сайт.

Лучшее решение, которое я нашел, это Google Docs Viewer (http://docs.google.com/viewer),, но оно не работает для IE и, очевидно, не будет работать для меня.

У кого-нибудь есть простое и простое решение?

Обновление: я должен добавить, что одним из преимуществ встраивания PDF-файла, который позволяет Google Viewer, является то, что по мере обновления PDF-файла, на который я ссылаюсь, (и он может без уведомления), мой сайт автоматически будет тот же файл PDF (при условии, что полное имя пути не меняется, что не меняется). По этой причине преобразование файла в изображение не является предпочтительным.

Ответы [ 8 ]

9 голосов
/ 03 ноября 2010

Ну, поскольку вы, очевидно, не хотите заставлять кого-либо загружать раздутый небезопасный плагин pdf, почему бы не позволить им использовать раздутый небезопасный флэш-плеер?

http://flexpaper.devaldi.com/

Но на самом деле это просто, как

<iframe src="path/to/pdf" width="500" height="700">

5 голосов
/ 04 февраля 2015

Обновленный ответ для HTML5: 

<object data="filename.pdf" type="application/pdf">
  Your browser does not support pdfs, <a href="filename.pdf">click here to
  download the file.</a>
</object>

Вы можете прочитать об этом здесь:

http://www.w3schools.com/tags/tag_object.asp

4 голосов
/ 03 ноября 2010

Если вы придерживаетесь встроенной опции pdf, Байрон прав, хотя вложенные pdf файлы выглядят не так хорошо на веб-странице.В любом случае, будьте строгими в кодировании.Следовательно: 

<iframe src="path/to/pdf" width=500 height = 700>

Должно быть 

<iframe src="path/to/pdf" width="500" height="700">

Небольшое изменение.

4 голосов
/ 03 ноября 2010

Как долго длится файл pdf?Разве вы не можете преобразовать его в очень длинное изображение и отобразить его в div с полосой прокрутки?

1 голос
/ 17 февраля 2015

Вероятно, лучший подход - использовать библиотеку PDF.JS.Это чистый HTML5 / JavaScript рендеринг для документов PDF без каких-либо сторонних плагинов.

Онлайн-демонстрация: http://mozilla.github.com/pdf.js/web/viewer.html

GitHub: https://github.com/mozilla/pdf.js введите описание ссылки здесь

Вы также можете использовать Google PDF Viewer для этой цели.Насколько я знаю, это не официальная функция Google (я не прав в этом?), Но она работает для меня очень хорошо и гладко.Вам нужно загрузить свой PDF куда-то раньше и просто использовать его URL: 

<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>
1 голос
/ 12 декабря 2010

У меня просто ftp мой, я не пользуюсь гуглом или любым другим з / ш

у вас должны быть какие-то потребности, кроме файла PDF, находящегося в каталоге, что это?

Кроме того, зачем конвертировать изображение (и уменьшать разрешение и четкость PDF)?

Ответ на комментарий

Это самое уродливое, что я видел со времени моей последней поездки в Африку. Вы серьезно не думаете о том, чтобы разместить столько информации на одной странице? Никто не может прочитать это, и я попробовал каждое увеличение.

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

  1. Поместите несколько элементов управления на первой странице и предоставьте пользователю небольшой объем управляемой информации о выбранной области. Только.

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

    Затем вы просто создаете хорошие чистые страницы с разумным количеством информации в удобочитаемой форме на каждой странице.

  2. Это расписание 20-го века . Обратите внимание, не расписание 21-го века (посмотрите на Берлин или Мюнхен для одного из них). Вы действительно не можете просто отсканировать интенсивный документ и предоставить его в виде внедренного PDF.

    • Обратите внимание, что вам не нужны сложные элементы управления CityRail. Вы можете иметь только несколько, чтобы выбрать линию и расписание.
    • затем создайте страницу, которая является простой формой страницы CityRail.
    • или (абсолютный минимум) один полноразмерный PDF-файл для каждой веб-страницы.
      .

  3. Как это простой для просмотра PDF . Этот пример может быть представлен в одном PDF для страницы 1 и 4 отдельных PDF-страниц для остальных; В PDF уже есть базовая навигация, поэтому я использовал эту функцию и вместо этого создал один 5-пейджер. Убедитесь, что вы нашли и используете синие стеклянные кнопки и следуйте подсказкам навигации слева вверху и внизу каждой страницы.

  4. Во-вторых, чтобы продемонстрировать PDF-файлы и навигацию, посмотрите на папку: все файлы являются PDF-файлами.

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

  6. Предположим, вы закончили свою страницу Карт Google, это первая страница или страница указателя. Нарисуйте все линии поезда; когда пользователь нажимает на линию поезда, он переводит их либо на (а) чистую страницу, созданную из вашей базы данных в соответствии с (1), которая будет выглядеть как (2), либо (б) в один чистый PDF-файл в читаемой форме в соответствии с (3). Вы можете сделать весь проект, просто манипулируя файлами в каталогах.

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

Приветствия

0 голосов
/ 17 июля 2016

Документы Google предлагают недокументированную функцию, которая позволяет вставлять файлы PDF и презентации PowerPoint на веб-страницу.Файлы не нужно загружать в Документы Google, но они должны быть доступны онлайн.

Вот код, который я использовал для встраивания файла PDF:

но вы должны заменить жирный URL своим собственным адресом.Как я уже упоминал, просмотрщик документов работает с файлами PDF и PPT.

http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html

0 голосов
/ 17 ноября 2015

Из HTML5: 

<embed src="url" type="media-type" height="" width=""/>

Для типов носителей см. http://www.iana.org/assignments/media-types/media-types.xhtml

...