Проблема с полями и отступами при выполнении window.print

Question

Я пытаюсь с помощью Javascript window.print напечатать содержимое внутри контейнера div. Контейнером div управляет angular js.

CSS файл

@media print
{
    body, html, #wrapper {
        width: 100%;
        margin:0px;
        padding:0px;
        border: 1px solid red;
    }
    .no-print, .no-print * {
        display: none !important;
    }
    .col-sm-12 {
        width: 100%;
   }
}

HTML, содержащий DIV

<div ng-show="views.invoice">
    <div class="row col-sm-12" style="margin:0px; padding:0px; width:100%">
        test
    </div>

    <div class="row no-print">
        <div class="col-12">
            <button class="btn btn-success btn-default" onclick="window.print();"><i class="fa fa-print"></i> {{phrase.Print}}</button>
        </div>
    </div>
</div>

Вот как это отображается в браузере

Когда я делаю печать, она печатает в PDF, как показано ниже

Я вижу большое поле вокруг текста «тест». Как я могу печатать без полей или отступов?

Answer 1

Проблема

Скорее всего, вы установили скрытность видимости вашего ящика и панели навигации (навигация слева и навигация сверху). Когда видимость чего-либо установлена ​​на hidden, оно все еще находится в макете и сохраняет его высоту, ширину, поля и отступы. Вот почему вы видите пространство своего ящика и навигационной панели, соответственно, пространство слева и сверху.

Вы можете запустить и попробовать распечатать приведенный ниже экран. Вы увидите упомянутую проблему (пространство, вызванное сохраненными размерами [высота, ширина, отступы, поля]).

@media print {
  body,
  html,
  #wrapper {
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: 1px solid red;
  }
  #drawer {
    visibility: hidden;
  }
  #navbar {
    visibility: hidden;
  }
  .no-print {
    display: none;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
}

#wrapper {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}

#navbar {
  width: 100%;
  background: blue;
  color: white;
  padding: 20px;
}

#section--right {
  flex-grow: 1;
}

#drawer {
  height: 100%;
  width: 100px;
  background: red;
  color: white;
  padding: 20px;
}

#navbar .text {
  display: inline-block;
  height: 50px;
  background: #121212;
}

<div id="wrapper">
  <div id="drawer">Some drawer</div>

  <div id="section--right">
    <div id="navbar"><span class="text">Some navbar</span></div>
    <div id="print__section">
      test
    </div>

    <button id="print__button" class="no-print" onclick="window.print()">Print now</button>
  </div>
</div>

---

Решение

Я предлагаю установить специальный идентификатор или класс для области печати. Затем установите видимость всех других элементов внутри body, которые не имеют такого специального идентификатора или класса, чтобы скрыть. Кроме того, поскольку установка видимости для скрытого по-прежнему позволяет элементам сохранять свои размеры, установите их размеры (высоту, ширину, поля и отступы) также на 0. Обратите внимание, что вы не можете использовать display: none, поскольку область печати также не будет отображаться.

Вот рабочий пример, который решит вашу проблему.

@media print {
  body,
  html,
  #wrapper {
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: 1px solid red;
  }
  
  /* Makes all divs that are not inside the print region invisible */
  /* Then, set the size to 0 by setting everything (height, width, margin, and padding) to 0 */
  body *:not(#print__section) {
    visibility: hidden;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
  }
  
  /* Parents' visibility cascade to children's visibility */
  /* Make the print region visible again to override parent's visibility */
  #print__section {
    visibility: visible;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
}

#wrapper {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}

#navbar {
  width: 100%;
  background: blue;
  color: white;
  padding: 20px;
}

#section--right {
  flex-grow: 1;
}

#drawer {
  height: 100%;
  width: 100px;
  background: red;
  color: white;
  padding: 20px;
}

#navbar .text {
  display: inline-block;
  height: 50px;
  background: #121212;
}

<div id="wrapper">
  <div id="drawer">Some drawer</div>

  <div id="section--right">
    <div id="navbar"><span class="text">Some navbar</span></div>
    <div id="print__section">
      test
    </div>

    <button id="print__button" class="no-print" onclick="window.print()">Print now</button>
  </div>
</div>