Как отобразить pdf в html
Как вставить документ PDF (пдф) в страницу сайта
Возможностей несколько, но, к сожалению, не все имеют кроссбраузерную поддержку — одни требуют установки плагина, другие вовсе не отражаются.
PDF на сайт
C использованием элемента embed
C использованием embed через элемент object
Спецификация HTML 4.0 рекомендует использовать тег
С использованием тега iframe
С использованием сервиса Google Docs Viewer (через iframe)
UPDATE Сервис Docs Viewer уже не поддерживается Гуглом, однако встраиванием pdf-файла можно пользоваться до сих пор. Не работает с HTTPS сайтами!
Нужно закодировать URL файла pdf в ASCI и вставить закодированную ссылку в конструкцию.
С использованием сервисов публикации документов
Требуется регистрация. После загрузки файла на сервер сервиса необходимо получить код для вставки документа пдф на сайт (через iframe). Прокрутка поддерживается.
С использованием Google Drive
1. Откройте папку с документом на Гугл диске.
2. Выделите нужный файл пдф и нажмите значок глаза («Предварительный просмотр»).
3. Далее, в правом верхнем углу дополнительные опции (три точки) и «Открыть в новом окне».
4. Снова в правом верхнем углу дополнительные опции (три точки) и «Встроить».
5. Откроется окно с кодом для встраивания. Копируйте и вставляйте на страницу сайта. Ширина и высота фрейма по вкусу.
Встраивание документа PDF в веб-страницу
Эта статья рассказывает о том, как сделать отображение документа формата PDF непосредственно на странице сайта.
Важно, чтобы решение было совместимо со всеми платформами – браузерами и операционными системами, в том числе мобильными. Иначе большая часть пользователей не сможет увидеть документ.
Ещё желательно, чтобы была возможность указания определённого места документа – это удобно для больших документов каталогов, чтобы каталог открывался пользователю сразу на нужной странице.
Способы внедрения документа в формате PDF в HTML страницу
Простой в использовании:
В отличие от EMBED, можно задать текст для отображения в случае, если показать документ не получилось. Это может быть альтернативный текст или прямая ссылка на скачивание документа.
PDF.js
A general-purpose, web standards-based platform for parsing and rendering PDFs.
Требуется установка файлов проекта PDF.js на сайт. Установка несложная – просто скопировать файлы, но нужен доступ. Также при загрузке страницы будет загружаться просмотровщик – это увеличит время загрузки страницы, потребуется настроить кеширование файлов на стороне клиента.
Adobe Document Cloud
Это тоже вариант, если использовать веб-версию Adobe Document Cloud, которая позволяет просматривать документы на веб-странице, а не в локальном приложении.
Тестирование, сравнение и выводы
Для просмотра и сравнения сделал https://nhutils.ru/blog/proverka-vstraivaniya-pdf-dokumenta-v-veb-stranitsu/, которую надо открыть на разных устройствах и в разных браузерах.
На мобильном можно открыть по коду:
Проверка
| Android | iPhone/iPad | Windows | |
| EMBED | ✖ | ✖ | ✔ |
| OBJECT | ✖ | ✖ | ✔ |
| Adobe Document CLoud | ✖ | ✖ | ✔ |
| pdf.js | ✔ | ✔ | ✔ |
На десктопе работают все варианты.
Теги EMBED и OBJECT не работают на мобильных – на Android окно белое, на iPhone — показывается только первая страница документа, как картинка– нельзя листать страницы, менять масштаб тоже нельзя.
Внедрение документа PDF из Adobe Document Cloud тоже не работает – белое поле.
Рекомендуемый способ встраивания PDF в HTML?
каков рекомендуемый способ встраивания PDF в HTML?
Что говорит сам Adobe об этом?
в моем случае PDF генерируется на лету, поэтому его нельзя загрузить в стороннее решение до его промывки.
20 ответов
вероятно, лучший подход-использовать в формате PDF.JS библиотека. Это чистая в HTML5/JavaScript renderer для PDF документов без каких-либо сторонних плагинов.
это быстро, легко, к месту и не требует каких-либо сторонних скриптов:
обновление (1/2018):
браузер Chrome на Android больше не поддерживает PDF-вставки. Вы можете обойти это с помощью Google Drive PDF viewer
вы также можете использовать Google PDF viewer для этой цели. Насколько я знаю, это не официальная функция Google (я ошибаюсь?), но это работает для меня очень хорошо и гладко. Вам нужно загрузить свой PDF где-то раньше и просто использовать его URL:
важно то, что ему не нужен Flash player, он использует JavaScript.
у вас есть некоторый контроль над тем, как PDF появляется в браузере, передавая некоторые параметры в строке запроса. Я был рад этой работе, пока не понял, что она не работает в IE8. 🙁
он работает в Chrome 9 и Firefox 3.6, но в IE8 он показывает сообщение «вставьте сообщение об ошибке здесь, если PDF не может быть отображен.»
Я еще не тестировал более старые версии любого из вышеперечисленных браузеров. Но вот код, который у меня есть, на случай, если он кому-то поможет. Это устанавливает масштаб 85%, удаляет полосы прокрутки, панели инструментов и навигационные панели. Я обновлю свой пост, если я столкнусь с чем-то, что работает в IE.
преобразуйте его в PNG через ImageMagick и отобразите PNG (быстрый и грязный).
это хороший вариант, если вам нужно быстрое решение, хотите избежать проблем просмотра PDF через браузер, и если PDF-это только страница или две. Конечно, вам нужно установить ImageMagick (который, в свою очередь, нуждается в Ghostscript) на вашем веб-сервере, опция, которая может быть недоступна в средах общего хостинга. Существует также плагин PHP (называемый imagick), который работает такой но у него есть свои особые требования.
посмотрите на этот код-для вставки PDF в HTML
FDView совместная PDF2SWF (который сам основан на ни xpdf) С SWF-файлом viewer, чтобы вы могли конвертировать и вставлять PDF-документы на лету на вашем сервере.
xpdf не является идеальным PDF конвертер. Если вам нужны лучшие результаты, то Ghostview имеет возможность конвертировать PDF-документы в другие форматы, для которых вы можете легко создать Flash viewer.
но для простого PDF документы, FDView должны работать достаточно хорошо.
Scribd больше не требует, чтобы вы размещали свои документы на своем сервере. Если вы создадите учетную запись с ними, вы получите идентификатор издателя. Для загрузки PDF-файлов, хранящихся на вашем собственном сервере, требуется всего несколько строк кода JavaScript.
создайте контейнер для хранения PDF
скажите PDFObject, какой PDF вставлять, и где вставлять его
вы можете дополнительно использовать CSS для указания визуального стиля, включая размеры, границы, поля и т. д.
один из вариантов, который вы должны рассмотреть, это примечательный PDF
Он имеет бесплатный план, если вы не планируете делать онлайн-сотрудничество в режиме реального времени на PDF
добавьте следующее iframe в любой html и наслаждайтесь результатами:
проблема для нас в том, что мы не можем сохранять данные по юридическим причинам. Поэтому нам нужно работать с потоками и подобными, не сохраняя PDF в файловой системе. И по нескольким причинам страница не должна перезагружаться при загрузке или отображении PDF-файла.
Сначала мы попробовали с PDF.JS из-за предложения @lubos hasko: нам удалось использовать Base64 со зрителем. Это работало в Firefox и Chrome. Но все равно очень медленно. IE / Edge не работал вообще для США.
отображение строки PDF-Base64 в объектном теге не работало для нас в браузере Microsoft (IE/Edge), но очень хорошо в Chrome/Firefox / Safari. Поэтому для IE11/Edge мы использовали IFrame для отображения потока PDF. Оно работает хорошо и усилие обслуживания сдержано в пределах. Для IE9 / IE10 мы просто отправляем файл в виде потока загрузки, потому что он не очень хорошо работает с этими браузерами в сочетании с iframe. У пользователя нет роскоши показывать pdf в modal-box-предварительный просмотр, который подходит для количества наших клиентов, которые используют эти браузеры (около 1%). Вы можете найти наше решение для загрузки здесь:Скачать PDF без обновления с IFrame.
причина, по которой мы не используем решение IFrame для всех браузеров, заключается в том, что, хотя PDF отображается правильно во всех наших проверенных браузерах, Chrome делает еще один запрос к функции сервера, как только вы хотите загрузить PDF в Chrome-PDF Reader. Этот скрытое поле pdfHelperTransferData больше не задано, потому что PDF отображается в IFrame, поэтому параметр в серверной функции null. Для этой «функции / ошибки» см. Это Chrome отправляет два запроса при загрузке PDF (и отменяет один из них).
чтобы проверить наличие Microsoft-Browser см., Например:как я могу обнаружить Internet Explorer (IE) и Microsoft Edge с использованием JavaScript? Я надеюсь, что эти результаты сэкономят кому-то еще некоторое время.
С учетом сказанного, ссылочная статья MSDN принимает довольно упрощенный взгляд на мир, поэтому вы можете прочитать успешно поток PDF в браузер через Протоколу HTTPS а также для некоторых заголовков, которые вам могут понадобиться.
используя этот подход, iframe, вероятно, лучший способ пойти. Имейте одну веб-форму, которая передает файл, а затем поместите iframe на другую страницу с его src атрибут установлен в первую форму.
URI для iframe должен выглядеть примерно так:
теперь FF, Chrome, IE 11 и Edge отображают PDF в средстве просмотра в iframe, переданном через стандартный URI blob в URL.
Если вы не хотите размещать PDF.JS самостоятельно, вы можете попробовать DocDroid. Он похож на Google Drive PDF viewer, но позволяет пользовательский брендинг.
это то, как я сделал с AXIOS и Vue.js:
добавить urlPDF динамически в HTML:
Если вы можете конвертировать pdf в изображение, перейдите вhttps://www.base64-image.de Поместите изображение внутри, и он преобразует его в base64 для вас. Затем поместите код в тег изображения.
Я нашел, что это работает просто отлично, и браузер обрабатывает его в firefox. Я не проверял IE.
Вставляем PDF на сайт для просмотра со страницы
Добавим просмотр PDF файла на страницу сайта без использования плагинов и сложных решений. Всё делается одной строкой кода и онлайн-сервисом от Google. Сначала приведу эту волшебную сроку, а затем рассмотрим дополнительные возможности.
Ваш браузер не поддерживает фреймы
Таким образом можно добавить на сайт просмотр содержимого PDF файла. При этом, вывод не зависит от браузера или движка. Сам сервис называется «Google Docs Viewer» и поддерживает вывод многих форматов документов. Вот перечень самых распространенных: doc, docx, odt, pdf, rtf, ppt, pptx.
Ваш браузер не поддерживает фреймы
На странице сервиса можно указать путь к документу и сгенерировать код для вставки на сайт. В результате, получите приблизительно ту же строку, которая приведена выше. В заключение хочу предостеречь от излишнего использования этого способа вывода информации из документов. Их содержимое не будет индексироваться поисковыми машинами. Если есть возможность переконвертировать информацию из документа в html — сделайте это, либо позвольте посетителю скачать файл.
Просто нужно теперь https указывать
Тобишь https ://docs.google.com/viewer?url=http://www.RealAdmin.ru/assets/Instruction.pdf&embedded=true»
style=«width: 600px; height: 600px;» frameborder=«0»>Ваш браузер не поддерживает фреймы
У меня получилось сегодня сделать подобное через drive.google.com/ Если загрузить туда документ, потом открыть в полный размер для просмотра (и нажав справа сверху квадратик со стрелочкой открыть в новом окне), щелкнуть сверху на трех точках и выбрать в выпавшем меню — «Вписать», откроется окошко с кодом фрейма, который и нужно уже вставлять на страничку.
Можно это же самое сделать и со своего сайта — положить в любую папку документ и прописать вместо адреса на сервере гугла путь к документу на своем сайте. И все также отлично выводится. За статью спасибо, она подтолкнула к шевелению извилинами.
Андрей, еще подскажите, пожалуйста, как лучше выводить PDF документы — во фрейме или в браузере по адресу site.ru/folder/file.pdf?
Как лучше для поисковых систем? Во фрейме ведь они не видят текст? А если вывести в браузере — они прочитают? Мне нужно добавить кучу нормативных документов по строительству. И стоит ли их делать доступными для индексации? ведь по сути они не уникальны?
Рекомендуемый способ встраивания PDF в HTML?
Каков рекомендуемый способ встраивания PDF в HTML?
Что скажет сам Adobe об этом?
В моем случае PDF создается «на лету», поэтому он не может быть загружен в стороннее решение до его очистки.
ОТВЕТЫ
Ответ 1
Ответ 2
Это быстро, просто, точно и не требует никакого стороннего скрипта:
ОБНОВЛЕНИЕ (1/2018):
Браузер Chrome на Android больше не поддерживает встраивание PDF. Вы можете обойти это, используя Google Drive PDF Viewer
Ответ 3
Вы также можете использовать Google PDF viewer для этой цели. Насколько я знаю, это не официальная функция Google (я не прав на это?), Но она работает для меня очень красиво и гладко. Вам нужно загрузить PDF файл раньше и просто использовать его URL-адрес:
Важно то, что ему не нужен Flash-плеер, он использует JavaScript.
Ответ 4
У вас есть некоторый контроль над тем, как PDF появляется в браузере, передавая некоторые параметры в строке запроса. Я был рад этой работе, пока не понял, что она не работает в IE8. 🙁
Он работает в Chrome 9 и Firefox 3.6, но в IE8 отображается сообщение «Вставьте здесь сообщение об ошибке, если PDF не отображается».
Тем не менее, я еще не тестировал более старые версии любого из вышеперечисленных браузеров. Но вот код, который у меня есть, в любом случае, если он кому-то поможет. Это позволяет увеличить масштаб до 85%, удаляет полосы прокрутки, панели инструментов и панели навигации. Я буду обновлять свой пост, если я натолкнулся на то, что работает и в IE.
Ответ 5
Ответ 6
Преобразуйте его в PNG с помощью ImageMagick и покажите PNG (быстрый и грязный).
Это хороший вариант, если вам нужно быстрое решение, вы хотите избежать проблем с просмотром PDF файлов в нескольких браузерах, и если PDF файл является только страницей или двумя. Конечно, вам нужно установить ImageMagick (что, в свою очередь, требует Ghostscript) на ваш веб-сервер, вариант, который может быть недоступен в средах с общим хостингом. Существует также плагин PHP (называемый imagick), который работает как это, но у него есть свои особые требования.
Ответ 7
Взгляните на этот код. Чтобы вставить PDF в HTML
Ответ 8
FDView объединяет PDF2SWF (который сам основан на xpdf) с SWF-программой просмотра, поэтому вы можете конвертировать и вставлять документы PDF на лету на своем сервере.
xpdf не является идеальным конвертером PDF. Если вам нужны лучшие результаты, у Ghostview есть возможность конвертировать PDF-документы в другие форматы, которые могут быть проще для создания Flash-просмотра.
Но для простых документов PDF FDView должен работать достаточно хорошо.
Ответ 9
Наша проблема в том, что по юридическим причинам нам не разрешено временно хранить PDF на жестком диске. Кроме того, вся страница не должна быть перезагружена при отображении PDF в качестве предварительного просмотра в браузере.
Сначала мы попробовали PDF.jS. Он работал с Base64 в средстве просмотра для Firefox и Chrome. Однако это было недопустимо медленно для нашего PDF. IE/Edge не работал вообще.
Поэтому мы попробовали это со строкой Base64 в теге объекта HTML. Это опять не работает для IE/Edge (возможно, та же проблема, что и с PDF.js). В Chrome/Firefox/Safari опять нет проблем. Вот почему мы выбрали гибридное решение. В IE/Edge мы используем IFrame и для всех остальных браузеров объект-тег.
Конечно, решение IFrame также подойдет для Chrome и co. Причина, по которой мы не использовали это решение для Chrome, заключается в том, что, хотя PDF отображается правильно, Chrome отправляет новый запрос на сервер, как только вы нажимаете «скачать» в предварительном просмотре. Обязательное скрытое поле pdfHelperTransferData (для отправки данных формы, необходимых для создания PDF) больше не задается, поскольку PDF отображается в IFrame. Для этой функции/ошибки см. Chrome отправляет два запроса при загрузке PDF (и отменяет один из них).
Теперь проблемы детей IE9 и IE10 остаются. Для этого мы отказались от решения для предварительного просмотра и просто отправили документ, нажав кнопку предварительного просмотра для загрузки пользователю (вместо предварительного просмотра). Мы много пытались, но даже если бы мы нашли решение, дополнительные усилия для этой крошечной части пользователей не стоили бы усилий. Вы можете найти наше решение для загрузки здесь: Скачать PDF без обновления с IFrame.
Чтобы проверить тип браузера для IE/Edge, смотрите здесь: Как я могу обнаружить Internet Explorer (IE) и Microsoft Edge, используя JavaScript? Я надеюсь, что эти результаты сэкономят кому-то еще время.
Ответ 10
Создайте контейнер для хранения вашего PDF
Укажите PDFObject, какой PDF файл вставлять и где его встраивать
При желании вы можете использовать CSS для указания визуального стиля, включая размеры, границы, поля и т.д.
Ответ 11
Scribd больше не требует, чтобы вы размещали документы на своем сервере. Если вы создаете учетную запись с ними, чтобы получить идентификатор издателя. Для загрузки файлов PDF, хранящихся на вашем собственном сервере, требуется всего несколько строк кода JavaScript.
Ответ 12
Вставьте следующий iframe в любой html и наслаждайтесь результатами:
Ответ 13
Ответ 14
Ответ 15
Вы можете использовать относительное местоположение сохраненного PDF файла следующим образом:
Ответ 16
С учетом сказанного ссылка на статью MSDN занимает довольно упрощенное представление о мире, поэтому вы можете прочитать Успешно передать PDF в браузер через HTTPS, а также для некоторых заголовков, которые вам могут потребоваться.
Ответ 17
Так я сделал с AXIOS и Vue.js:
добавить urlPDF динамически в HTML:
Ответ 18
URI для iframe должен выглядеть примерно так:
Теперь FF, Chrome, IE 11 и Edge отображают PDF в средстве просмотра в iframe, передаваемом через стандартный URL-адрес blob в URL-адресе.
Ответ 19
Как и многие замечательные ответы на этой странице, я также нашел PDFObject очень полезным. конечно же, стоит посмотреть.
Ответ 20
Если вы не хотите размещать PDF.JS самостоятельно, вы можете попробовать DocDroid. Он похож на средство просмотра Google Диска PDF, но позволяет настраивать брендинг.
Ответ 21
Если вы можете преобразовать свой pdf файл в изображение, перейдите на https://www.base64-image.de, разместите свое изображение внутри, и оно преобразует его в base64 для вас. Затем поместите код в тег изображения.
Ответ 22
Вы должны сделать PDF, прежде чем показывать его.
Ответ 23
Я нашел, что это работает отлично, и браузер обрабатывает его в firefox. Я не проверял IE.