Ландшафтная печать из HTML

Question

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

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

Answer 1

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

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

@page является частью CSS 2.1 specification однако это size не как подчеркивается в ответе на вопрос Is @Page { size:landscape} obsolete?:

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

Как указано, опция размера исходит от CSS 3 Draft Specification. Теоретически он может быть установлен как на размер страницы, так и на ориентацию, хотя в моем примере размер опущен.

Поддержка очень смешана с bug report begin filed in firefox, большинство браузеров ее не поддерживают.

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

У This article есть предложения по использованию 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 однако во многих браузерах нет верного пути, и это будет зависеть от вашего содержания и окружающей среды. Возможно, поэтому Google Documents создает PDF-файл при печати, а затем позволяет пользователю открывать и печатать его.

Answer 2

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

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

Answer 3

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

Answer 4

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

@page { 
    size: landscape; 
} 

Answer 5

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

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

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

Answer 6

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

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

Удачного дня.

Thank you, Naveen Mettapally.

Answer 7

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

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

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

Answer 8

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

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

Answer 9

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

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

Answer 10

Мое решение:

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

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

Answer 11

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

Свойство 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 documentation.

Answer 13

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

Я использую 276mm вместо 277mm, потому что разные браузеры масштаба страниц немного по-другому. Поэтому некоторые из них будут печатать 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 мм!

Также, если у вас есть смесь портретов и страниц lanscape, IE уменьшит масштаб страниц.Мы исправим его, установив -ms-zoom на 1.665. Если вы установите его на 1.6666 или что-то вроде этого, иногда можно обрезать правую границу содержимого страницы.

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