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

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

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

В вашем 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 при выборе печати, а затем позволяет пользователю открывать и распечатывать его.

Мое решение:

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

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

Недостаточно просто вращать содержимое страницы. Вот правильный 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>

Цитируется из 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), но нежелательно полагаться на пользователей, имеющих эту функцию или включив ее.

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

@page {
  size: landscape;
}

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 2 @page, которое позволяет вам установить свойство size в альбомную ориентацию .

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

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

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

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

Я создал пустой документ 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.

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

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

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

<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 в конце.

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

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

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

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

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>

Это также сработало для меня:

@media print and (orientation:landscape) { … }

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

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

Вы можете попробовать следующее:

@page {
    size: auto
}