У меня есть веб-страница с диаграммой, размер которой должен быть установлен на width:1660px;height:480px; с помощью CSS. Страница (можно ли ссылаться на нее?) Правильно отображается в браузере, но при печати в Google Chrome (я еще не тестировал другие браузеры) она слишком велика по горизонтали, чтобы поместиться на одной странице. Как мне масштабировать HTML, чтобы он уместился на одной печатной странице?

Вот как может выглядеть результат (Firefox 60):

enter image description here

Я пробовал возиться с такими медиа-запросами:

@media print
{
    @page
    {
        size: 297mm 210mm; /* landscape */
        /* you can also specify margins here: */
        margin: 250mm;
        margin-right: 450mm; /* for compatibility with both A4 and Letter */
    }
}

Но я не заметил никакого эффекта в предварительном просмотре печати.

[редактировать]

Internet Explorer 11, похоже, может автоматически масштабировать страницу в диалоговом окне печати. Я не знаю, почему Google Chrome тоже не может этого сделать.

[редактировать]

Я тоже пробовал трансформировать страницу. Однако напечатанный результат сильно отличается в Chrome и IE11.

@media print
{
    html
    {
        transform: scale(0.5);transform-origin: 0 0;
    }
}

Затем я попытался увеличить страницу. Это сработало очень хорошо, но я не знаю, влияет ли это только на Chrome или также влияет на IE и Firefox.

@media print
{
    html
    {
        zoom: 50%;
    }
}

В любом случае у пользователя нет возможности отключить эффект при использовании CSS, если вы также не создадите новые элементы управления JavaScript.

12
posfan12 27 Май 2018 в 09:38

1 ответ

Лучший ответ

К сожалению, это очень распространенная проблема . По моему опыту, нет надежного способа управления макетом печати в браузерах, кроме создания PDF-файла. Доступен ряд пакетов «HTML в PDF», но хотя они, как правило, работают, у них есть похожие варианты в зависимости от браузера, в котором они запущены. Существует ряд проблем с оборудованием (например, размер экрана), настройки браузера (присущие различия между браузерами плюс локально установленный размер шрифта по умолчанию и другие параметры конфигурации) и пользовательские настройки (например, масштабирование страницы), которые в основном делают это, IMHO, практически невозможным, кроме как путем создания документа на стороне сервера.

Я уверен, что это не то, что вы хотите услышать, но единственное надежное решение, позволяющее убедиться, что пользователь может распечатать веб-страницу так, как вы (разработчик) хотите, чтобы она печаталась, - это сгенерировать полный PDF-файл на сервере . Это можно сделать с помощью ряда различных пакетов в зависимости от исходного языка (PHP, Python и т. Д.). Это определенно больше работы для разработчика, но вы можете контролировать размер изображения, размер текста, шрифт и т. Д. - все вещи, которыми вы должны управлять с помощью CSS, и знать, что страница будет печататься должным образом. Вместо кнопки печати на вашей странице, запускающей функцию печати браузера, попросите его загрузить файл страницы с сервера, отформатированный и готовый к печати. Вы можете настроить таргетинг на букву (США) или A4 (в большинстве других мест в мире), и эти два размера достаточно близки, чтобы большинство людей могли адаптировать их в Adobe Reader или другом программном обеспечении, чтобы оно соответствовало без потери данных или наличия слишком большого количества пустого пространства.

Если ваш документ действительно «всего лишь одно изображение», это еще проще. Создайте изображение на стороне сервера и вставьте его в загружаемый одностраничный PDF-файл. Если вы не можете легко создать изображение на стороне сервера, вы можете использовать такую ​​службу, как URLBOX (которую я использую как платный подписчик, но у меня нет другого подключения к нему), чтобы сгенерировать изображения и загрузить их на свой сервер для встраивания в PDF-файлы.

8
manassehkatz-Moving 2 Codidact 28 Май 2018 в 02:23