Реакция изменения размера компонента в окне печати - PullRequest
0 голосов
/ 23 октября 2018

, так что это моя проблема, я пытаюсь распечатать некоторые компоненты в действии, используя window.print, мои компоненты имеют определенные размеры, скажем, 5 см х 5 см, я скрыл все остальные компоненты на странице печати (обратите внимание, что стилизациявся страница как-то сложна для публикации здесь), проблема в том, что мои компоненты изменяются в размерах на странице печати.Я много смотрел, но у меня ничего не получалось.Обратите внимание, что когда я тестировал один и тот же отпечаток на другой странице (без сложных стилей), он работал нормально.Так есть ли способ передать стили в окно печати или «переопределить» стиль, чтобы мои компоненты правильно отображались?Спасибо.

РЕДАКТИРОВАТЬ: Вот мой CSS.Это работает нормально в новом приложении, поэтому, должно быть, я что-то испортил, я удалил все @media print из файлов начальной загрузки css, но не повезло.Я попытался поместить код как внутри, так и за пределами печати @media, но не повезло.Насколько я знаю, медиа должны отображать реальные физические длины и единицы, любая помощь будет оценена.Еще раз спасибо

  .print-only{
  display: none;
}

@media print {

  @page {
    margin: 0; 
    size: a4 !important;
  }
    body{
      margin: 0.5cm !important;
      padding: 0;
   }

  .print-only{
    margin-top: 20px;
    display: block;
  }

  .no-print {
    width: 100%;
    margin: 0px;
    display: none;
}

.Container{
  position: relative;
  display: block;
  border: 3px solid black;
  width: 6in !important;
  height: 2in !important;
  margin: 0; 
  padding: 0;
  text-align: start;
}

   .labels{ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
    font-size: 6pt; 
    font-style: normal; 
    font-variant: normal;
    height: 13px;
  }




.container2{
  height: 39px;
  font-size: 8px;
  font-weight: 550;
  position: absolute;
  top: 20px;
  right: 1in;
  line-height: 13px;
  text-align: center;
}


}

1 Ответ

0 голосов
/ 23 октября 2018

Недавно я столкнулся с той же проблемой при разработке шаблона печати в React.Я был совершенно неправ в своем понимании того, что все стили, которые я пишу в моих файлах CSS, будут применяться.Затем я обнаружил определенную семантику, которую необходимо соблюдать при разработке шаблона печати HTML.

Взгляните на эту ссылку .Это будет очень полезно для вашего дизайна.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...