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

Question

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

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

Answer 1

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

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

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

CSS 2.1 больше не определяет атрибут размера.Текущий рабочий черновик для модуля CSS3 Pagege 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-Обсудить Wiki

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

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

Answer 4

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

@page {
  size: landscape;
}

Answer 5

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

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х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

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

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

И да, люди до сих пор используют IE6.

Answer 11

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

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

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

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

Answer 12

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

Answer 13

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

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