Пейзажний друк з HTML

У мене є звіт HTML, який потрібно надрукувати пейзаж через багато колонок. Це є спосіб зробити це, без потреби користувача змінювати налаштування документа?

І які варіанти є серед браузерів.

У своєму CSS ви можете встановити властивість @page, як показано нижче.

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

@Page є частиною специфікації CSS 2.1, однак це sizeне так висвітлено у відповіді на питання Чи @Page {size: пейзаж} застарілий? :

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. Ви можете вказати на це, коли користувач вибирає друк, він друкує 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, який працює в більшості браузерів (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;
}

Я використовую 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>

Цитується з CSS-Discuss Wiki

Правило @page було скорочено за межі з CSS2 до CSS2.1. Повна інформація CSS2 @page, як повідомляється, було реалізовано лише в Opera (і навіть тоді). Моє власне тестування показує, що IE і Firefox взагалі не підтримують @page. Згідно з давно устарілим специфікацією CSS2, розділ 13.2.2, можна змінити налаштування орієнтації користувача та (наприклад) силовий друк у Landscape, але відповідне властивість "розміру" було скинуто з CSS2.1, що відповідає факту що жоден поточний браузер не підтримує його. Він був відновлений у модулі CSS3 Paged Media, але зауважте, що це лише робочий проект (станом на липень 2009 року).

Висновок: забудьте про @page на даний момент. Якщо ви вважаєте, що ваш документ повинен бути надрукований у ландшафтній орієнтації, запитайте себе, чи можете ви натомість зробити дизайн більш текучим. Якщо ви насправді не можете (можливо, тому, що документ містить таблиці даних з багатьма стовпцями, наприклад), вам потрібно буде порадити користувачеві встановити орієнтацію на Пейзаж і, можливо, окреслити, як це зробити у найбільш поширених браузерах. Звичайно, деякі веб-переглядачі мають функцію друку під ширину (зменшується до розміру) (наприклад, Opera, Firefox, IE7), але не доцільно покладатися на користувачів, які мають цей інструмент або ввімкнули його.

Спробуйте додати цю CSS:

@page {
  size: landscape;
}

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 .

Можливо, ви зможете використовувати правило CSS 2 @page, яке дозволяє встановити властивість 'size' на пейзаж .

Ви також можете використовувати нестандартний режим запису атрибутів css лише для IE

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

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

не працює в Firefox 16.0.2, але він працює в Chrome

Я створив порожній документ 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.

Я спробував вирішити цю проблему один раз, але всі мої дослідження привели мене до управління / плагінів ActiveX. Немає жодної хитрості, що веб-переглядачі (як і раніше 3 роки) дозволили змінювати будь-які настройки друку (кількість копій, розмір паперу).

Я намагаюся обережно попередити користувача, що їм потрібно вибрати "пейзаж", коли з'явиться діалогове вікно друку браузерів. Я також створив сторінку "Попередній перегляд друку", яка працювала набагато краще, ніж IE6! У нашому додатку були дуже широкі таблиці даних у деяких звітах, і попередній перегляд друку дав зрозуміти користувачам, коли таблиця буде розлита з правого краю паперу (оскільки IE6 не впорається з друком на 2 аркушах).

І так, люди все ще використовують IE6 навіть зараз.

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

Ця таблиця друкується лише в альбомному режимі, а всі інші сторінки друкуватимуться лише в портретному режимі. Але проблема полягає в тому, що якщо розмір таблиці перевищує ширину сторінки, то ми можемо втратити частину рядків, а іноді й заголовки також пропущені. Будь обережний.

Гарного дня.

Дякую, Naveen Mettapally.

Я спробував відповідь Дениса і зіткнувся з деякими проблемами (портретні сторінки не надрукувалися належним чином після переходу на альбомні сторінки), ось ось моє рішення:

body {
  margin: 0;
  background: #CCCCCC;
}

div.page {
  margin: 10px auto;
  border: solid 1px black;
  display: block;
  page-break-after: always;
  width: 209mm;
  height: 296mm;
  overflow: hidden;
  background: white;
}

div.landscape-parent {
  width: 296mm;
  height: 209mm;
}

div.landscape {
  width: 296mm;
  height: 209mm;
}

div.content {
  padding: 10mm;
}

body,
div,
td {
  font-size: 13px;
  font-family: Verdana;
}

@media print {
  body {
    background: none;
  }
  div.page {
    width: 209mm;
    height: 296mm;
  }
  div.landscape {
    transform: rotate(270deg) translate(-296mm, 0);
    transform-origin: 0 0;
  }
  div.portrait,
  div.landscape,
  div.page {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
}

<div class="page">
  <div class="content">
    First page in Portrait mode
  </div>
</div>
<div class="page landscape-parent">
  <div class="landscape">
    <div class="content">
      Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
    </div>
  </div>
</div>
<div class="page">
  <div class="content">
    Third page in Portrait mode
  </div>
</div>

Це також працювало для мене:

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

Якщо ви хочете побачити пейзаж на екрані перед друком, а також друк, то у своєму css ви можете встановити ширину до 900 пікселів, а висоту - 612 пікселів.

OP не згадував формат A4. Я припускаю, що це розмір букви в моїх номерах вище.

Ви можете спробувати наступне:

@page {
    size: auto
}