У меня есть HTML-отчет, который нужно печатать из-за большого количества столбцов. Это способ сделать это, без необходимости изменять настройки документа?
А каковы варианты среди браузеров.
Ландшафтная печать из HTML
Ответ 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 при выборе печати, а затем позволяет пользователю открывать и распечатывать его.
Ответ 2
Мое решение:
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
Это работает в IE, Firefox и Chrome
Ответ 3
Цитата из CSS-Обсуждение Wiki
Правило @page было сокращено в от CSS2 до CSS2.1. Полный Сообщается, что правило CSS2 @page реализовано только в Opera (и багги даже тогда). Мое собственное тестирование показывает, что IE и Firefox не поддерживают @page в все. В соответствии с ныне устаревшим Раздел спецификации CSS2 13.2.2. возможно переопределить установки ориентации и (для пример) принудительная печать в ландшафте но соответствующее свойство "размера" имеет был исключен из CSS2.1, последовательный с тем, что никакой текущий браузер поддерживает его. Он был восстановлен в модуль CSS3 Paged Media, но обратите внимание что это только рабочий проект (как в июле 2009 года).
Заключение: забудьте о @page для настоящего. если ты убедитесь, что ваш документ нужно распечатать в ландшафтной ориентации, спросите себя если вы можете вместо этого сделать свой дизайн больше жидкости. Если вы действительно не можете (возможно, потому, что документ содержит таблицы данных со многими столбцами, для пример), вам необходимо будет пользователя, чтобы установить ориентацию Пейзаж и, возможно, сделайте это в большинстве распространенных браузеров. из Конечно, у некоторых браузеров есть печать возможность установки в ширину (с усаживанием) (например, Opera, Firefox, IE7), но это нецелесообразно полагаться на пользователей, имеющих этот объект или его включение на.
Ответ 4
Попробуйте добавить этот CSS:
@page {
size: landscape;
}
Ответ 5
Недостаточно просто вращать содержимое страницы. Вот правильный CSS, который работает в большинстве браузеров (Chrome, Firefox, IE9+).
Сначала установите body 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>
Ответ 6
Возможно, вы сможете использовать правило CSS 2 @page, которое позволяет вам установить "размер" для ландшафта.
Ответ 7
Свойство 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 документацию.
Ответ 8
Вы также можете использовать нестандартный атрибут css только для IE режим записи
div.page {
writing-mode: tb-rl;
}
Ответ 9
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
не работает в Firefox 16.0.2, но работает в Chrome
Ответ 10
Я попытался решить эту проблему один раз, но все мои исследования привели меня к элементам управления ActiveX/плагинам. Существует не трюк, что браузеры (3 года назад в любом случае) разрешили изменять любые параметры печати (количество копий, размер бумаги).
Я приложил все усилия, чтобы предупредить пользователя, что им нужно выбрать "пейзаж", когда появится диалоговое окно печати браузеров. Я также создал страницу "Предварительный просмотр", которая работала намного лучше, чем IE6! Наше приложение имело очень широкие таблицы данных в некоторых отчетах, и предварительный просмотр печати дал понять пользователям, когда таблица выльется с правого края бумаги (поскольку IE6 не смог справиться с печатью на 2 листах).
И да, люди все еще используют IE6 даже сейчас.
Ответ 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 в конце.
Эта таблица будет печататься только в альбомной ориентации, а все остальные страницы будут печататься только в портретном режиме. Но проблема в том, что размер таблицы больше ширины страницы, тогда мы можем потерять некоторые из строк, а иногда и заголовки. Будьте осторожны.
Хорошего дня.
Спасибо, Навей Меттапалли.
Ответ 12
Я создал пустой документ MS Document с настройкой Landscape, а затем открыл его в блокноте. Скопировано и вставлено следующее на мою страницу 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.
Ответ 13
Это также помогло мне:
@media print and (orientation:landscape) { … }