来自 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 移到文件中，它现在可以工作了。 引导格式化的东西会很痛苦。