Печать страницы с загрузкой 3

Я просматривал много ответов здесь, в stackoverflow, которые охватывают то, что мне интересно, но не нашли ничего, что сработало бы для меня.

Я понимаю, что страница печати составляет около 550 px для A4, и поэтому bootstrap будет использовать стили и макеты, обычно используемые для мобильных устройств.

Когда я использую Ctrl + P для моей веб-страницы, страница для печати выглядит так же, как и мобильная версия моей страницы. Но как сделать его похожим на настольную версию? (media > 1024 px) Есть ли способ сделать это?

Я знаю, что я могу изменить css специально для печати. Но как решить эту проблему с помощью системной сетки bootstrap 3? Ширина моих divs основывается на том, что я добавил для col-xs, но я хочу, чтобы печать использовала макет (ширину) для col-md

Изменить: После того, как я боролся с этим еще несколько часов, я понимаю, что это может быть более сложным, чем я ожидал раньше. Просто изменение ширины не решает это для меня. Многие из моих divs имеют синтаксис

<div class="md-right sm-right xs-down col-md-1 col-sm-2 box"></div>

или

<div class="col-md-4 col-sm-6 col-xs-12"></div>

Страница выглядит хорошо в XS для небольших устройств, но при печати в XS многие элементы выглядят гигантскими. Поэтому вопрос остается. Есть ли способ сделать страницу печати такой же, как макет для средних или больших устройств? Или мне нужно сделать печать css без использования системы сетки bootstrap и добавить статические ширины в pt для всех элементов, чтобы выполнить это?

Заранее спасибо

ОТВЕТЫ

Ответ 1

В результате я решил решить проблему, используя собственный файл print.css, не включив в него весь загрузочный загрузочный материал. Включили только некоторые необходимые загрузочные вещи с показом и скрытием.

Ответ 2

Было бы полезно предоставить JSBin. В любом случае, поскольку у меня был этот макет в JSBin с col-sm- (звездочкой), вы можете просто изменить все -sm-to -xs- между запросом на печать. Все проценты одинаковы в каждой точке останова, поэтому изменение sm на xs будет печатать это и игнорировать другие классы col- (звездочки). Ahh, я прочитал сообщение сейчас, вам нужно будет изменить весь col-sm на col-md в этом, а затем использовать! Важно, чтобы это сделать. Xs col находятся вне медиа-запросов, поэтому почему это происходит.

http://jsbin.com/AzICaQes/5

@media print {

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
  float: left;
}
.col-sm-12 {
  width: 100%;
}
.col-sm-11 {
  width: 91.66666666666666%;
}
.col-sm-10 {
  width: 83.33333333333334%;
}
.col-sm-9 {
  width: 75%;
}
.col-sm-8 {
  width: 66.66666666666666%;
}
.col-sm-7 {
  width: 58.333333333333336%;
}
.col-sm-6 {
  width: 50%;
}
.col-sm-5 {
  width: 41.66666666666667%;
}
.col-sm-4 {
  width: 33.33333333333333%;
 }
 .col-sm-3 {
   width: 25%;
 }
 .col-sm-2 {
   width: 16.666666666666664%;
 }
 .col-sm-1 {
  width: 8.333333333333332%;
 }

  }

Ответ 3

Собственно, все, что вам нужно добавить (to user.css), это:

@media print {

  @page {                
    size: A4;
    margin: 0mm;
  }

  html, body {
    width: 1024px;
  }

  body {
    margin: 0 auto;
  }
}

Пока вы на нем, рассмотрите возможность использования всех этих настроек для начальной загрузки 3

@media print {

  @page {                
    size: A4;
    margin: 0mm;
  }

  html, body {
    width: 1024px;
  }

  body {
    margin: 0 auto;
    line-height: 1em;
    word-spacing:1px;
    letter-spacing:0.2px;
    font: 14px "Times New Roman", Times, serif;
    background:white;
    color:black;
    width: 100%;
    float: none;
  }

  /* avoid page-breaks inside a listingContainer*/
  .listingContainer{
    page-break-inside: avoid;
  }

  h1 {
    font: 28px "Times New Roman", Times, serif;
  }

  h2 {
    font: 24px "Times New Roman", Times, serif;
  }

  h3 {
    font: 20px "Times New Roman", Times, serif;
  }

  /* Improve colour contrast of links */
  a:link, a:visited {
    color: #781351
  }

  /* URL */
  a:link, a:visited {
    background: transparent;
    color:#333;
    text-decoration:none;
  }

  a[href]:after {
    content: "" !important;
  }

  a[href^="http://"] {
    color:#000;
  }

  #header {
    height:75px;
    font-size: 24pt;
    color:black
  }
}

Ответ 4

Для тех, кто использует бутстрап-микшины для создания таких столбцов (версия sass):

@include make-sm-column(3, 0);

этого будет недостаточно, чтобы переписать стили для классов столбцов, как предлагает Кристина. Единственное простое решение, которое я нашел, это изменить $screen-sm в _variables.scss до 595px и перекомпилировать bootstrap.css

Итак, найдите этот код в _variables.scss:

$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;

и измените его на это:

// decrease min-width to fix print layout issue
$screen-sm:                  595px !default; 
$screen-sm-min:              $screen-sm !default;

затем в вашем _print.scss

@page {
  size: A4;
  margin: 0;
}
@media print {

  html, body {
    width: 768px;
  }
  body {
    margin: 0 auto;
  }

  // .. your custom styles for print layout

}

Ответ 5

У меня была аналогичная проблема. Я закончил замену всех col-md- * на col-xs- *, и это сработало как шарм. Вот код exmaple

<div class="container make-border" id="obaidrehman07">
  <div class="row make-border">
    <div class="col-md-9 text-center main-title col-md-offset-1">
      <h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
    </div>
    <div class="col-md-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
  </div>
</div>

преобразован в

<div class="container make-border" id="obaidrehman07">
  <div class="row make-border">
    <div class="col-xs-9 text-center main-title col-xs-offset-1">
      <h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
    </div>
    <div class="col-xs-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
  </div>
</div>