Вам нужно включить PDF-файл в свой HTML-документ?
Разработчики используют разные теги для встраивания PDF в HTML. Теги <embed>, <object> и <iframe> могут отображать PDF-файл внутри веб-приложения. Каждый ведет себя схожим образом, но какой лучше? И есть ли лучший способ отобразить PDF в веб-браузере?
Это может оказаться непростой задачей. Встраивание чего-либо в HTML всегда было таким. Не волнуйтесь. На самом деле это довольно просто, если вы знаете, как это делается. Из этой статьи вы узнаете, как встроить PDF в HTML. Более того, выбранные методы являются самыми простыми в использовании.
В этой статье
Часть 1
Зачем Вам встраивать PDF-Файлы в HTML
Часть 2
Встраивайте PDF-файлы в HTML с помощью тега <object>
Часть 3
Вставьте PDF в HTML с помощью тега <embed>
Часть 4
Вставьте PDF в HTML с помощью тега < iframe>
Зачем Вам встраивать PDF-файлы в HTML?
Все дело в "доступности".
Как люди делились PDF-файлами в прошлом? Люди загружают их куда-то, а затем отправляют ссылку на скачивание тем, с кем они хотят поделиться PDF-файлами. Если вы уже давно пользуетесь компьютерами, вы знаете, что загрузка файлов может быть сопряжена с риском. В качестве альтернативы они прикрепляют PDF-файлы к электронным письмам. Это может быть утомительно, особенно если размер PDF превышает максимальный размер файла в электронных письмах.
Лучшим подходом является встраивание PDF-файла в формат HTML. Это избавляет от необходимости скачивать или отправлять PDF-файл другим пользователям. Им нужно только получить доступ к PDF-файлу, размещенному на веб-сайте. Поскольку современные браузеры теперь поддерживают просмотр PDF-файлов, пользователям не нужно загружать файл.
Встраивание PDF в HTML удобнее для бизнеса, каким бы маленьким он ни был. Это гарантирует, что все сотрудники компании будут иметь доступ к одной и той же версии PDF.
Вставьте PDF в HTML с помощью тега <object>.
Тег object в HTML - это первый способ встраивания PDF-файлов. Он указывает внешний источник, встроенный в HTML-документ. Этот тег object может быть изображением, ресурсом подключаемого модуля или вложенным контекстом для навигации пользователя. Например, вы можете встроить PDF в HTML для отображения шаблона документа.
В этом примере показано использование элемента object для встраивания PDF-файла в HTML.
Шаг 1 Обратите внимание на ссылку на ваш pdf-файл.
Шаг 2 К элементу object добавьте атрибут type со значением application/pdf.
Шаг 3 К элементу object добавьте атрибут data со значением вашей ссылки в формате pdf.
Шаг 4 Установите высоту и ширину в соответствии с вашими требованиями.
<object
class="pdf_example"
type="application/pdf"
data="example.pdf"
width="600"
height="700"
>
<a href="example.pdf">Download PDF</a>
</object>
Элемент может содержать:
Включенный компонент.
Данные для представления.
Любые дополнительные значения, требуемые объектом во время компиляции.
Вы можете комбинировать элементы object и использовать эту функцию для определения нескольких объектов для каждого браузера. Хотя все основные браузеры не поддерживают элемент object, его использование ограничено.
Параметры тега "object"
Данные: "data" - он указывает URL-адрес ресурса, который будет использоваться объектом (ссылка на встраиваемый ресурс).
Тип: "type" - Определяет тип содержимого ресурса, описываемого данными (MIME-тип подгружаемого объекта).
Форма: "form" - Обозначает элемент формы, с которым связан элемент object (связь с одной или несколькими формами).
Высота: "height" - определяет высоту объекта.
Ширина: "width" - определяет высоту объекта.
Название: "name" - Указывает имя объекта.
usemap — атрибут для связи объекта с тегом <map>;
type должен соответствовать: в нем однозначно указывается, что ресурс должен быть вставлен, если атрибут type соответствует соответствующему текстовому типу ресурсов, указанному в атрибуте data.
Вставьте PDF в HTML с помощью тега <embed>.
Для встраивания внешних ресурсов в веб-страницу в HTML предусмотрен тег embed. Используя тег embed, мы можем включать внешние ресурсы, такие как PDF-файлы, медиаплееры и веб-страницы. Тег имеет атрибут src, который позволяет нам указать путь к файлу, который будет внедрен. Атрибут type позволяет нам указать тип внедренного файла. Атрибутом type для PDF должно быть application/pdf. Тег embed является автономным.
Например, чтобы встроить PDF-файл в HTML, выполните следующие действия:
Шаг 1 Создайте файл с именем files в каталоге, содержащем HTML-файл. Файл PDF содержится в файле files.
Шаг 2 Создайте тег embed в HTML и укажите путь в атрибуте src.
Шаг 3 Установите атрибут application/pdf type.
Шаг 4 Укажите ширину и ширину PDF-файла, равные 100%. Поскольку для высоты и ширины задано значение 100%, PDF-файл заполнит все окно просмотра.
Варианты этого кода позволят вам "вытащить" страницу или набор страниц из исходного PDF-файла и отобразить их в виде интерактивного контента на обычной веб-странице. Преимущество в этом случае заключается в том, что контент встроен или прикреплен к HTML. Это не лучший способ сделать это, но в крайнем случае он может быть полезен.
вставьте pdf-файл на веб-страницу
Атрибуты для тега embedded
HTML-встраивание основано на четырех атрибутах. Эти атрибуты определяют, что должен делать embedded.
Высота: "height" - Эти атрибуты определяют высоту встроенного элемента содержимого. Это значение выражается в пикселях.
Ширина: "width" - Эти атрибуты определяют ширину встроенного элемента контента. Это значение выражается в пикселях.
Источник: "src" - Используется для передачи веб-URL, который указывает веб-адрес встроенного контента.
Тип: "type" - Этот атрибут определяет тип мультимедиа, например видео или аудио.
Некоторые современные браузеры могут не поддерживать тег для встраивания. Браузер Android Chrome не поддерживает встраивание PDF-файлов. В таких случаях вы можете использовать Google Drive PDF Viewer. Вам следует удалить атрибут type и указать URL-адрес Google Drive для PDF-файла. Мы можем встраивать PDF-файлы в HTML.
Вставьте PDF в HTML с помощью тега <iframe>
Теги iframe в HTML - это встроенные фреймы, используемые в HTML-документе для включения другого. Чаще всего они используются на веб-страницах или в процессах веб-разработки для включения другого контента из другого источника, например рекламы, на эту веб-страницу.
Вот пример того, как встроить PDF-файл в HTML с помощью тега iframe.
<iframe
id="idName"
title="My Title"
width="560"
height="400"
frameborder="1"
allowfullscreen="true"
src="files/document.pdf"
>
</iframe>
Шаг 1. Создайте тег iframe с атрибутом src, равным files/document.pdf. Document.pdf - это PDF-файл, который будет встроен и который находится в каталоге files.
Шаг 2 Убедитесь, что HTML-код и каталог файлов совпадают.
Шаг 3 Установите высоту и ширину PDF-файла на 100%.
встроить pdf в html
PDF-файл будет закрывать окно просмотра. При использовании тега iframe в PDF появляется вертикальная полоса прокрутки. Используя тег iframe, мы можем встроить PDF-файл в HTML.
iframe обычно используется веб-дизайнерами для представления интерактивных приложений на веб-сайтах или веб-страницах. Это стало возможным благодаря использованию JavaScript или атрибута target в HTML.
Основная функция тега iframe - отображать одну веб-страницу внутри другой. Встроенный фрейм должен отображаться с тегом iframe. Он работает аналогично прямоугольному блоку на вашем веб-сайте, где браузер может отображать другой документ с полосами прокрутки и границами.
Атрибуты тега iframe
HTML-теги содержат атрибуты, используемые для управления PDF-файлами и их отображения в HTML-фреймах. Более подробное описание атрибутов приведено ниже.
Источник: "src" - Укажите путь к внешнему файлу, который будет вставлен сюда.
Тип: "type" - Здесь вы можете указать тип носителя для встроенного контента.
Ширина: "width" - Здесь можно указать ширину встроенного содержимого.
Высота: "height" - Здесь можно задать высоту встроенного содержимого.
Как встроить PDF-файл в HTML-страницу без использования JavaScript
PDF-файлы могут быть встроены в HTML-страницы без использования JavaScript.
Ниже приведены четыре примера наиболее распространенных методов.
Примечание: эти примеры работают в большинстве современных браузеров для настольных компьютеров, но результаты будут отличаться в старых браузерах для настольных компьютеров и мобильных браузеров. Ни один из этих примеров не работает должным образом на мобильных устройствах, включая iOS.
<embed>
Элемент <embed> стал официальной частью спецификации HTML с появлением HTML5. Все браузеры, совместимые с HTML5, - все "современные" браузеры — официально поддерживают элемент <embed>. Старые браузеры также предлагают на удивление надежную (хотя иногда и неофициальную) поддержку <embed>. К сожалению, при использовании в статической разметке элемент <embed> не предоставляет механизма для резервного копирования содержимого. Если браузер не поддерживает встраивание PDF-файлов, что по-прежнему часто случается с браузерами на мобильных устройствах, конечный пользователь ничего не увидит.
<embed src="/pdf/myPDF_document.pdf#page=2" type="application/pdf" width="100%" height="100%" />
<iframe>
Метод <iframe> широко поддерживается и является одним из самых простых способов встраивания PDF-файлов. Однако <iframe> не предоставляет резервного содержимого, если браузер не поддерживает рендеринг PDF-файлов.
HTML
<iframe src="/pdf/myPDF_document.pdf#page=2" width="100%" height="100%"></iframe>
<object>
В отличие от <embed>, элемент <object> позволяет вам оставить резервное содержимое, если браузер не поддерживает встраивание PDF. Все браузеры поддерживают элемент <object>, но часто возникают расхождения в том, как он был реализован в каждом браузере. Обязательно тщательно протестируйте свои страницы в разных браузерах и операционных системах, если вы используете элемент <object>.
HTML
<object data="/pdf/myPDF_documentp.pdf#page=2" type="application/pdf" width="100%" height="100%">
<b>Example fallback content</b>: This browser does not support PDFs. Please download the PDF to view it:
<a href="/pdf/myPDF_documentp.pdf">Download PDF</a>.
</object>
Пример резервного содержимого: Этот браузер не поддерживает PDF-файлы. Пожалуйста, загрузите PDF-файл, чтобы просмотреть его: Скачать PDF.
<object><iframe></object>
Использование <object> с <iframe> обеспечивает дополнительную защиту, если <object> не поддерживается.
HTML
<object data="/pdf/myPDF_document.pdf#page=2" type="application/pdf" width="100%" height="100%">
<iframe src="/pdf/myPDF_document.pdf#page=2" width="100%" height="100%" style="border: none;">
This browser does not support PDFs. Please download the PDF to view it:
<a href="/pdf/myPDF_document.pdf">Download PDF</a>
</iframe>
</object>
Теперь, когда вы увидели, как это работает с обычной HTML-разметкой, посмотрите, что возможно с помощью JavaScript и утилиты PDFObject.
