Масштабировать HTML, чтобы соответствовать одной странице при печати - PullRequest
Новая
       11

Масштабировать HTML, чтобы соответствовать одной странице при печати

0 голосов
/ 27 мая 2018

У меня есть веб-страница с диаграммой, размер которой должен быть фиксирован до 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 Explorer11, кажется, может автоматически масштабировать страницу в диалоговом окне печати.Я не знаю, почему 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.

1 Ответ

0 голосов
/ 28 мая 2018

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

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

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

...