来自 CSS 的 Styles 不适用于打印 DIV

Question

I need to print some div from page. I use bootstrap and flex.

<div id="e-analitic-window" class="modal fade" data-companyname="<?=$company_def['name']?>" data-companyid="<?=$company_def['id']?>">
    <!-- HTML-->
        <div class="modal-footer button-block">
            <a href="#" type="button" class="acbtn " data-action="print" onClick="PrintElem('e-analitic-window');" >Print</a>
            <a href="#" type="button" class="acbtn"  data-action="email">Send to email</a>
            <a href="#" type="button" class="acbtn" data-action="new-acc">New report</a>
        </div>
    <!-- HTML -->
</div>

I try to print this div. I have CSS for it (SCSS):

@media print {
  html, body{
    height: 210mm;
    width: 297mm;
  }
  .wnd-e-analitic {
    width: 290mm;
    max-width: 290mm;
    .modal-header {
      border-bottom: none;
      padding: 0;
      h4, .modal-title {
        text-transform: uppercase;
        text-align: center;
        margin: 0 auto;
        font-size: 7mm;
        line-height: 8mm;
        a[href] {
          color: $main-text-color;
          &:hover {
            text-decoration: none;
            color: $main-color;
          }
        }
      }
    }
    .sub-header-text {
      font-size: 6mm;
      line-height: 6mm;
      padding-top: 5mm;
      color: $main-color;
      text-align: center;
    }
    .modal-body {
      .list-companies {
        display: flex;
        flex-wrap: wrap;
        .company-item {
          display: none;
          opacity: 0;
          width: 100%;
          justify-content: space-evenly;
          flex-wrap: wrap;
          align-items: stretch;
          .item-coef {
            width: 25%;
            padding: 5mm;
            font-size: 6mm;
            margin-top: 4mm;
            margin-bottom: 4mm;
            a, p{
              font-size: 6mm;
            }
            .header {
              display: flex;
              flex-wrap: nowrap;
              .item {
                width: 50%;
                a[href] {
                  color: $main-color;
                  &:hover{
                    color: $main-separate-color;
                    text-decoration: none;
                  }
                }
              }
              .right {
                text-align: right;
              }
            }
            .record-header {
              position: relative;
              h2 {
                font-size: 7mm;
                text-align: center;
                padding: 8mm 0 4mm 0;
              }
              .separator-block{
                position: absolute;
                bottom:0;
                left:0;
                right: 0;
                .inner{
                  margin: 0 auto;
                  height: 1mm;
                  width: 20mm;
                  background-color: $main-color;
                }
              }
            }
            .record-content {
              .text_in {
                font-size: 5mm;
                line-height: 8mm;
                text-align: center;
              }
            }
          }


        }
        .company-item.active {
          display: flex;
          opacity: 1;
        }
      }
    }
    .modal-footer {
      border-top: none;
    }
    .button-block {
      text-align: center;
      display: none;
      justify-content: center;
      a[href] {
        display: block;
        min-width: 25%;
        margin-left: 5mm;
        margin-right: 5mm;
      }
    }
  }
} 

For print i tried to use this way:

function PrintElem(strid) {
        var prtContent = document.getElementById(strid);
        var prtCSS = '<link rel="stylesheet" href="/path/to/file" type="text/css" />';
        var WinPrint = window.open('','','left=50,top=50,width=640,height=480,toolbar=0,scrollbars=1,status=0');
        WinPrint.document.write('<div id="print" class="contentpane">');
        WinPrint.document.write(prtCSS);
        WinPrint.document.write(prtContent.innerHTML);
        WinPrint.document.write('</div>');
        WinPrint.document.close();
        WinPrint.focus();
        WinPrint.print();
        WinPrint.close();
}

but after printing all blocks not formatted ( print preview is not formatted in chrome browser too). Everyone block start from new line and ignores CSS. for understanding, the block contains 16 child blocks with text.

<div class="item-coef">
    <div class="header">
          <div class="item dropdown left">
              <a href="#"
                 class="dropdown-toggle"
                 role="button"
                 id="detail-<?=$k_item_key?>-<?=$company['id']?>"
                 data-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="false">Описание
              </a>
              <div class="dropdown-menu" aria-labelledby="detail-<?=$k_item_key?>-<?=$company['id']?>">
                  <p><?=$item_k_data['detail']?></p>
              </div>
          </div>
          <div class="item dropdown right">
              <a href="#"
                 class="dropdown-toggle"
                 role="button"
                 id="detail-<?=$k_item_key?>-ceo"
                 data-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="false">Совет CEO
              </a>
              <div class="dropdown-menu" aria-labelledby="ceo-<?=$k_item_key?>-<?=$company['id']?>">
                  <p><?=$item_k_data['ceo']?></p>
              </div>
          </div>
    </div>
    <div class="record-header">
        <?php //error_log('LOG ' . serialize($item_k_data));?>
        <h2><?=$item_k_data['value']?></h2>

        <div class="separator-block"><div class="inner"></div></div>
    </div>
    <div class="record-content">
        <div class="text_in">
            <p><?=$item_k_data['label']?></p>

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

These blocks should display four in each line, but all are displayed from a new line. The textes in the blocks is also unframed and starts from a new line. display flex doesn't work, text-transform: uppercase doesn't work, width in percent and mm doesn't work I can not under stand why CSS does not work.

Answer 1

I had a similar problem. My print code worked fine for a long time but recently stopped formatting.

Something must have changed and it looks like external CSS's aren't being read. I moved the applicable parts from my external css into the file and it works now. The bootstrap formatting stuff will be a pain.