window.print() 在每一页上重复模式

问题描述 投票：0回答：2

我正在尝试使用 

window.print()
命令打印模态。我面临的问题是，例如。模态上的内容有 1 页长，但当我打印时，它显示 2 页，其中相同的内容在下一页上重复，即模态被打印两次。请建议如何防止这种情况。下面是我用来在多个页面上打印长内容的CSS。

@media print {
  .modal {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    visibility: visible;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;    
  }
  .modal-content {
    visibility: visible !important;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;    
  }
}
javascript jquery asp.net modal-dialog
2个回答
5
投票

当有打印屏幕时，它总是显示所有 html 内容，并且当内容顶部有模态时，

window.print()
将根据需要多次复制模态，以覆盖其后面的所有内容。

因此，如果您的内容需要 2 页来显示所有内容，而您的模态框只有 1 页，它将复制模态框，使其始终位于内容之上。

这是您遇到的问题的示例：

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

function printPage() {
  window.print();
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
<div id="fakeDiv">
  <button id="myBtn">Open Modal</button>
  <p class="everything">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec justo sodales, rhoncus dui at, pretium nulla. Curabitur venenatis ut turpis quis viverra. Suspendisse ac nisi malesuada, aliquam lorem vel, pellentesque dolor. Maecenas dignissim ultrices
    turpis ut eleifend. Sed volutpat nibh a tellus congue auctor. Sed scelerisque urna vitae tellus pulvinar porta at at est. Pellentesque sit amet facilisis mauris, vel dignissim felis. Mauris mattis nunc mauris, sed eleifend risus egestas vitae. Suspendisse
    nec molestie lectus. Etiam at enim lacinia, sollicitudin odio id, posuere justo. Phasellus elit lectus, venenatis eu velit eget, aliquet luctus neque. Duis tristique blandit lacus, nec rhoncus dui ornare vel. Nulla id fringilla justo, in mattis nisi.
    Maecenas a dui tempus, rutrum odio sed, molestie turpis. Aliquam tempor leo sed ligula interdum iaculis sed ac nunc. Suspendisse sit amet porta tellus. Morbi et quam vestibulum, accumsan risus id, iaculis libero. Donec condimentum dapibus elit, vel
    hendrerit lectus auctor vel. Vivamus vehicula, dolor eget lacinia sagittis, justo purus venenatis leo, vitae imperdiet nisi eros id leo. Quisque sed bibendum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    Suspendisse tristique, metus ac suscipit consequat, metus enim iaculis nibh, efficitur dignissim lorem libero sed erat. Morbi in tortor ultrices leo finibus vestibulum. Donec eget lacinia enim. Mauris hendrerit commodo dapibus. Sed vulputate est commodo,
    egestas arcu eu, tristique leo. Sed velit enim, fringilla non tristique malesuada, fringilla non erat. Nulla euismod in nisi non auctor. Maecenas in tempus magna. Maecenas at velit luctus, fringilla lacus in, scelerisque magna. Pellentesque ac tempus
    risus, sit amet ultricies libero. Proin sed gravida augue, quis egestas enim. Suspendisse ac aliquet nibh, quis elementum elit. Vestibulum leo sapien, eleifend ut consectetur eu, mattis vel dolor. Integer nulla erat, tempus nec quam eget, pharetra
    porta dui. In laoreet aliquam porttitor. Praesent tortor est, dignissim vel scelerisque ac, pellentesque a ipsum. Aenean maximus leo vel lacus mattis, sit amet dignissim enim sodales. Phasellus ac mauris sit amet ante sollicitudin elementum. Donec
    quis maximus mi. Nullam vitae purus ac odio fermentum cursus et sed urna. Pellentesque condimentum tellus ex, et convallis felis eleifend at. Pellentesque et sem ac ipsum pellentesque sagittis. Quisque ut ipsum fermentum, egestas leo ac, accumsan
    lacus. Pellentesque aliquet tellus vel tortor venenatis blandit. Etiam ultrices id magna ut tristique. Sed ac urna vel nibh auctor aliquet. Donec sollicitudin iaculis rutrum. Ut nec augue accumsan, dapibus dolor quis, finibus nisi. Mauris lectus elit,
    efficitur ultricies sollicitudin nec, pretium sed dui. Phasellus sagittis iaculis ligula et iaculis. Aenean dictum nisl et odio pulvinar dictum. Phasellus condimentum massa ipsum, at congue quam egestas vitae. Integer enim mauris, fringilla sit amet
    tempor scelerisque, tincidunt eget ligula. Proin condimentum rutrum maximus. Nunc tellus nisl, dictum vel fermentum ut, feugiat a nisi. Nam sed sapien sit amet elit egestas semper eu ut diam. Suspendisse blandit vitae metus porttitor cursus. Vestibulum
    et gravida massa. Fusce in neque sit amet lacus luctus ornare at id augue. Nam at congue ligula. Quisque eu mollis dui, eu dictum justo. Maecenas nec placerat velit. Morbi placerat, diam eu dignissim dignissim, turpis magna rhoncus lectus, ac interdum
    velit tortor sed tortor. Aliquam lobortis leo erat, vitae accumsan tortor tempus at. Sed bibendum vel justo id commodo. Nam ante nisl, consectetur a elit vel, imperdiet suscipit justo. Etiam sit amet cursus odio. Nam id volutpat sapien. In pellentesque
    a nisi sit amet efficitur. Maecenas fringilla libero sit amet aliquet mattis. Nullam risus mauris, porttitor eget eros quis, commodo cursus elit. Integer eros justo, iaculis luctus quam vel, fermentum luctus orci. Quisque aliquam rutrum facilisis.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec justo sodales, rhoncus dui at, pretium nulla. Curabitur venenatis ut turpis quis viverra. Suspendisse ac nisi malesuada, aliquam lorem vel, pellentesque dolor. Maecenas dignissim
    ultrices turpis ut eleifend. Sed volutpat nibh a tellus congue auctor. Sed scelerisque urna vitae tellus pulvinar porta at at est. Pellentesque sit amet facilisis mauris, vel dignissim felis. Mauris mattis nunc mauris, sed eleifend risus egestas vitae.
    Suspendisse nec molestie lectus. Etiam at enim lacinia, sollicitudin odio id, posuere justo. Phasellus elit lectus, venenatis eu velit eget, aliquet luctus neque. Duis tristique blandit lacus, nec rhoncus dui ornare vel. Nulla id fringilla justo,
    in mattis nisi. Maecenas a dui tempus, rutrum odio sed, molestie turpis. Aliquam tempor leo sed ligula interdum iaculis sed ac nunc. Suspendisse sit amet porta tellus. Morbi et quam vestibulum, accumsan risus id, iaculis libero. Donec condimentum
    dapibus elit, vel hendrerit lectus auctor vel. Vivamus vehicula, dolor eget lacinia sagittis, justo purus venenatis leo, vitae imperdiet nisi eros id leo. Quisque sed bibendum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
    per inceptos himenaeos. Suspendisse tristique, metus ac suscipit consequat, metus enim iaculis nibh, efficitur dignissim lorem libero sed erat. Morbi in tortor ultrices leo finibus vestibulum. Donec eget lacinia enim. Mauris hendrerit commodo dapibus.
    Sed vulputate est commodo, egestas arcu eu, tristique leo. Sed velit enim, fringilla non tristique malesuada, fringilla non erat. Nulla euismod in nisi non auctor. Maecenas in tempus magna. Maecenas at velit luctus, fringilla lacus in, scelerisque
    magna. Pellentesque ac tempus risus, sit amet ultricies libero. Proin sed gravida augue, quis egestas enim. Suspendisse ac aliquet nibh, quis elementum elit. Vestibulum leo sapien, eleifend ut consectetur eu, mattis vel dolor. Integer nulla erat,
    tempus nec quam eget, pharetra porta dui. In laoreet aliquam porttitor. Praesent tortor est, dignissim vel scelerisque ac, pellentesque a ipsum. Aenean maximus leo vel lacus mattis, sit amet dignissim enim sodales. Phasellus ac mauris sit amet ante
    sollicitudin elementum. Donec quis maximus mi. Nullam vitae purus ac odio fermentum cursus et sed urna. Pellentesque condimentum tellus ex, et convallis felis eleifend at. Pellentesque et sem ac ipsum pellentesque sagittis. Quisque ut ipsum fermentum,
    egestas leo ac, accumsan lacus. Pellentesque aliquet tellus vel tortor venenatis blandit. Etiam ultrices id magna ut tristique. Sed ac urna vel nibh auctor aliquet. Donec sollicitudin iaculis rutrum. Ut nec augue accumsan, dapibus dolor quis, finibus
    nisi. Mauris lectus elit, efficitur ultricies sollicitudin nec, pretium sed dui. Phasellus sagittis iaculis ligula et iaculis. Aenean dictum nisl et odio pulvinar dictum. Phasellus condimentum massa ipsum, at congue quam egestas vitae. Integer enim
    mauris, fringilla sit amet tempor scelerisque, tincidunt eget ligula. Proin condimentum rutrum maximus. Nunc tellus nisl, dictum vel fermentum ut, feugiat a nisi. Nam sed sapien sit amet elit egestas semper eu ut diam. Suspendisse blandit vitae metus
    porttitor cursus. Vestibulum et gravida massa. Fusce in neque sit amet lacus luctus ornare at id augue. Nam at congue ligula. Quisque eu mollis dui, eu dictum justo. Maecenas nec placerat velit. Morbi placerat, diam eu dignissim dignissim, turpis
    magna rhoncus lectus, ac interdum velit tortor sed tortor. Aliquam lobortis leo erat, vitae accumsan tortor tempus at. Sed bibendum vel justo id commodo. Nam ante nisl, consectetur a elit vel, imperdiet suscipit justo. Etiam sit amet cursus odio.
    Nam id volutpat sapien. In pellentesque a nisi sit amet efficitur. Maecenas fringilla libero sit amet aliquet mattis. Nullam risus mauris, porttitor eget eros quis, commodo cursus elit. Integer eros justo, iaculis luctus quam vel, fermentum luctus
    orci. Quisque aliquam rutrum facilisis.
  </p>

  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>Some text in the Modal..</p>
      <button onClick="printPage();">print</button>
    </div>

  </div>
</div>

此问题的快速解决方法是隐藏除模式之外的所有内容，添加以下 CSS：

@media print {
  body * {
    display: none !important;
  }
  .modal,
  .modal * {
    display: block !important;
  }
}

当您打印然后添加模态以使其变得可见时，这将使体内的所有内容都不可见。如果您不想始终拥有此功能，您可以基于 CSS 类（如 

.noPrint
和 
.print
）更改显示，然后当您想要打印某些内容时通过 JS 添加和删除这些类。

这是最终功能的示例：

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

function printPage() {
  window.print();
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@media print {
  .fakeBody * {
    display: none !important;
  }
  .modal,
  .modal * {
    display: block !important;
  }
  .modal {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
  }
  .modal-content {
    visibility: visible !important;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
  }
}
<div class="fakeBody">
  <button id="myBtn">Open Modal</button>
  <p class="everything">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec justo sodales, rhoncus dui at, pretium nulla. Curabitur venenatis ut turpis quis viverra. Suspendisse ac nisi malesuada, aliquam lorem vel, pellentesque dolor. Maecenas dignissim ultrices
    turpis ut eleifend. Sed volutpat nibh a tellus congue auctor. Sed scelerisque urna vitae tellus pulvinar porta at at est. Pellentesque sit amet facilisis mauris, vel dignissim felis. Mauris mattis nunc mauris, sed eleifend risus egestas vitae. Suspendisse
    nec molestie lectus. Etiam at enim lacinia, sollicitudin odio id, posuere justo. Phasellus elit lectus, venenatis eu velit eget, aliquet luctus neque. Duis tristique blandit lacus, nec rhoncus dui ornare vel. Nulla id fringilla justo, in mattis nisi.
    Maecenas a dui tempus, rutrum odio sed, molestie turpis. Aliquam tempor leo sed ligula interdum iaculis sed ac nunc. Suspendisse sit amet porta tellus. Morbi et quam vestibulum, accumsan risus id, iaculis libero. Donec condimentum dapibus elit, vel
    hendrerit lectus auctor vel. Vivamus vehicula, dolor eget lacinia sagittis, justo purus venenatis leo, vitae imperdiet nisi eros id leo. Quisque sed bibendum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    Suspendisse tristique, metus ac suscipit consequat, metus enim iaculis nibh, efficitur dignissim lorem libero sed erat. Morbi in tortor ultrices leo finibus vestibulum. Donec eget lacinia enim. Mauris hendrerit commodo dapibus. Sed vulputate est commodo,
    egestas arcu eu, tristique leo. Sed velit enim, fringilla non tristique malesuada, fringilla non erat. Nulla euismod in nisi non auctor. Maecenas in tempus magna. Maecenas at velit luctus, fringilla lacus in, scelerisque magna. Pellentesque ac tempus
    risus, sit amet ultricies libero. Proin sed gravida augue, quis egestas enim. Suspendisse ac aliquet nibh, quis elementum elit. Vestibulum leo sapien, eleifend ut consectetur eu, mattis vel dolor. Integer nulla erat, tempus nec quam eget, pharetra
    porta dui. In laoreet aliquam porttitor. Praesent tortor est, dignissim vel scelerisque ac, pellentesque a ipsum. Aenean maximus leo vel lacus mattis, sit amet dignissim enim sodales. Phasellus ac mauris sit amet ante sollicitudin elementum. Donec
    quis maximus mi. Nullam vitae purus ac odio fermentum cursus et sed urna. Pellentesque condimentum tellus ex, et convallis felis eleifend at. Pellentesque et sem ac ipsum pellentesque sagittis. Quisque ut ipsum fermentum, egestas leo ac, accumsan
    lacus. Pellentesque aliquet tellus vel tortor venenatis blandit. Etiam ultrices id magna ut tristique. Sed ac urna vel nibh auctor aliquet. Donec sollicitudin iaculis rutrum. Ut nec augue accumsan, dapibus dolor quis, finibus nisi. Mauris lectus elit,
    efficitur ultricies sollicitudin nec, pretium sed dui. Phasellus sagittis iaculis ligula et iaculis. Aenean dictum nisl et odio pulvinar dictum. Phasellus condimentum massa ipsum, at congue quam egestas vitae. Integer enim mauris, fringilla sit amet
    tempor scelerisque, tincidunt eget ligula. Proin condimentum rutrum maximus. Nunc tellus nisl, dictum vel fermentum ut, feugiat a nisi. Nam sed sapien sit amet elit egestas semper eu ut diam. Suspendisse blandit vitae metus porttitor cursus. Vestibulum
    et gravida massa. Fusce in neque sit amet lacus luctus ornare at id augue. Nam at congue ligula. Quisque eu mollis dui, eu dictum justo. Maecenas nec placerat velit. Morbi placerat, diam eu dignissim dignissim, turpis magna rhoncus lectus, ac interdum
    velit tortor sed tortor. Aliquam lobortis leo erat, vitae accumsan tortor tempus at. Sed bibendum vel justo id commodo. Nam ante nisl, consectetur a elit vel, imperdiet suscipit justo. Etiam sit amet cursus odio. Nam id volutpat sapien. In pellentesque
    a nisi sit amet efficitur. Maecenas fringilla libero sit amet aliquet mattis. Nullam risus mauris, porttitor eget eros quis, commodo cursus elit. Integer eros justo, iaculis luctus quam vel, fermentum luctus orci. Quisque aliquam rutrum facilisis.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec justo sodales, rhoncus dui at, pretium nulla. Curabitur venenatis ut turpis quis viverra. Suspendisse ac nisi malesuada, aliquam lorem vel, pellentesque dolor. Maecenas dignissim
    ultrices turpis ut eleifend. Sed volutpat nibh a tellus congue auctor. Sed scelerisque urna vitae tellus pulvinar porta at at est. Pellentesque sit amet facilisis mauris, vel dignissim felis. Mauris mattis nunc mauris, sed eleifend risus egestas vitae.
    Suspendisse nec molestie lectus. Etiam at enim lacinia, sollicitudin odio id, posuere justo. Phasellus elit lectus, venenatis eu velit eget, aliquet luctus neque. Duis tristique blandit lacus, nec rhoncus dui ornare vel. Nulla id fringilla justo,
    in mattis nisi. Maecenas a dui tempus, rutrum odio sed, molestie turpis. Aliquam tempor leo sed ligula interdum iaculis sed ac nunc. Suspendisse sit amet porta tellus. Morbi et quam vestibulum, accumsan risus id, iaculis libero. Donec condimentum
    dapibus elit, vel hendrerit lectus auctor vel. Vivamus vehicula, dolor eget lacinia sagittis, justo purus venenatis leo, vitae imperdiet nisi eros id leo. Quisque sed bibendum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
    per inceptos himenaeos. Suspendisse tristique, metus ac suscipit consequat, metus enim iaculis nibh, efficitur dignissim lorem libero sed erat. Morbi in tortor ultrices leo finibus vestibulum. Donec eget lacinia enim. Mauris hendrerit commodo dapibus.
    Sed vulputate est commodo, egestas arcu eu, tristique leo. Sed velit enim, fringilla non tristique malesuada, fringilla non erat. Nulla euismod in nisi non auctor. Maecenas in tempus magna. Maecenas at velit luctus, fringilla lacus in, scelerisque
    magna. Pellentesque ac tempus risus, sit amet ultricies libero. Proin sed gravida augue, quis egestas enim. Suspendisse ac aliquet nibh, quis elementum elit. Vestibulum leo sapien, eleifend ut consectetur eu, mattis vel dolor. Integer nulla erat,
    tempus nec quam eget, pharetra porta dui. In laoreet aliquam porttitor. Praesent tortor est, dignissim vel scelerisque ac, pellentesque a ipsum. Aenean maximus leo vel lacus mattis, sit amet dignissim enim sodales. Phasellus ac mauris sit amet ante
    sollicitudin elementum. Donec quis maximus mi. Nullam vitae purus ac odio fermentum cursus et sed urna. Pellentesque condimentum tellus ex, et convallis felis eleifend at. Pellentesque et sem ac ipsum pellentesque sagittis. Quisque ut ipsum fermentum,
    egestas leo ac, accumsan lacus. Pellentesque aliquet tellus vel tortor venenatis blandit. Etiam ultrices id magna ut tristique. Sed ac urna vel nibh auctor aliquet. Donec sollicitudin iaculis rutrum. Ut nec augue accumsan, dapibus dolor quis, finibus
    nisi. Mauris lectus elit, efficitur ultricies sollicitudin nec, pretium sed dui. Phasellus sagittis iaculis ligula et iaculis. Aenean dictum nisl et odio pulvinar dictum. Phasellus condimentum massa ipsum, at congue quam egestas vitae. Integer enim
    mauris, fringilla sit amet tempor scelerisque, tincidunt eget ligula. Proin condimentum rutrum maximus. Nunc tellus nisl, dictum vel fermentum ut, feugiat a nisi. Nam sed sapien sit amet elit egestas semper eu ut diam. Suspendisse blandit vitae metus
    porttitor cursus. Vestibulum et gravida massa. Fusce in neque sit amet lacus luctus ornare at id augue. Nam at congue ligula. Quisque eu mollis dui, eu dictum justo. Maecenas nec placerat velit. Morbi placerat, diam eu dignissim dignissim, turpis
    magna rhoncus lectus, ac interdum velit tortor sed tortor. Aliquam lobortis leo erat, vitae accumsan tortor tempus at. Sed bibendum vel justo id commodo. Nam ante nisl, consectetur a elit vel, imperdiet suscipit justo. Etiam sit amet cursus odio.
    Nam id volutpat sapien. In pellentesque a nisi sit amet efficitur. Maecenas fringilla libero sit amet aliquet mattis. Nullam risus mauris, porttitor eget eros quis, commodo cursus elit. Integer eros justo, iaculis luctus quam vel, fermentum luctus
    orci. Quisque aliquam rutrum facilisis.
  </p>

  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>Some text in the Modal..</p>
      <button onClick="printPage();">print</button>
    </div>
  </div>

</div>

0
投票

对于仍然有此问题的任何人，问题可能是您有一个包装元素，例如html、body、div 等，带有“高度”或“最小高度”设置，将打印推到 2 页上。

例如最小高度：100vh

由于某种原因，浏览器决定再次打印相同的模式，而不是仅仅打印第二个空白页。

您可以应用以下命令来删除 html 和 body 标签的高度。在这里也添加任何其他设置了高度的元素。

@media print {
    body,
    html {
        height: unset !important;
        min-height: unset !important;
    }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.