Стили печати @Media не применяются - PullRequest
Новая
       5

Стили печати @Media не применяются

0 голосов
/ 03 июля 2018

Stackblitz: https://stackblitz.com/edit/angular-xvdy1q
Я хочу напечатать конкретные div. 

<div id="forPrint" (click)="onPrint('23')">
  <div id="printable">
    <div class="box">

    </div>
  </div>
</div>

Javascript код: 

onPrint(url) {
  this.mode = 'print';
  const mywindow = window.open('', 'PRINT', 'height=400,width=600');

  mywindow.document.write(`<html><head><title>${document.title}</title>`);
  mywindow.document.write('</head><body >');
  mywindow.document.write(`<h1> www.${url}</h1>`);
  mywindow.document.write(document.getElementById('forPrint').innerHTML);
  mywindow.document.write('</body></html>');
  mywindow.document.close(); // necessary for IE >= 10
  mywindow.focus(); // necessary for IE >= 10*/

  mywindow.print();
  mywindow.close();

  return true;
}

Стайлс: 

@media print {
  html,
  body {
    height: 100% !important;
    width: 100%!important;
    h1 {
      color: #1c7430;
    }
  }
  #printable {
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
    height: 100% !important;
    width: 700px!important;
  }
  .box {
    width: 100px!important;
    height: 100px!important;
    background: green!important;
  }
}

Но после открытия диалогового окна печати поле не отображается. Поэтому не применяются стили, такие как h1, .box. В чем проблема? Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Вам нужно как-то внедрить свой CSS в новую страницу.

Здесь я создаю тег style и добавляю CSS напрямую. Вы также можете ссылаться на таблицу стилей: 

function onPrint(url) {
  this.mode = 'print';
  const mywindow = window.open('', 'PRINT', 'height=400,width=600');

  const styles = `html,
      body {
        height: 100% !important;
        width: 100%!important;
      }
      h1 {
          color: #1c7430;
      }
      #printable {
        display: flex!important;
        justify-content: center!important;
        align-items: center!important;
        height: 100% !important;
        width: 700px!important;
      }
      .box {
        width: 100px!important;
        height: 100px!important;
        background: green!important;
      }`

  mywindow.document.write(`<html><head><title>${document.title}</title>`);
  mywindow.document.write(`<style>${styles}</style>`)
  mywindow.document.write('</head><body >');
  mywindow.document.write(`<h1> www.${url}</h1>`);
  mywindow.document.write(document.getElementById('forPrint').innerHTML);
  mywindow.document.write('</body></html>');
  mywindow.document.close(); // necessary for IE >= 10
  mywindow.focus(); // necessary for IE >= 10*/

  mywindow.print();
  mywindow.close();

  return true;
}

JSFiddle Demo

0 голосов
/ 03 июля 2018

Вам необходимо включить фоновые цвета и изображения при печати. Вы можете сделать это в Chrome в диалоговом окне печати в разделе расширенных настроек.

Вы также можете применить свойство -webkit-print-color-adjust: exact; для изменения поведения фоновой печати. ​​

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

Нет похожих вопросов

...