以角度打印功能对齐

Question

我是 Angular 的新手，我想打印模态信息，我正在使用 onclick=print() 打印数据数据enter image description here。 我的css代码

@media print {

        #non-printable {
          visibility: hidden;
        }
        #printable{
            visibility: visible;
            border: none;
            position: absolute !important;
        left: 0;
        top: 0;
        overflow-x:auto ;
        float: left;
        }
      }

这是我的html代码

 <div class="modal" id="dModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document" >
      <div class="modal-content" style="margin-left: auto; margin-right: auto;">
     
        <div class="modal-body" id="printable">
            <div class="container" style="width:100%" >

                  <div class="row">
                    <div class="col col-md-3">
                      <label>Irn Number :</label>
                    </div>
                    <div class="col col-md-9">
                      <label>{{irn}}</label>
                    </div>
                   
                  </div>
              
                  <div class="row">
                    <div class="col col-md-3">
                      <label>Status :</label>
                    </div>
                    <div class="col col-md-7">
                      <label>{{Status}}</label>
                    </div>
                 
                  </div>
              
               
              
                   <div class="row">
                    <div class="col col-md-3">
                      <label>QR code :</label>
                    </div>
                    <div class="col col-md-7" style="text-align: left;">
                      <label> <qrcode [qrdata]="qr" [width]="150" [errorCorrectionLevel]="'M'"></qrcode> </label>
                    </div>
                 
                  </div>
              
        </div>

        <div class="modal-footer" id="non-printable">
          <button id="btnPrint" type="button" class="btn btn-secondary" data-dismiss="modal"onclick="print()">Print</button>

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

感谢您的帮助。

Answer 1

您可以尝试在container 类中添加属性flex-direction: column; display: flex;