Как разместить PDF файл в окне внутри страницы
10 февраля 2021
Нас часто спрашивают "Как сделать так, чтобы PDF файл можно было посмотреть внутри страницы без скачивания". Рассмотрим как вставить документ PDF (пдф) в страницу сайта в текстовом редакторе в системе управления сайтами TSAdmin с помощью iframe.
Пример размещения PDF файла внутри страницы:
Итак, вам понадобится: PDF файл и вот такой код:
Порядок действий:
Выбираем PDF файл, который хотим разместить на странице, или несколько файлов если необходимо разместить несколько.
|
Т.к. файлы будут размещаться напрямую на сервер и необходимо будет указывать прямую ссылку на файл, чтобы все работало корректно, вам необходимо переименовать файлы латинскими буквами (английскими буквами). Так же допустимо использование цифр и символов "тире" (-) и "подчеркивание (земля)" (_). Избегайте использования заглавных букв, пишите все строчными.
|
Пример переименования файлов:
Мы вас предупредили, если вы все разместили и у вас что то не работает, начните проверку с этого пункта.
Далее, входим в систему управления сайтом и переходим в раздел "Файлы (Файловый менеджер)".
Переходим в подраздел "Показать файлы".
Выбираем папку, в которую будем размещать PDF файл(ы) или создаем новую и нажимаем "Загрузить файл".
Не стоит размещать все файлы в одну папку по умолчанию, в какой то момент она будет содержать такое оргомное кол-во файлов, что открытие файлового менеджера будет занимать несколько минут или вообще станет невозможным. Раскладывайте файлы по разным папкам, так вам самим проще будет ориентироваться, когда все файлы отсортированы.
В открывшемся окне выбираем на компьютере один или несколько PDF файлов, которые планируете использовать.
Выбрав файлы, нажимаем "Открыть".
Загруженные файлы появляются в окне файлового менеджера.
Переходим к следующему этапу, открываем раздел "Структура сайта" (если необходимо разместить на странице, а не в публикации. Для публикаций порядок аналогичный) и выбрав страницу, на которой будем размещать PDF файл, кликаем "Редактировать" под ее названием.
На странице, в текстовом редакторе находим и нажимаем кнопку "Источник" для переключения на исходный код.
Копируем данный код (на нашем сайте на этой странице или в другом месте если вы где то сохраняли):
Возвращаемся в открытый текстовой редактор и в выбранном месте вставляем скопированный код:
Сохраните.
Далее нам нужно прописать путь до файла и настроить размеры окна. Приступим:
Чтобы получить путь до загруженного PDF файла, переключите редактор обратно на функциональный режим нажав кнопку "Источник" (если этого не произошло при сохранении страницы). Находим в функциональной версии текстового редактора значок "Ссылка" и кликаем на него.
В открывшемся окне кликаем "Выбрать на сервере".
Выбираем папку, в которой размещен нужный PDF файл.
Выбираем файл и кликаем по нему левой клавишей мыши 2 раза.
Мы видим, что нас вернуло на предыдущее окно и в поле ссылки появился путь до файла, выделяем его и копируем.
Закрываем это окно, т.к. оно нам больше не нужно. Для закрытия кликните "крестик" сверху или "Отмена" снизу окна.
Снова текстовой редактор переключаем на "источник", находим установленный нами код и в нужном месте вставляем путь к файлу.
Сохраняем.
|
Обращаем ваше внимание на то, что после установки фрейма в текстовом редакторе, он может не отображаться в функциональной версии текстового редактора, или отображаться таким образом:
Это нормально, это особенности фреймов и текстового редактора, редактор просто не может отобразить интерактивный элемент, он не предназначен для этого, в нем происходит редактирование и управление информацией на странице.
|
После того как вы все прописали и сохранили, проверьте что у вас получилось, перейдите на страницу, кликните для этого кнопку "Открыть на сайте".
Окно вывода документа можно настроить, задать его высоту и ширину. Для этого переключите текстовой редактор на "Источник" и внесите изменения в полях height и width.
heigh - это высота окна,
width - это ширина окна, если нужен фиксированный размер, введите точное значение, если вам необходимо чтобы окно растягивалось по ширине страницы, укажите 100% (например: width="100%").
Поэкспериментируйте, посмотрите на сайте как меняется окно с документом на странице сайта.
Если вы сделали все верно, у вас должно получиться примерно так:
Или так (с фиксированной шириной и небольшой высотой):
Вставить последующие документы можно ниже (или выше) аналогичным способом.
Всё просто!
Свежие публикации данной категории
21 июня 2023 Как разместить ссылку на картинку
16 декабря 2022 Как сделать таблицу по ширине экрана
15 декабря 2022 Как разместить баннер «Народный ревизорро» на сайте
10 ноября 2022 Добавить текст описания нетекстовой информации (альтернативный текст аудио файлов)
10 ноября 2022 Добавить текст описания нетекстовой информации (альтернативный текст видео файлов)
13 октября 2022 Как создать корпоративную почту (почту на домене) в Mail.ru (VK WorkSpace)
28 мая 2022 Как сделать ссылку открывающейся в новом окне
25 февраля 2022 Как подписать документ электронной подписью (ЭЦП, ЭП)
29 июля 2021 Как разместить баннер портала ГОСУСЛУГИ на сайте
6 апреля 2021 Как сделать картинку по ширине страницы
9 просмотров этой страницы