Question

我正在尝试打印模态的内容，但它在打印预览中显示出很大的差距以及应该隐藏的内容。

尽管在特定内容中添加了隐藏内容，但它们仍会显示在预览中。

还有一个隐藏的div可以防止在滚动时在地图上滑动，这就是为什么预览的第一页看起来是空白的。

@media print {
  #overlay, #close-modal-button, #print-button * {
    visibility: hidden;
    display: none !important;
  }
  #map-modal * {
    visibility: visible;
  }
  #map-modal, #map-modal {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    overflow: visible!important;
    display: block;
  }
}

<div id="map-modal" class="modal" materialize="modal" [materializeParams]="[{dismissible: true}]" [materializeActions]="modalActions">
  <div id="map-modal-content" class="modal-content">
    <h4 id="modal-title">Map of the area and directions</h4>
    <div class="container center">
      <div class="row">
        <div id="overlay" class="overlay" onClick="style.pointerEvents='none'">
        </div>
          <div class="center">
            <iframe id="map" class="center" src="https://www.google.com/maps/d/u/0/embed?mid=1T1AFckKqP4J38fIJswg8uEr42hyB3R5y&ll=51.06791175093598%2C0.21307320000005348&z=11" allowfullscreen></iframe>
          </div>
      </div>
      <hr>
      <p id="modal-text"><b>St Dunstan’s Church, Mayfield TN20 6AB</b><br>Mayfield village is signposted on the A267 and the church is situated in the middle of the village on the High Street.</p>
      <div class="row">
        <div class="container center">
          <div class="col s12">
            <img id="map-image" class="center materialboxed" src="./assets/Map1.png">
          </div>
        </div>
      </div>
      <p id="modal-text">The car park is sign posted on the right-hand side of the High Street as you are driving up the hill. The easiest way to get to the church from the car park is to walk through the car park for The Middle House as seen on the map. The marked car park in Mayfield is free.</p>
      <hr>
      <p id="modal-text">The drive from St Dunstan’s Church to the reception at Juddwood Farm is approximately 30 minutes.</p>
      <p id="modal-text"><b>Juddwood Farm, Haysden Lane, Tonbridge TN11 8AB </b></p>
      <div class="row">
        <div class="overlay" onClick="style.pointerEvents='none'">
        </div>
          <iframe id="map" class="center" src="https://www.google.com/maps/d/u/0/embed?mid=1uReFxtB4ZhFSwVtD8vQ7L3qKpetdMElh&ll=51.096412867708054%2C0.240690000000086&z=11" allowfullscreen></iframe>
      </div>
      <div class="row">
        <div class="container center">
          <div class="col s12">
          <img id="map-image" class="materialboxed" src="./assets/Map2.png">
        </div>
      </div>
    </div>
    </div>
  </div>
  <div class="row">
    <div class="container center">
      <a id="print-button" onClick="window.print()" class="black waves-effect waves-light btn z-depth-3" href=""><i class="material-icons right">print</i>Print this page</a>
    </div>
  </div>
  <div class="modal-footer transparent">
    <a id="close-modal-button" class="right transparent btn-flat" (click)="closeModal()">Close</a>
  </div>
</div>

我已经搜索了相当数量，但无法理解为什么。这是打印预览{g 3}}

的gif

Answer 1

看起来您的声明#print-button *正在寻找#print-button的孩子，而不是#print-button本身。

此外，还不清楚为什么你有重复的＃map-modal，＃map-modal {...你打算选择#map-text吗？

打印模式仍显示“隐藏”内容

1 个答案: