Как вставить документ PDF (пдф) в страницу сайта
Возможностей несколько, но, к сожалению, не все имеют кроссбраузерную поддержку — одни требуют установки плагина, другие вовсе не отражаются.
PDF на сайт
C использованием элемента embed
C использованием embed через элемент object
Спецификация HTML 4.0 рекомендует использовать тег для загрузки внешних данных вместо тега , поэтому наилучшим вариантом будет поместить внутрь контейнера .
С использованием тега iframe
С использованием сервиса Google Docs Viewer (через iframe)
UPDATE Сервис Docs Viewer уже не поддерживается Гуглом, однако встраиванием pdf-файла можно пользоваться до сих пор. Не работает с HTTPS сайтами!
Нужно закодировать URL файла pdf в ASCI и вставить закодированную ссылку в конструкцию.
// Пример // 1. Ссылка на документ - http://www.apsolyamov.ru/files/pdf_test.pdf 2. Закодированная ссылка - http%3A%2F%2Fwww.apsolyamov.ru%2Ffiles%2Fpdf_test.pdf 3. Общая конструкция —
С использованием сервисов публикации документов
Требуется регистрация. После загрузки файла на сервер сервиса необходимо получить код для вставки документа пдф на сайт (через iframe). Прокрутка поддерживается.
- Google Docs — http://docs.google.com/
- One Drive — https://onedrive.live.com/
С использованием Google Drive
1. Откройте папку с документом на Гугл диске.
2. Выделите нужный файл пдф и нажмите значок глаза («Предварительный просмотр»).
3. Далее, в правом верхнем углу дополнительные опции (три точки) и «Открыть в новом окне».
4. Снова в правом верхнем углу дополнительные опции (три точки) и «Встроить».
5. Откроется окно с кодом для встраивания. Копируйте и вставляйте на страницу сайта. Ширина и высота фрейма по вкусу.
Создание URL для открытия файла PDF на определенной странице
Страницы HTML могут содержать ссылки, которые открывают файлы PDF в веб-браузере с помощью модуля продукта Adobe Acrobat (Adobe Acrobat Professional или Standard, Adobe Acrobat 3D или Adobe Reader), установленного в поддерживаемые версии Netscape Navigator, Mozilla Firefox, Microsoft Internet Explorer или Safari (Mac OS).
При открытии файла PDF в браузере по умолчанию будет отображаться первая страница файла PDF. Вы можете добавить строку в ссылке HTML таким образом, что откроется файл PDF и в нем выполняется переход к указанной странице или указанной позиции. Для использования любого из этих методов выполните следующие действия:
Откройте файл PDF на конкретной странице
Для направления ссылки HTML на конкретную страницу файла PDF добавьте #page=[номер-страницы] в конец ссылки URL.
Например, этот тег HTML открывает страницу 4 файла PDF myfile.pdf:
Примечание. Если вы используете в ссылке адрес сервера UNC (\\servername\folder), настройте ссылку для открытия в место назначения, используя процедуру в следующем разделе. При использовании URL, содержащих адреса локального жесткого диска (c:\folder\), вы не сможете создать ссылку к номерам страниц или местам назначения. В продуктах Adobe Acrobat 7.0 ссылка на номера страниц работает только при использовании местоположений HTTP или HTTPS. Адреса UNC сервера будут работать только при использовании метода указания адресов так, как показано в следующем разделе этого документа.
Откройте файл PDF в месте назначения
Место назначения является конечным пунктом ссылки и представлено текстом на панели «Места назначения». Места назначения позволяют задать пути навигации по набору документов Adobe PDF. Создание ссылки на место назначения рекомендуется при организации связей между документами, так как, в отличие от ссылки на страницу, ссылка на место назначения не изменяется при добавлении или удалении страниц в целевом документе.
Чтобы указать место назначения в Acrobat 7.0 (Professional или Standard):
1. Установите масштаб и размещение на странице таким образом, как вы хотите видеть на экране.
2. Выберите «Просмотр > «Вкладки навигации» > «Места назначения», чтобы открыть вкладку «Места назначения».
3. Выберите «Параметры» > «Новое место назначения» в меню «Места назначения».
4. Задайте имя для места назначения.
5. Создайте ссылку HTML, которая указывает на это место назначения, добавив #[имя-места-назначения] в конец ссылок URL.
Например, этот тег HTML открывает папку с именем «glossary» в файле PDF myfile.pdf:
Как добавить на сайт PDF?
Если вы хотите разместить на сайте PDF документ таким образом, чтобы его можно было пролистывать, пожалуйста, используйте Вставку html кода и сервис, который позволяет загрузить PDF и получить код.
Также вы можете добавить ссылку на файл на стороннем сервисе (например, DropBox, Яндекс.Диск, Google Drive и др.) внутри блока — большинство браузеров позволяют просматривать файл сразу на отдельной странице.
Похожие вопросы
- Как добавить ссылку на конкретное место на странице (якорь)?
- Как добавить кнопку?
- Как добавить свой HTML, CSS или Javascript-код?
- Как сделать всплывающее окно?
- Как добавить видео?
PDF виджет для сайта
Почему стоит выбрать виджет от Elfsight для просмотра PDF на сайте?
Больше полезной информации. Выше вовлеченность
Ускоренное добавление файлов
Сэкономьте свое время, быстро внедряя необходимые файлы на сайт
Больше полезной информации о продуктах
Загружайте техническую документацию и инструкции и дайте пользователям возможность более подробно изучить продукт
Выше вовлеченность пользователей
Разнообразьте контент сайта, добавив больше практической информации
вебсайтов поддерживается
часов вложено в разработку
чтобы начать использование
счастливых клиентов
Станьте одним из 2,078,753 клиентов Elfsight Apps
Создайте свой первый виджет Elfsight PDF Виджет бесплатно.
В чем уникальность Elfsight PDF виджета?
ИНТЕГРАЦИЯ
Добавьте свои PDF на сайт без проблем
С помощью виджета от Elfsight вы сможете с легкостью добавить пдф файлы на свой сайт. На ваш выбор предоставляется три варианта интеграции: загрузить с компьютера, по URL документа или выбрать из последних добавленных файлов. Каждому файлу можно присвоить название — оно будет отображаться на странице рядом с его иконкой.
Комфортный просмотр и загрузка файлов для ваших пользователей
Elfsight виджет предлагает три варианта компоновки пдф файлов на странице. Если вы хотите, чтобы пользователи просматривали их непосредственно на сайте, то вам подойдет опция просмотра. А Grid и List, в свою очередь, отобразят только название файла и кнопку для загрузки — пользователи должны будут скачать документ, чтобы изучить его.
Интерфейс, который станет отражением вашего стиля
Чтобы вы с легкостью могли создать свой пдф виджет, который идеально впишется в дизайн вашего сайта, мы добавили несколько полезных опций. С их помощью вы сможете, к примеру, добавить или спрятать иконку файла, изменить ее цвет, настроить размер шрифта и значка загрузки, перекрасить 6 элементов интерфейса и выбрать свой заголовок виджета. Также у вас есть возможность указать ширину и высоту виджета в пикселях или процентах.
Примеры использования
Посмотрите реальные примеры встраивания PDF файлов, чтобы раскрыть потенциал виджета для вашего сайта.
Активное демо
Откройте для себя все функции PDF файл виджета в интерактивном демо. Бесплатно, без регистрации, без программирования.
Чем виджеты Elfsight отличаются от других?
Обширный список функций — не единственное, что предлагает наш виджет. Мы также предоставляем оперативную поддержку клиентов и регулярные обновления, которые позволяют сделать ваш сайт максимально эффективным.
Удобный онлайн-редактор
Вам не потребуется писать код или искать разработчика. С помощью нашего редактора вы сможете самостоятельно установить виджет в несколько шагов, сэкономив свое время и деньги.
Команда профессионалов Elfsight
Комфортный опыт использования благодаря первоклассной клиентской поддержке и бесплатной помощи в установке виджета.
Превосходный сервис Elfsight Apps
Облачные решения обеспечивают регулярные автоматические обновления, быстрое устранение ошибок и высокую скорость, где бы вы ни находились.