Электронная ориентация печати приложения неверна и устанавливает огромное количество непригодного для использования контента - PullRequest
Новая
       119

Электронная ориентация печати приложения неверна и устанавливает огромное количество непригодного для использования контента

0 голосов
/ 20 апреля 2020

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

Хотя это мой первый раз, когда я печатаю электронным способом, сама печать работает просто отлично, когда я использую размер бумаги по умолчанию А4 и в основном контролирую видимость элементов только с помощью css media query.

Однако мне нужно распечатать изображение штрих-кода, сгенерированное приложением, с некоторой дополнительной информацией, и физический размер этикетки составляет 84 мм * 36 мм. У меня есть этот нестандартный размер в windows. (В настоящее время только "печать" с помощью foxit в PDF, потому что мне было достаточно тратить бумагу ...)

Проблема в том, что без некрасивого / навязчивого css "взлома" и тому подобного он сохраняет "печать" "содержимое, как если бы сторона длиной 36 мм была верхней, поэтому в основном поворачивается на 90 °. Кроме того, я заметил, что он продолжает добавлять границы / поля / отступы / что угодно выше и ниже содержимого примерно на 1/5 высоты.

Результат (на данный момент) выглядит так:

enter image description here

(над штрих-кодом не должно быть пустого места!)

Если я установлю ориентацию на альбомную в настройках принтера, единственное отличие будет вся страница поворачивается, а содержимое все еще находится в неправильной ориентации.

Я пытался установить поля, отступы, ширину, высоту и т. д. c с помощью css @media print {} запросов, также пытался изменить размер страницы и ориентацию с помощью @page {}, но единственное, что сработало, - это если я принудительно поверну содержимое с помощью css (закомментировано во фрагменте ниже). Однако из-за упомянутой «невидимой» границы / поля / whoknows он обрезается сверху. Я также попытался изменить bootstrap. css только для того, чтобы убедиться, что это то, что переопределяет мой, но единственный результат, который я получил, - это то, что я смог правильно ориентироваться, установив @page {size: 84mm 36mm; }, хотя в этом случае содержимое было огромным (напечатано на 7 страницах) и с упомянутой границей или чем-то подобным, убирая 3/5 страницы ... Кроме того, этот принудительный размер страницы неприменим с другим вариантом печати. Это должно быть на обычной бумаге формата А4.

Я знаю, у webcontents print () есть опции, такие как margin, но, похоже, это не работает вообще. (Я пробовал также верхний и нижний колонтитулы, чтобы внести некоторые более очевидные изменения, но не увидел вообще никакого верхнего или нижнего колонтитула в результате.)

На данный момент у меня заканчиваются идеи, и я действительно расстроен , Ребята, вы испытали что-нибудь подобное раньше? У вас есть идеи или лучшие практики, которые могут помочь?

Не знаю, поможет ли это, но вот соответствующие HTML и CSS фрагменты: 

  <div class="row col-12">
    <div class="row col-6">
      <div class="col-2 print-text">2</div>
      <div class="col-3 print-text" *ngIf="employee">{{}}</div>
      <div class="col-3 print-text" *ngIf="employee">{{}}</div>
      <div class="col-2"></div>
      <div class="col-2 print-text">{{}}/{{}}</div>
    </div>
    <div class="row col-6"></div>
    <div class="row col-6">
        <div class="col-4 print-text" *ngIf="employee">{{}}</div>
        <div class="col-1"></div>
        <div class="col-4 print-text">{{}}</div>
        <div class="col-1"></div>
        <div class="col-2 print-text">{{}}</div>
    </div>
    <div class="row col-6"></div>
    <div class="row col-12" id="bc-image">
        <ngx-barcode bc-element-type="img" bc-format="{{}}" [bc-value]="barcodeValue" [bc-display-value]="true" bc-width="3" bc-height="60" bc-font-size="14"></ngx-barcode>
    </div>
    <div class="row col-6">
        <div class="col-8"></div>
        <div class="col-4 print-text">***</div>
    </div>
    <div class="row col-6"></div>
  </div>
</div>

****************************************************

@media print {
  @page {
    size: 84mm 36mm;
  }

  #barcode {
    /*-ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform:rotate(90deg);*/

    font-weight: bold;
    font-size: 30px;
  }

  .no-print {
    display: none;
  }

  .row {
    margin: 0 auto;
  }

  .col-1 {
    max-width: 8.333333%;
  }

  .col-2 {
    max-width: 16.666667%;
  }

  .col-3 {
    max-width: 25%;
  }

  .col-4 {
    max-width: 33.333333%;
  }

  .col-6 {
    max-width: 100%;
  }

  .col-8 {
    max-width: 66.666667%;
  }

  .col-12 {
    max-width: 100%;
  }
}
...