來自 CSS 的 Styles 不適用於打印 DIV

Question

我需要從頁面打印一些 div。 我使用引導程序和彈性。

<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>

我嘗試打印這個 div。 我有 CSS （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;
      }
    }
  }
} 

對於打印，我嘗試使用這種方式：

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();
}

但是在打印所有未格式化的塊后（打印預覽也未在 chrome 瀏覽器中格式化）。 每個人都阻止從新行開始並忽略 CSS。 為了便於理解，該塊包含 16 個帶有文本的子塊。

<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>

這些塊應在每行顯示四個，但所有塊都從新行顯示。 塊中的文本也未加框並從新行開始。 顯示 flex 不起作用，文本轉換：大寫不起作用，寬度百分比和 mm 不起作用我不明白為什么 CSS 不起作用。

Answer 1

我有一個類似的問題。 我的打印代碼工作了很長時間，但最近停止了格式化。

一定有什么改變了，看起來外部 CSS 沒有被讀取。 我將適用的部件從我的外部 css 移到文件中，它現在可以工作了。 引導格式化的東西會很痛苦。