Пейзажная печать из HTML
У меня есть отчет в формате HTML, который должен быть напечатан в альбомной форме из-за большого количества столбцов. Есть ли способ сделать это, без необходимости изменять настройки документа?
И какие варианты среди браузеров.
В вашем CSS вы можете установить свойство @page, как показано ниже.
@media print@page size: landscape>>@Page является частью спецификации CSS 2.1, однако это size не так, как подчеркнуто в ответе на вопрос : устарела ли @Page ? :
CSS 2.1 больше не определяет атрибут размера. Текущий рабочий проект для модуля CSS3 Paged Media действительно указывает его (но это не является стандартным или принятым).
Как указано, опция размера берется из черновой спецификации CSS 3 . Теоретически это может быть как размер страницы, так и ориентация, хотя в моем примере размер опущен.
Поддержка очень смешана с началом сообщения об ошибке, поданным в Firefox , большинство браузеров не поддерживают его.
Может показаться, что он работает в IE7, но это потому, что IE7 запомнит последний выбор пользователем ландшафта или портрета в предварительном просмотре (только перезапущен только браузер).
В этой статье есть некоторые предложения об использовании JavaScript или ActiveX, которые отправляют ключи в браузер пользователей, хотя они не идеальны и полагаются на изменение настроек безопасности браузеров.
Поочередно вы можете вращать содержимое, а не ориентацию страницы. Это можно сделать, создав стиль и применив его к телу, которое включает в себя эти две линии, но у этого также есть недостатки, создающие много проблем выравнивания и макета.
type="text/css" media="print"> .page -webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); > Последняя найденная альтернатива — создать альбомную версию в формате PDF. Вы можете указать на это, когда пользователь выбирает печать, он печатает PDF. Однако я не мог получить это для автоматической печати работы в IE7.
media="print" rel="Alternate" href="print.pdf">В заключение, в некоторых браузерах можно легко использовать относительность, используя параметр @page size, однако во многих браузерах нет верного пути, и это будет зависеть от вашего контента и среды. Возможно, поэтому Google Documents создает PDF при выборе печати, а затем позволяет пользователю открывать и распечатывать его.
@page size Кажется, не работает на всех современных браузерах, только Firefox. Chrome и Opera оба игнорируют это, насколько я видел.
size: landscape НЕ является частью CSS2.1, хотя @page правила таковы. Это, однако, часть CSS3. Для подтверждения попробуйте использовать W3C CSS Validator и введите @page и сравните результаты с «
Когда у вас есть div, который занимает 100 ширину или высоту страницы, вращение не заставляет div занимать пространство страницы портрета, а поворачивает пейзаж. Таким образом, некоторые части div затем исчезают со страницы.
type="text/css" media="print"> @page size: landscape; > body writing-mode: tb-rl; > Это работает в IE , Firefox и Chrome
Не понял, что я делаю не так, но это ломает всю страницу в chrome. Это строка, которую я скопировал из кода @media print <@page
Недостаточно просто вращать содержимое страницы. Вот правильный 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) . Но для достаточно современных браузеров это не требуется.
http-equiv="Content-Type" content="text/html; charset=UTF-8" /> . Copy all styles here. class="portrait">A portrait page class="landscape">A landscape page Большое спасибо, работает как брелок (используется chrome) с веб-страницами, которые состоят из смеси как альбомного, так и портретного режимов.
@mzonerz Я только что протестировал в IE 11, он работает нормально. Я добавил тестовый HTML в конце ответа. Обратите внимание, что в настройках печати вы должны установить поля страниц на 10 мм. Если вам нужны другие поля страницы, вам необходимо обновить следующие значения: padding: 10mm; ширина: 190 мм; высота: 190 мм;
@Denis Спасибо за ваши усилия. На самом деле это единственное решение, которое до сих пор работало для меня. Замечательно! Людям, которые интегрируют это решение в сайты Intranet Sharepoint, может потребоваться отключить параметры просмотра в режиме совместимости.
Правило @page было сокращено с CSS2 до CSS2.1. Полное правило CSS2 @page, как сообщается, было реализовано только в Opera (и даже тогда довольно плохо). Мои собственные тесты показывают, что IE и Firefox вообще не поддерживают @page. В соответствии с уже устаревшим разделом 13.2.2 спецификации CSS2 можно переопределить пользовательские настройки ориентации и (например) принудительную печать в альбомной ориентации, но соответствующее свойство «size» было удалено из CSS2.1, что соответствует факту что ни один текущий браузер не поддерживает его. Он был восстановлен в модуле CSS3 Paged Media, но обратите внимание, что это только рабочий проект (по состоянию на июль 2009 года).
Вывод: забудьте про @page на данный момент. Если вы чувствуете, что ваш документ должен быть напечатан в альбомной ориентации, спросите себя, можете ли вы сделать свой дизайн более плавным. Если вы действительно не можете (например, потому что документ содержит таблицы данных со многими столбцами), вам нужно будет посоветовать пользователю установить ориентацию на альбомную и, возможно, наметить, как это сделать в наиболее распространенных браузерах. Конечно, некоторые браузеры имеют функцию печати по ширине (например, Opera, Firefox, IE7), но нежелательно полагаться на пользователей, имеющих эту функцию или включив ее.
@page¶
Правило @page используется для модификации некоторых свойств CSS при печати документа. Вы не можете изменить все CSS свойства с @page . Вы можете изменить только margin , orphans , widows , и разрывы страницы документа. Попытки изменить любые другие свойства CSS будут игнорироваться.
Правило @page доступно через интерфейс объектной модели CSS CSSPageRule .
Синтаксис¶
@page margin: 1cm; > @page :first margin: 2cm; > size¶
Указывает целевой размер и ориентацию полей страницы, содержащихся в блоке. В общем случае, когда одно поле страницы отображается на одном листе страницы, он также определяет размер и ориентацию листа страницы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
/* Keyword values for scalable size */ size: auto; size: portrait; size: landscape; /* values */ /* 1 value: height = width */ size: 6in; /* 2 values: width then height */ size: 4in 6in; /* Keyword values for absolute size */ size: A4; size: B5; size: JIS-B4; size: letter; /* Mixing size and orientation */ size: A4 portrait; auto Браузер сам выбирает размер листа. landscape Содержимое страницы отображается в альбомной ориентации portrait Содержимое страницы отображается в портретном режиме. Это ориентация по умолчанию. Любое значение длины. Первое значение соответствует ширине поля страницы, а второе соответствует его высоте. Если указано только одно значение, оно используется как для ширины, так и для высоты. A5 (148mm x 210mm), A4 (210mm x 297mm), A3 (297mm x 420mm), B5 (176mm x 250mm), B4 (250mm x 353mm), JIS-B5 (182mm x 257mm), JIS-B4 (257mm x 364mm), letter (8.5in x 11in), legal (8.5in x 14in), ledger (11in x 17in).
marks¶
Добавляет обрезку и/или регистрационные отметки в документ.
@page /* Keyword values */ marks: none; marks: crop; marks: cross; marks: crop cross; > crop Будут напечатаны отметки для обрезки cross Будут напечатаны крестики none Никаких отметок не будет напечатано
bleed¶
Определяет степень заступа за пределы поля страницы, при котором отображаемая область страницы отрезается.
/* Keyword values */ bleed: auto; /* values */ bleed: 8pt; bleed: 1cm; Пример¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
html> head> meta charset="utf-8" /> title>@pagetitle> link rel="stylesheet" href="/example/css/print.css" media="print" /> head> body> h1>Метод ловли льва в пустынеh1> h2>Метод последовательного перебораh2> p> Пусть лев имеет габаритные размеры LxWxH, где L — длина льва от кончика носа до кисточки хвоста, W — ширина льва, а H — его высота. После чего пустыню разбиваем на ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва. Учитывая, что лев может находиться не строго на заданном участке, а одновременно на двух из них, клетку для ловли следует делать повышенной площади, а именно 2Lx2W. Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина льва или, что хуже, только его хвост. p> p> Далее последовательно накрываем каждый из размеченных прямоугольников пустыни клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура поимки считается завершенной. p> body> html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
body font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */ > h1, h2, p color: #000; /* Черный цвет текста */ > @page :first margin: 1cm; /* Отступы для первой страницы */ > @page :left margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех левых страниц */ > @page :right margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех правых страниц */ > Спецификации¶
Landscape printing from HTML
In your CSS you can set the @page property as shown below.
The @page is part of CSS 2.1 specification however this size is not as highlighted by the answer to the question Is @Page < size:landscape>obsolete?:
CSS 2.1 no longer specifies the size attribute. The current working draft for CSS3 Paged Media module does specify it (but this is not standard or accepted).
As stated the size option comes from the CSS 3 Draft Specification. In theory it can be set to both a page size and orientation although in my sample the size is omitted.
The support is very mixed with a bug report begin filed in firefox, most browsers do not support it.
It may seem to work in IE7 but this is because IE7 will remember the users last selection of landscape or portrait in print preview (only the browser is re-started).
This article does have some suggested work arounds using JavaScript or ActiveX that send keys to the users browser although it they are not ideal and rely on changing the browsers security settings.
Alternately you could rotate the content rather than the page orientation. This can be done by creating a style and applying it to the body that includes these two lines but this also has draw backs creating many alignment and layout issues.
The final alternative I have found is to create a landscape version in a PDF. You can point to so when the user selects print it prints the PDF. However I could not get this to auto print work in IE7.
In conclusion in some browsers it is relativity easy using the @page size option however in many browsers there is no sure way and it would depend on your content and environment. This maybe why Google Documents creates a PDF when print is selected and then allows the user to open and print that.