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

Question

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

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

Answer 1

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

Answer 2

Мое решение:

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

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

Answer 3

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

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

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

Answer 4

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

@page {
  size: landscape;
}

Answer 5

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

Answer 6

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

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

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

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

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

Answer 7

Недостаточно просто вращать содержимое страницы. Вот правильный 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 x 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). Но для достаточно современных браузеров это не требуется.

Answer 8

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

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

Answer 9

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

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

Answer 10

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