javascript - window.print() 在每一页上重复模态

Question

我正在尝试使用 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;    
  }
}

Answer 1

当有一个打印屏幕时，它总是显示所有的 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;
  }
}

这将使打印时 body 内的所有内容都不可见，然后添加模态使其可见。如果您不想始终拥有此功能，您可以根据 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>