Альбомная печать из HTML

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

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

Возможно, вы сможете использовать CSS 2 правило @page, который позволяет вам установить 'размер' свойство для ландшафта.

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

@page {
  size: landscape;
}

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

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

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

CSS 2.1 no longer specifies the size attribute. The current working draft for CSS3 Paged Media module does specify it (but this is not standard or accepted).

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

Однажды я попытался решить эту проблему, но все мои исследования привели меня к элементам управления / плагинам 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 в конце.

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

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

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

Цитируется из CSS-обсуждение вики

The @page rule has been cut down in scope from CSS2 to CSS2.1. The full CSS2 @page rule was reportedly implemented only in Opera (and buggily even then). My own testing shows that IE and Firefox don't support @page at all. According to the now-obsolescent CSS2 spec section 13.2.2 it is possible to override the user's setting of orientation and (for example) force printing in Landscape but the relevant "size" property has been dropped from CSS2.1, consistent with the fact that no current browser supports it. It has been reinstated in the CSS3 Paged Media module but note that this is only a Working Draft (as at July 2009).

Conclusion: forget about @page for the present. If you feel your document needs to be printed in Landscape orientation, ask yourself if you can instead make your design more fluid. If you really can't (perhaps because the document contains data tables with many columns, for example), you will need to advise the user to set the orientation to Landscape and perhaps outline how to do it in the most common browsers. Of course, some browsers have a print fit-to-width (shrink-to-fit) feature (e.g. Opera, Firefox, IE7) but it's inadvisable to rely on users having this facility or having it switched on.

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

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

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

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

Мое решение:

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

Это работает в IE, Firefox и 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.

Как уже упоминалось, свойство 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, который работает в большинстве браузеров (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>

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

@page {
    size: auto
}

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

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>

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

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