CSS Print Layout - печать на одной странице - PullRequest
Новая
       23

CSS Print Layout - печать на одной странице

24 голосов
/ 01 декабря 2011

Я сильно застрял, и архивы ТАК мне не помогают. Может быть, я смотрю не в том месте. Вот короткий рассказ:

  • У меня есть представление, что мне нужно напечатать на одной полной странице. У меня не может быть второй страницы, и мне нужно, чтобы она была как можно большей на странице.
  • Решение должно быть достаточно совместимым с браузерами (IE9 +, Safari, Chrome, FF).
  • У меня уже есть решение PDF, но мне также нужно простое ванильное решение для печати. ​​
  • Страница построена с помощью Bootstrap, но я переопределил большинство классов для Print.

Структура HTML-страницы следующая. Я добавил несколько встроенных CSS, чтобы настроить часть этой информации. 

<div class="container">
  <div class="row">
    <div class="span16">

      <style type="text/css" media="all">
        @media print {
          html, body {
            margin: 0;
            padding: 0;
            background: #FFF; 
            font-size: 9.5pt;
          }
          .container, .container div {
            width: 100%;
            margin: 0;
            padding: 0;
          }
          .template { overflow: hidden; }
          img { width: 100%; }
        }
      </style>

      <div class="template_holder">
        <div class="template">
          <img src="some_big_image">
          <div>
            [PLAIN TEXT IN HERE, POSITION:ABSOLUTE OVER THE IMAGE]
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Я понимаю, что включать встроенный CSS здесь довольно плохо, но по разным причинам он должен перекрывать кучу других CSS. Я мог бы вытащить его обратно, но суть в этом. Когда я печатаю, я получаю что-то, что выглядит правильно, плюс дополнительную вторую страницу. Когда я уменьшаю изображение, все в порядке, но мне нужно изображение, чтобы заполнить DIV.

Я думал, что установка ширины на 100% была проблемой, но я убедился, что соотношение сторон изображения было меньше, чем на странице (даже с любыми полями). По сути, изображение на всю ширину не должно вызывать разрыв страницы. Что я делаю не так и что мне нужно изменить? Любая помощь приветствуется ...

Ответы [ 2 ]

19 голосов
/ 27 декабря 2011

Я думаю, что разочарование этой деталью CSS в том, что ответ должен быть адаптирован к моему собственному проекту.Спасибо @blahdiblah и другим за предложения.Совокупность решений привела к почти идеальным результатам, хотя, конечно, IE по-прежнему вызывает у меня проблемы ...

Это было связано с жестким сбросом всех стилей заполнения / полей, а затем большим количеством маркеров !importantдля заполнения, ширины, высоты и т. д. В основном я заполнил страницу высотой, а затем поместил объекты шириной 100%.Результатом является максимальный охват на странице 8,5x11 с нулевым переливом на вторую страницу. 

@media print {
  * { margin: 0 !important; padding: 0 !important; }
  #controls, .footer, .footerarea{ display: none; }
  html, body {
    /*changing width to 100% causes huge overflow and wrap*/
    height:100%; 
    overflow: hidden;
    background: #FFF; 
    font-size: 9.5pt;
  }

  .template { width: auto; left:0; top:0; }
  img { width:100%; }
  li { margin: 0 0 10px 20px !important;}
}
2 голосов
/ 09 декабря 2011

Похоже, ваше изображение слишком велико.Поскольку изображение имеет пользовательский размер, почему бы не установить 

img { height: 100%; }

вместо width?Это, по крайней мере, гарантировало бы, что оно не переместится на вторую страницу.

Помните также, что принтеры более изменчивы, чем браузеры.Возможно, вам удастся сэкономить на каждом последнем дюйме места на вашем принтере, но кто-то другой может иметь существенно отличающиеся поля печати и разрушить всю вашу тяжелую работу.

...