Вопрос по html, css3 – Различная ориентация страницы для печати HTML

19
Код:

Я пытаюсь заставить работать следующую простую HTML-страницу:

<html>
  <head>
    <style type="text/css">     
    @media print
    {               
      @page port { size: portrait; }
      .portrait { page: port; }

      @page land { size: landscape; }
      .landscape { page: land; }                

      .break { page-break-before: always; }
    }
    </style>
  </head>
  <body>
    <div class="landscape">
      <p>This is a landscape page.</p>
    </div>
    <div class="portrait break">
      <p>This is a portrait page.</p>
    </div>
  </body>
</html>
Вопрос:

Я хочу напечатать содержимое первого div на первой странице с альбомной ориентацией, а второй с портретным режимом. Однако все браузеры (Chrome, Opera, Safari, IE10) печатают две портретные страницы. Я что-то пропустил или еще ни один из браузеров не поддерживает такую функцию? В последнем случае есть ли альтернатива для достижения этого результата?

Ваш Ответ

2   ответа
1

size свойство не используется (больше), поэтому я бы не стал на это полагаться. Наиболее прагматичным способом будет создание PDF-файлов на сервере перед печатью.

Вращающееся решение, предоставляемое Seéastien, также будет работать, но только в браузерах, которые его поддерживают.

Никогда не стоит полагаться на плагин, когда вы можете положиться на функцию навигатора. Вращения поддерживаются с использованием кода, который я предоставил в IE6 и более поздних версиях (с помощьюfilter). Плюс, если он использует медиа-запросы, он не использует IE5.5. Sébastien Renauld
Создание PDF-файлов не так просто, если у вас есть сложная логика на странице, которую вы хотите распечатать. И если у вас есть среда PHP, у вас там тоже нет большого выбора. Кроме того, зачем создавать PDF, если вам не нужен этот фактический файл - вам нужно только распечатать страницу, и это все povilasp
7

который должен быть в альбомной ориентации, на 90 градусов, используя CSS3 или фильтры. Следующее будет работать:

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

В настоящее время нет простого способа сделать это любым другим способом, так какsize Директива CSS реализована только одним браузером (Opera), но, тем не менее, является частью текущего проекта (Является ли @Page {size: landscape} устаревшим? за амортизацию,http://www.w3.org/TR/css3-page/#page-size для спецификации).

Следующий самый дешевый хак - это то, что я упомянул выше: выложите свой HTML на портрет ... и поверните на 90 градусов, используя CSS3.

Хорошо, ваш ответ подтвердил то, что я думал. Ваш взлом довольно интересный, и он действительно работает, однако это будет портретная страница в печати. Я имею в виду, что верхний и нижний колонтитулы размещаются в верхней и нижней частях (или слева и справа, если вы видите их в виде альбомного документа) страницы в браузере. tungi52
@povilasp: Только что проверил и вскоре обновлю свой ответ скрипкой, которая может упростить его. Обратите внимание, что в него встроены серьезные предположения, однако ... Все же проще, чем создание PDF. Sébastien Renauld
Фактически. Просто подумал, как это сделать -raw.github.com/niklasvh/feedback.js/master/feedback.js в сочетании с Canvas в сочетании с Rotation взломать. Sébastien Renauld
Это может быть разумным, но если в вашем отчете более одной страницы, вам нужно будет добавить верхнее поле, потому что поворот с преобразованием будет происходить из центра элемента, а не из верхнего правого угла, что было бы неплохо :) povilasp
@povilasp: ничто не мешает вам использоватьposition:absolute чтобы сместить его на 40% в дополнение к гнили. Sébastien Renauld

Похожие вопросы