Вам нужно включить 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.