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

Question

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

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

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

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

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

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

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

Answer 1

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

Для документов, которые представляют собой просто несколько интервалов или div-блоков inline-block по порядку, достаточно, чтобы div был установлен точно на выбранную вами ширину (1100 пикселей), и убедитесь, что этот 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 */
  }
}

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

Answer 2

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

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

Стандарт W3 CSS3, установленный для размеров страниц, прекрасно работает с опцией "Сохранить как 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.

Answer 3

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

@page {
    size: A4 landscape;
}

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

Answer 4

Ваши медиа-запросы по правилам структурированы неправильно. пытаться:

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

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

Answer 5

Если вы хотите распечатать в формате pdf, вы можете просто использовать https://make.cm , так как они могут справиться с нагрузкой на сервер и устранить сложность правильного рендеринга материала. Я использовал его для проекта, и это было намного проще, чем иметь дело с хромированной печатью в системе PDF.