Как заставить HTML-страницы печатать с постоянным размером от Chrome?

Я разрабатываю набор HTML-страниц для печати, и я хочу, чтобы элементы страниц заканчивались в том же масштабе, что и друг для друга. Например, на каждой из нескольких страниц появляется класс div, ширина которого определяется как 200px wide. Я хочу, чтобы он отображался точно такого же размера, когда печатается каждая страница (подходит, например, для вырезания и наложения).

Я использую несколько вещей, которые лучше всего работают в Chrome (главным образом правило масштабирования CSS, чтобы иметь меньшие копии элементов в другом месте), поэтому в идеале я бы хотел использовать Chrome. (Это было бы проще в Firefox, потому что в диалоговом окне печати он имеет явное отношение шкалы.) Но, похоже, что в Chrome сохранение того же элемента согласованного размера при печати с разных страниц далека от легко.

Генерация HTML в формате HTML (как это делает печать из Chrome под капотом), похоже, отображает какой-то раздел для определения ширины страницы и масштабирует остальную часть страницы на основе этого. Или, возможно, он пытается установить размер страницы для "оптимального" количества элементов на одной странице. Если внешние элементы кадрирования каждой страницы не имеют одинакового размера во всех случаях, то кажется, что элементы с размером экрана 200px могут выходить за пределы от 3-4 см до 1,5-2 см или, возможно, меньше.

Просто использование @page size не помогает: у меня есть этот CSS, и это не имеет никакого значения:

@media print {
  @ page size: 297mm 210mm 
}

Есть ли у кого-нибудь мысли о том, как заставить вещи печатать с одинаковыми размерами?

Один крайний обходной путь, который я мог бы применить, состоит в том, чтобы сделать все части одной большой HTML-страницы и использовать Javascript для обозначения определенных частей как единственных частей для печати... Я даже не уверен, что это сработает, и на нескольких разных страницах было бы более чистым. Итак, есть ли другие идеи?

Ответ 1

Я нашел решение. Ключ должен гарантировать, что в каждом документе "логическая страница", которую Chrome разбивает на элементы, имеет одинаковый размер. Например. если один документ имеет много квадратов размером 200x200 пикселей, и Chrome решает сгруппировать их в прямоугольник 5x4 для печати ландшафта, то вам нужно убедиться, что Chrome будет печатать каждый другой согласованный документ, разделенный на элементы размером 1000x800 пикселей.

Для документов, которые являются просто числом интервалов или встроенных блоков divs в последовательности, достаточно иметь набор div точно выбранной вами ширины (1100px) и убедиться, что этот div занимает полную ширину страницы при предварительном просмотре печати. Затем просто убедитесь, что ваш CSS содержит что-то вроде:

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

Если этого недостаточно, то размещение всего внутри одного или нескольких div с фиксированным размером (width: 1100px; height: 800px; overflow: hidden;) выполняет задание, как способ заставить Chrome разделить на нужные вам страницы (и, следовательно, сохранить элементы одинаково размер при печати).

Ответ 2

Разрешить разные размеры, но контролировать размер и дизайн каждого размера!

При первом ответе я использовал Chrome 32.0.1700.107 м

стандарт W3 CSS3, установленный для размеров страниц отлично работает с опцией "SAVE AS PDF" прямо из плагина Chrome на интерфейсе печати.

У меня были проблемы с разными интерфейсами и решениями для разных разработчиков (например, создание PDF непосредственно с сервера, который был слишком тяжел в обработке и беспорядочен в коде, или предлагая пользователям использовать интерфейс печати Windows и т.д.). Это отличное решение для меня и, по-видимому, является окончательным!

Здесь отличный пример одной и той же страницы с опциями для полей формата A4 и Letter:

/* style sheet for "A4" printing */
 @media print and (width: 21cm) and (height: 29.7cm) {
    @page {
       margin: 3cm;
    }
 }
 /* style sheet for "letter" printing */
 @media print and (width: 8.5in) and (height: 11in) {
    @page {
        margin: 1in;
    }
 }

Вы можете копировать столько раз, сколько хотите, используя разные размеры бумаги. Дополнительные значения (цвета, скрытые элементы и т.д.) Будут выходить за пределы @page.

Ответ 3

Кроме того, если размер бумаги составляет A4 и protrait, вы также можете использовать этот

@page {
    size: A4 landscape;
}

Это работает в Chrome

Ответ 4

ваши медиа-запросы at-rules структурированы неправильно. попробуйте:

@media print {  
    @page {  
      size:297mm 210mm;  
    }  
}

который по крайней мере обеспечивает правильный синтаксис. как и для свойства size, он был удален из css2.1, а поддержка браузера варьируется. вы всегда можете установить width, margin и/или padding