Ландшафтная печать из HTML
У меня есть отчет HTML, который должен быть напечатан пейзаж из-за многих столбцов. Это есть способ сделать это без необходимости изменять параметры документа?
и каковы варианты среди браузеров.
13 ответов
в вашем CSS вы можете установить свойство @page, как показано ниже.
@media print{@page {size: landscape}}
страница @является частью в CSS 2.1 спецификации этой size не так выделено ответом на вопрос является ли @Page { size:landscape} устаревшим?:
CSS 2.1 больше не указывает атрибут size. Текущая работа черновик для модуля 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. Вы можете указать на so, когда пользователь выбирает печать, он печатает 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-обсудить Wiki
правило @page было сокращено в рамки с поддержкой CSS2 в CSS2.1. Полнота Сообщается, что правило CSS2 @page реализованы только в опере (и buggily даже тогда.) Мое собственное тестирование показывает, что IE и Firefox не поддерживают @page at все. По словам ныне устаревшего CSS2 spec раздел 13.2.2 это возможно переопределить пользователя установка ориентации и (для пример) принудительная печать в ландшафте но соответствующее свойство" size " имеет был сброшен с CSS2.1, последовательный с тем, что нет текущего браузера поддерживать ее. Он был восстановлен в модуль подкачки CSS3, но Примечание что это только рабочий проект (как в июле 2009 года).
вывод: забудьте о @page на данный момент. Если вы чувствуйте, что ваш документ должен быть напечатан в альбомной ориентации спросите себя: если вы можете вместо этого сделать свой дизайн более текучий. Если ты действительно не можешь ... (возможно поскольку документ содержит таблицы данных со многими столбцами, для пример), вам нужно будет посоветовать пользователь для установки ориентации Пейзаж и, возможно, наметить, как делайте это в самых распространенных браузерах. Из конечно, некоторые браузеры имеют печать особенность пригонк-к-ширины (сжимать-к-пригонки) (например, Opera, Firefox, IE7), но это нецелесообразно полагаться на пользователей, имеющих это средство или его переключение на.
вы могли бы использовать CSS 2 @page rule что позволяет установить ' size ' свойство ландшафта.
вы также можете использовать нестандартный атрибут css IE-only написание-режим
div.page {
writing-mode: tb-rl;
}
на 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.
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
не работает в Firefox 16.0.2, но он работает в Chrome
недостаточно просто повернуть содержимое страницы. Вот правильный CSS, который работает в большинстве браузеров (Chrome, Firefox, IE9+).
первый набор тела margin до 0, потому что в противном случае поля страницы будут больше, чем те, которые вы установили в диалоговом окне печати. Также установить background цвет для визуализации страниц.
body {
margin: 0;
background: #CCCCCC;
}
margin, border и background требуются для визуализации страниц.
padding должно быть установлено значение требуемого поля печати. В печати диалог вы должны установить те же поля (10mm в этом примере).
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 мм на двух страницах. Вторая страница будет пустой. Более безопасно использовать 276mm.
нам не нужны 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). Но для современных браузеров это не требуется.
Я пытался решить эту проблему, но все мои исследования привели меня к элементы управления ActiveX и плагинов. Нет никакого трюка, что браузеры (3 лет назад в любом случае) разрешили изменять любые настройки печати (количество копий, размер бумаги).
Я приложил все усилия, чтобы предупредить пользователя, что им нужно выбрать "пейзаж", когда появится диалоговое окно печати браузеров. Я также создал страницу "предварительный просмотр", которая работала намного лучше, чем IE6! Наше приложение имело очень широкие таблицы данных в некоторых отчетах, и предварительный просмотр печати дал понять пользователям, когда таблица будет разливаться с правого края бумаги (так как IE6 не мог справиться с печатью на 2 листах).
и да, люди все еще используют IE6 даже сейчас.
Я создал пустой документ 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.
<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 В конце.
эта таблица будет печатать только в альбомной, а все остальные страницы будут печатать только в портретном режиме. Но проблема в том, что если размер таблицы больше ширины страницы, мы можем потерять некоторые строки, а иногда и заголовки. Быть осторожным.
хорошо день.
спасибо, Нэвин Mettapally.