Примеры печатного каталога на HTML и CSS

Здесь собраны минимальные примеры реализации печатного каталога для статьи. Они показывают, как сверстать страницу формата A4, оформить данные в HTML-таблице и сохранить результат в PDF из браузера.

В примерах используются:

• HTML — задаёт структуру страницы и таблицы с данными об оборудовании.
• CSS — оформляет текст, таблицу, цвета, поля страницы и правила печати.
• Локальные шрифты — в расширенном примере Calibri загружается из папки fonts, поэтому внешний вид текста не зависит от установленных в системе шрифтов.
• SVG — схема подключения подключена отдельным векторным файлом; она сохраняет чёткость при увеличении и печати.

Примеры

• simple/ — одна HTML-страница со встроенными стилями. Подходит, чтобы посмотреть базовую структуру и быстро заменить пример таблицы своими данными.
• extended/ — страница с отдельным файлом стилей, заголовком, таблицей и схемой подключения. Здесь также показано подключение локальных шрифтов и SVG.

Как использовать

1. Выберите simple или extended и откройте соответствующий index.html в браузере.
2. Замените заголовки и текст на свои. Данные таблицы редактируйте в строках <tbody>: для новой позиции скопируйте блок <tr>...</tr> и поменяйте значения ячеек.
3. В расширенном примере оформление меняется в extended/styles.css. Основные цвета заданы переменными в начале файла. Чтобы заменить схему, сохраните новый SVG в extended/img/ и укажите его имя в src у изображения в index.html.
4. Убедитесь, что содержимое помещается на страницу A4: при добавлении строк схема или нижние элементы могут выйти за доступную область.
5. В браузере откройте печать (Ctrl+P) и выберите сохранение в PDF. Укажите A4 и масштаб 100%, включите фоновую графику и отключите браузерные колонтитулы, если они включены.

Примеры предназначены для изучения и адаптации. Они показывают основу одностраничного макета; автоматическая разбивка большого каталога на страницы здесь не настраивается.