Пейзажная печать из HTML


244

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

И какие варианты среди браузеров.

Ответы:


379

В вашем CSS вы можете установить свойство @page, как показано ниже.

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

@Page является частью спецификации CSS 2.1, однако это sizeне так, как подчеркнуто в ответе на вопрос : устарела ли @Page {size: landscape}? :

CSS 2.1 больше не определяет атрибут размера. Текущий рабочий проект для модуля CSS3 Paged Media действительно указывает его (но это не является стандартным или принятым).

Как указано, опция размера берется из черновой спецификации CSS 3 . Теоретически это может быть как размер страницы, так и ориентация, хотя в моем примере размер опущен.

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

Может показаться, что он работает в IE7, но это потому, что IE7 запомнит последний выбор пользователем ландшафта или портрета в предварительном просмотре (только перезапущен только браузер).

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

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

<style type="text/css" media="print">
    .page
    {
     -webkit-transform: rotate(-90deg); 
     -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
</style>

Последняя найденная альтернатива - создать альбомную версию в формате PDF. Вы можете указать на это, когда пользователь выбирает печать, он печатает PDF. Однако я не мог получить это для автоматической печати работы в IE7.

<link media="print" rel="Alternate" href="print.pdf">

В заключение, в некоторых браузерах можно легко использовать относительность, используя параметр @page size, однако во многих браузерах нет верного пути, и это будет зависеть от вашего контента и среды. Возможно, поэтому Google Documents создает PDF при выборе печати, а затем позволяет пользователю открывать и распечатывать его.


28
странно, что он говорит, что «размер» может быть пейзажным, когда это на самом деле «ориентация».
Магнус Смит

1
@page sizeКажется, не работает на всех современных браузерах, только Firefox. Chrome и Opera оба игнорируют это, насколько я видел.
Джастин808

2
size: landscapeНЕ является частью CSS2.1, хотя @pageправила таковы. Это, однако, часть CSS3. Для подтверждения попробуйте использовать W3C CSS Validator и введите @page {size: landscape}и сравните результаты с «
Профилем

1
Когда у вас есть div, который занимает 100 ширину или высоту страницы, вращение не заставляет div занимать пространство страницы портрета, а поворачивает пейзаж. Таким образом, некоторые части div затем исчезают со страницы.
Оливер

6
@AbeerSul - Честно говоря, о CSS, то , что делает работу в IE;)
Tony

27

Мое решение:

<style type="text/css" media="print">
    @page { 
        size: landscape;
    }
    body { 
        writing-mode: tb-rl;
    }
</style>

Это работает в IE, FirefoxиChrome


1
Что если бы я хотел, чтобы определенный classdiv был в ландшафте, а не на всей странице?
SearchForKnowledge

2
@SearchForKnowledge - это было бы преобразованием css3: rotate (90deg).
ToolmakerSteve

Не понял, что я делаю не так, но это ломает всю страницу в chrome. Это строка, которую я скопировал из кода @media print {@page {size: Portrait;} body {режим письма: tb-rl;}}
X-HuMan

Для меня добавление только этой @page {size: landscape; } работает.
Кумар М,

1
В 2018 году все еще прекрасно работает со стандартными компонентами WebBrowers. Спасибо.
Кен Беков

14

Недостаточно просто вращать содержимое страницы. Вот правильный CSS, который работает в большинстве браузеров (Chrome, Firefox, IE9 +).

Сначала установите тело marginв 0, потому что в противном случае поля страницы будут больше, чем те, которые вы установили в диалоговом окне печати. Также установите backgroundцвет для визуализации страниц.

body {
  margin: 0;
  background: #CCCCCC;
}

margin, borderиbackground необходимы для визуализации страниц.

paddingдолжен быть установлен на требуемое поле печати. В диалоговом окне печати вы должны установить те же поля (в этом примере 10 мм).

div.portrait, div.landscape {
  margin: 10px auto;
  padding: 10mm;
  border: solid 1px black;
  overflow: hidden;
  page-break-after: always;
  background: white;
}

Размер страницы А4 составляет 210 х 297 мм. Вам нужно вычесть поля печати из размера. И установите размер содержимого страницы:

div.portrait {
  width: 190mm;
  height: 276mm;
}
div.landscape {
  width: 276mm;
  height: 190mm;
}

Я использую 276 мм вместо 277 мм, потому что разные браузеры немного по-разному масштабируют страницы. Поэтому некоторые из них будут печатать содержимое высотой 277 мм на двух страницах. Вторая страница будет пустой. Более безопасно использовать 276 мм.

Нам не нужно margin, border, padding, backgroundна печатной странице, так что удалить их:

@media print {
  body {
    background: none;
    -ms-zoom: 1.665;
  }
  div.portrait, div.landscape {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
  div.landscape {
    transform: rotate(270deg) translate(-276mm, 0);
    transform-origin: 0 0;
  }
}

Обратите внимание, что источником трансформации является 0 0 ! Также содержимое альбомных страниц должно быть перемещено на 276 мм вниз!

Кроме того, если у вас есть смесь страниц портрета и пейзажа, IE будет уменьшать страницы. Мы исправим это, установив-ms-zoom 1.665. Если вы установите значение 1,6666 или что-то в этом роде, то правая граница содержимого страницы может иногда обрезаться.

Если вам нужна поддержка IE8 или других старых браузеров, которую вы можете использовать -webkit-transform,-moz-transform ,filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3) . Но для достаточно современных браузеров это не требуется.

Вот тестовая страница:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      ...Copy all styles here...
    </style>
  </head>
  <body>
    <div class="portrait">A portrait page</div>
    <div class="landscape">A landscape page</div>
  </body>
</html>

Большое спасибо, работает как брелок (используется chrome) с веб-страницами, которые состоят из смеси как альбомного, так и портретного режимов.
zcahfg2

Откуда div.portrait, div.landscape?
zcahfg2

Работало ли это в IE 11 для кого-либо? Кажется, все элементы отключены.
mzonerz

1
@mzonerz Я только что протестировал в IE 11, он работает нормально. Я добавил тестовый HTML в конце ответа. Обратите внимание, что в настройках печати вы должны установить поля страниц на 10 мм. Если вам нужны другие поля страницы, вам необходимо обновить следующие значения: padding: 10mm; ширина: 190 мм; высота: 190 мм;
Денис

@Denis Спасибо за ваши усилия. На самом деле это единственное решение, которое до сих пор работало для меня. Замечательно! Людям, которые интегрируют это решение в сайты Intranet Sharepoint, может потребоваться отключить параметры просмотра в режиме совместимости.
mzonerz

13

Цитируется из CSS-Discuss Wiki

Правило @page было сокращено с CSS2 до CSS2.1. Полное правило CSS2 @page, как сообщается, было реализовано только в Opera (и даже тогда довольно плохо). Мои собственные тесты показывают, что IE и Firefox вообще не поддерживают @page. В соответствии с уже устаревшим разделом 13.2.2 спецификации CSS2 можно переопределить пользовательские настройки ориентации и (например) принудительную печать в альбомной ориентации, но соответствующее свойство «size» было удалено из CSS2.1, что соответствует факту что ни один текущий браузер не поддерживает его. Он был восстановлен в модуле CSS3 Paged Media, но обратите внимание, что это только рабочий проект (по состоянию на июль 2009 года).

Вывод: забудьте про @page на данный момент. Если вы чувствуете, что ваш документ должен быть напечатан в альбомной ориентации, спросите себя, можете ли вы сделать свой дизайн более плавным. Если вы действительно не можете (например, потому что документ содержит таблицы данных со многими столбцами), вам нужно будет посоветовать пользователю установить ориентацию на альбомную и, возможно, наметить, как это сделать в наиболее распространенных браузерах. Конечно, некоторые браузеры имеют функцию печати по ширине (например, Opera, Firefox, IE7), но нежелательно полагаться на пользователей, имеющих эту функцию или включив ее.


4
Это «CSS-Discuss Wiki», а не «Wikipedia».
Jball

12

Попробуйте добавить это ваш CSS:

@page {
  size: landscape;
}

2
Работало ли это у вас с любым из браузеров? В IE8 и Firefox3.5 это не имело никакого значения для предварительного просмотра.
Даниэль Баллинджер

К сожалению, предварительный просмотр не соответствует всем свойствам CSS. Но это должно работать во всех текущих браузерах.
штуковина

Спасибо за продолжение этого. Кажется, это не работает для меня с реальной печатью. Я что-то пропустил? Мой тестовый файл выглядит следующим образом: (Мне пришлось обрезать содержимое абзаца, чтобы оно поместилось в поле для комментариев) <html> <head> <title> Страница тестирования ландшафта </ title> <style> @Page {size: landscape; } </ style> </ head> <body> <p> Lorem ipsum dolor sit amet, ... </ p> </ body> </ html>
Даниэль Баллинджер,

Я попробовал каждую комбинацию правила @Page, показанного на этой странице и некоторых других сайтах, а также пример в HTML / XHTML О'Рейли: Полное руководство, пятое издание. Я не смог заставить это работать в IE8, Firefox 3.6 или Chrome 7.0.
Пол Кейстер

Я знаю его 2012 ... но этот ответ помог мне ... поддержать опцию альбомной ориентации для IE8 ... спасибо
Викрам

11

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

/* ISO Paper Size */
@page {
  size: A4 landscape;
}

/* Size in mm */    
@page {
  size: 100mm 200mm landscape;
}

/* Size in inches */    
@page {
  size: 4in 6in landscape;
}

Вот ссылка на документацию @page .


При использовании с начальной загрузкой это объявление должно храниться в отдельном .cssфайле, иначе, если оно встроенное, объявление boostrap по умолчанию size: a3будет иметь приоритет.
Карам


5

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

div.page    { 
   writing-mode: tb-rl;
}

1
Это переориентирует содержимое страницы, но на самом деле не меняет макет страницы на альбомную. Т.е. верхние и нижние колонтитулы все равно будут добавлены, как если бы страница была портретной.
Даниэль Баллинджер

2
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

не работает в Firefox 16.0.2, но работает в Chrome


2

Я создал пустой документ MS с альбомной настройкой, а затем открыл его в блокноте. Скопировал и вставил следующее на мою HTML-страницу

<style type="text/css" media="print">
   @page Section1
    {size:11 8.5in;
    margin:.5in 13.6pt 0in 13.6pt;
    mso-header-margin:.5in;
    mso-footer-margin:.5in;
    mso-paper-source:4;}
div.Section1
    {page:Section1;}
</style>



<div class="Section1"> put  text / images / other stuff  </div>

Предварительный просмотр печати показывает страницы в альбомном размере. Похоже, что это нормально работает на IE и Chrome, а не на FF.


1

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

Я приложил все усилия, чтобы предупредить пользователей о необходимости выбора «ландшафта» при появлении диалогового окна печати браузера. Я также создал страницу «предварительного просмотра», которая работала намного лучше, чем IE6! Наше приложение имело очень широкие таблицы данных в некоторых отчетах, и предварительный просмотр печати давал понять пользователям, когда таблица выплеснется с правого края листа (поскольку IE6 также не справлялся с печатью на 2 листах).

И да, люди все еще используют IE6 даже сейчас.


1
<style type="text/css" media="print">
.landscape { 
    width: 100%; 
    height: 100%; 
    margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1); 
} 
</style>

Если вы хотите, чтобы этот стиль применялся к таблице, создайте один тег div с этим классом стиля, добавьте тег таблицы в этот тег div и закройте тег div в конце.

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

Хорошего дня.

Спасибо, Навин Меттапалли.


1
Это поворачивает содержимое экрана на 90 градусов, но распечатка все равно выходит в формате protrait. На самом деле худшее из обоих миров, по крайней мере, в ie8.
arame3333

1

Я попробовал ответ Дениса и столкнулся с некоторыми проблемами (портретные страницы не печатались должным образом после перехода к альбомным страницам), поэтому вот мое решение:

body {
  margin: 0;
  background: #CCCCCC;
}

div.page {
  margin: 10px auto;
  border: solid 1px black;
  display: block;
  page-break-after: always;
  width: 209mm;
  height: 296mm;
  overflow: hidden;
  background: white;
}

div.landscape-parent {
  width: 296mm;
  height: 209mm;
}

div.landscape {
  width: 296mm;
  height: 209mm;
}

div.content {
  padding: 10mm;
}

body,
div,
td {
  font-size: 13px;
  font-family: Verdana;
}

@media print {
  body {
    background: none;
  }
  div.page {
    width: 209mm;
    height: 296mm;
  }
  div.landscape {
    transform: rotate(270deg) translate(-296mm, 0);
    transform-origin: 0 0;
  }
  div.portrait,
  div.landscape,
  div.page {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
}
<div class="page">
  <div class="content">
    First page in Portrait mode
  </div>
</div>
<div class="page landscape-parent">
  <div class="landscape">
    <div class="content">
      Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
    </div>
  </div>
</div>
<div class="page">
  <div class="content">
    Third page in Portrait mode
  </div>
</div>



0

Если вы хотите видеть пейзаж на экране перед печатью, а также печать, то в вашем CSS вы можете установить ширину 900px и высоту 612px.

ОП не упомянул размер А4. Я предполагаю, что это размер письма в моих числах выше.


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.