Печать HTML-отчета в альбомном формате без настроек

Быстрый ответ

Для включения печати в горизонтальной ориентации в ваших HTML-документах используйте CSS-правило @page:

@page { size: landscape; }

Это правило позволяет настроить печать документов в горизонтальном формате. Если при этом содержимое страницы не полностью умещается в область печати, корректируйте масштаб:

body { transform: scale(0.8); }

Примечание: Свойство transform предпочтительно использовать вместо zoom для обеспечения лучшей кроссбраузерности. Не забывайте проверять отображение страницы в разных браузерах.

Универсальность против индивидуальной настройки

Метод с использованием @page надёжен в современных браузерах, однако для обеспечения совместимости со старыми версиями браузеров возможно потребуется применение CSS-трансформаций для поворота содержимого.

Выравнивание: важность деталей

Поворот содержимого страницы может привести к проблемам с макетом и выравниванием элементов. Такие сложные компоненты, как таблицы или сетки, требуют тщательного тестирования. Для пользователей Internet Explorer 7, которые имеют проблемы с автоматической печатью PDF, стоит предоставить подробные инструкции.

Техники для идеальной печати в горизонтальной ориентации

Подробнее об этом расскажет наш спикер на видео

Учет особенностей браузеров

Браузеры по-разному ведут себя при печати по умолчанию. Используя @media print в сочетании с @page, можно обеспечить одинаковое качество печати в разных браузерах:

@media print {
    @page { size: landscape; }
}

Гибкость в работе с содержимым

Иногда легче повернуть отдельные части содержимого, чем изменять макет всей страницы:

@media print {
    body {
        -webkit-print-color-adjust: exact;
        transform: rotate(90deg);
    }
}

Примечание: Обратите внимание на коррекцию переполнения и положения после поворота, чтобы содержимое отображалось корректно.

Возможности JavaScript

Если средства CSS окажутся недостаточными, JavaScript может прийти на помощь. С помощью соответствующих JavaScript-библиотек или ActiveX-контролов для Internet Explorer, вы сможете программно управлять печатью в горизонтальной ориентации или создавать PDF-версии страниц.

Влияние содержимого и пользовательской среды на результат

Качество печати во многом зависит от содержимого и условий, в которых работает пользователь (устройство, настройки принтера, используемый браузер). В случае возникновения сомнений рекомендуется предложить альтернативные форматы или инструкции.

Визуализация

Установка ориентации печати напоминает поворот руля корабля:

               🔄🛳️ 
        Вертикальная    Горизонтальная
            |           |
📄 -> 🔄 -> 📄     🔄     📄

Настройка параметров печати — это навигация корабля по морю форматов:

@media print {
    @page {
        size: landscape;
        /* Поворачиваем на горизонтальную ориентацию! */
    }
}

С этих позиций вы переходите из вертикальной раскладки в просторы горизонтального формата.

Значимость дизайна при печати

Оформление страницы для печати логичнее реализовывать через специальные CSS-стили:

@media print {
    header, footer { 
        display: none; 
    }
    .content {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

Поддержка печати при помощи JavaScript

window.print() — это быстрый способ начать процесс печати с помощью JavaScript. При необходимости более глубокой настройки стоит рассмотреть создание PDF, для чего подойдут такие библиотеки, как html2canvas или jsPDF:

html2canvas(document.body).then((canvas) => {
    let pdf = new jsPDF('landscape');
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0);
    pdf.save('page.pdf'); // Экономим время разработчика👨‍💻
});

Примеры лучших практик: Google Документы

Google Документы, которые создают PDF для печати, — хорошая модель для образца, как обеспечить стабильный и надёжный вывод документов на печать.

Подробное рассмотрение: дополнительные методы и рекомендации

Вертикальные системы письма

Для языков с вертикальной письменностью важно учесть направление текста при печати в горизонтальной ориентации:

@media print {
    body {
        writing-mode: tb-rl;
    }
}

Проверка перед печатью

Возможность предварительного просмотра документа перед печатью поможет избежать ошибок в макете и сделает использование более удобным.

Особенности использования SVG

SVG отлично масштабируются, что идеально подходит для печати, однако могут создавать трудности при вставке в качестве изображений.

Подготовка к непредвиденным обстоятельствам

Предусмотрите планы реагирования на неожиданные ситуации, например, при использовании устаревших браузеров, разных операционных систем или специфических драйверов принтеров.

Полезные материалы

1. Печать – CSS: Каскадные таблицы стилей | MDN — подробное рассмотрение темы печати веб-страниц.
2. CSS Paged Media Module Level 3 — спецификация W3C, посвящённая форматированию страниц.
3. html2canvas — инструмент для конвертации HTML в канвас, полезный для создания предпросмотра перед печатью.
4. Метод JavaScript Window.print() – GeeksforGeeks — обзор метода window.print() для печати веб-страниц.
5. Создание печатных страниц с CSS — SitePoint — как управлять печатным макетом страниц с помощью CSS.
6. Дизайн для печати CSS — Smashing Magazine — руководство по созданию документов для печати через CSS и JavaScript.
7. "@page" | Can I use... — информация о поддержке CSS-правила @page в различных браузерах.