Сегодня я задался нетривиальным вопросом. Я уже давно получаю от моего брокера, через которого торгую на фондовой бирже (подробнее по теме — на финансовом блоге) отчеты в виде PDF-файлов, интегрированных в HTML-страницу. Сегодня для одного из моих коммерческих сайтов мне понадобилось вставить PDF-файл на страницу сайта. Причем не как ссылку на скачивание, а как доступный к просмотру файл (как в «читалке» PDF). Зачем может понадобиться PDF-файл на странице сайта? Да много зачем — к примеру, если вы продаете мебель оптом, вам может быть интересно предложить посетителям сайта красивый каталог мебели... Покопавшись в Сети, я нашел простое и изящное решение. Давайте же разберем, как вставить PDF-файл на страницу сайта.
Для вставки нам понадобится собственно исходник. В моем случае им стал файл broshure.pdf (это название будет фигурировать в коде, соответственно — в вашем случае его надо заменить на название вашего файла 
). Загружаем его в папку data, созданную в корневой папке домена на хостинге (public_html/data получится).
Далее — создаем новую страницу (или запись — если речь о блоге — не важно — код отображается корректно и там и там). Задаем название и в тело страницы вставляем следующий код:
<object data="http://actionwebs.ru/data/broshure.pdf" type="application/pdf" width="600" height="450">
alt : <a href="http://actionwebs.ru/data/broshure.pdf">Брошюра APIFLOWER</a>
</object>
Размеры в коде можно задавать требуемые вам — файл при выводе на странице будет масштабироваться, фактически — это не размер файла, а размер поля вывода — в идеале, конечно, сохранить пропорции с файлом pdf. В параметре alt (где у меня написано «Брошюра APIFLOWER») вводится текст, который станет заголовком страницы (с длинными текстами я не экспериментировал, но размер его порядка h1, так что абзац описания пихать туда не айс). Вот собственно и все. В результате мы получим что-то вроде этого:
UPDATE: Мистика какая-то После публикации статьи все было в порядке, пример отображался как надо. Прошло несколько минут (код остался тот же) и вот в Хроме — белый квадрат вместо примера, а в Опере — пустая ссылка вида http://actionwebs.ru/posobiya/data/broshure.pdf, ведущая в никуда. Обратите внимание на адрес — если следовать логике, то у нас просто нет файла требуемого по этому адресу. А если подумать — у нас нет и папки posobiya, так как это просто рубрика блога. Решение было найдено путем изменения адреса в коде с относительного на абсолютный. На всякий случай, если опять переклинит — вот как оно выглядит на сайте заказчика:
Эта запись также похожа на:
- Создание карты сайта. Любого размера
- Инструменты для блоггера (контроль за продвижением сайта)
- Параметры ранжирования сайта (Google)
- SEO-анализ сайта: сервисы
55 комментариев
Оставьте свой комментарий к записи 'Как вставить PDF-файл на страницу сайта'