以全屏疊加方式打印文字？
[英]Print text in a full-screen overlay?
問題描述
當覆蓋圖打開並按下打印按鈕時，是否可以在全屏覆蓋中打印文本？ 目前似乎排除了疊加層中的某些文本，當按下打印按鈕時，它只打印一頁。
如果可以提供一個新的小提琴，我將非常感激，因為我還是新編碼。
謝謝！
body { margin: 0; font-family: 'Lato', sans-serif; } .overlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #fff; overflow-x: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 2%; width: 100%; text-align: center; margin-top: 30px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .closebtn { position: absolute; top: 2%; right: 45px; font-size: 60px !important; } @media screen and (max-height: 450px) { .overlay a {font-size: 20px} .closebtn { font-size: 40px !important; top: 15px; right: 35px; } }
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="overlay" id="myNav"> <a class="closebtn" href="javascript:void(0)" onclick= "closeNav()">×</a> <div class="overlay-content"> <button onclick="myFunction2()">Print Contents of Overlay</button> <hr> <script> function myFunction2() { window.print(); } </script> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis, arcu at convallis mollis, urna lectus auctor diam, eget cursus ante quam at dui. Vivamus feugiat vel odio nec sagittis. Donec volutpat odio sit amet turpis semper, laoreet ullamcorper neque maximus. Maecenas condimentum eget arcu vitae lacinia. Nulla ut quam a ante tristique tristique. Nulla placerat sem sit amet orci mattis, eu dapibus risus tristique. Quisque finibus odio eu sodales gravida. Donec mollis scelerisque consequat. Praesent eget pharetra arcu, eget cursus neque. Etiam pretium aliquam metus, sit amet lobortis velit consectetur non. Nullam placerat diam leo, non aliquam mi laoreet in. Suspendisse potenti. In hac habitasse platea dictumst. In in porttitor risus. Ut porta enim vitae arcu pretium hendrerit. Cras efficitur, est vel placerat faucibus, nunc felis consequat quam, sed congue arcu eros quis quam. Fusce tempor rhoncus suscipit. Morbi ac eros id sapien suscipit dictum laoreet non elit. Aliquam auctor, risus eget posuere iaculis, enim metus bibendum nisi, eu finibus est justo et velit. Suspendisse lacinia sit amet odio et lacinia. Praesent lectus ipsum, tempus in nibh at, egestas facilisis justo. Donec ac lectus mauris. Fusce a bibendum magna. Vestibulum feugiat risus quis rutrum commodo. Donec erat ligula, semper sodales ex eu, sollicitudin blandit tellus. Quisque massa quam, fringilla suscipit tellus sed, porta suscipit augue. Sed feugiat commodo leo, sodales aliquet sem aliquet non. Ut finibus fringilla mi ut maximus. Nunc tincidunt, ipsum sit amet auctor fringilla, nulla felis bibendum tellus, eget bibendum velit nibh at quam. Fusce faucibus ipsum arcu. Nunc volutpat risus orci, vel maximus nibh egestas luctus. Morbi ut volutpat sem, nec porttitor purus. Vivamus non molestie turpis, nec maximus lorem. Praesent id ex ac tellus vehicula sagittis. Quisque ultrices venenatis augue quis gravida. Maecenas sit amet libero est. Sed quis ante magna. Pellentesque eleifend, orci quis pellentesque laoreet, massa felis faucibus dui, id pellentesque metus urna ac orci. Phasellus sit amet lectus quam. Duis mollis a dolor eget feugiat. Cras gravida libero lacus, id posuere augue congue vel. Nullam eget condimentum orci, quis tempor neque. Praesent nec iaculis ligula. Donec ante lectus, elementum et purus a, convallis rutrum leo. Morbi nisl massa, iaculis molestie odio sed, malesuada suscipit ligula. Phasellus congue orci luctus, sollicitudin tortor nec, scelerisque felis. In quis feugiat dolor, in dignissim dolor. Sed imperdiet dui sed mattis ullamcorper. Maecenas quis lectus ut nisl auctor luctus. Aenean at pulvinar leo. Fusce mollis sollicitudin ante sit amet luctus. Vestibulum interdum risus et placerat malesuada. In id ultricies erat, eu mattis libero. Sed a consequat dui, pulvinar cursus justo. Vivamus mollis egestas diam quis varius. Proin quis neque elit. Nam at magna sed justo congue posuere. In ut magna in eros facilisis dapibus. Cras libero nisi, iaculis nec gravida fermentum, porttitor ac enim.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis, arcu at convallis mollis, urna lectus auctor diam, eget cursus ante quam at dui. Vivamus feugiat vel odio nec sagittis. Donec volutpat odio sit amet turpis semper, laoreet ullamcorper neque maximus. Maecenas condimentum eget arcu vitae lacinia. Nulla ut quam a ante tristique tristique. Nulla placerat sem sit amet orci mattis, eu dapibus risus tristique. Quisque finibus odio eu sodales gravida. Donec mollis scelerisque consequat. Praesent eget pharetra arcu, eget cursus neque. Etiam pretium aliquam metus, sit amet lobortis velit consectetur non. Nullam placerat diam leo, non aliquam mi laoreet in. Suspendisse potenti. In hac habitasse platea dictumst. In in porttitor risus. Ut porta enim vitae arcu pretium hendrerit. Cras efficitur, est vel placerat faucibus, nunc felis consequat quam, sed congue arcu eros quis quam. Fusce tempor rhoncus suscipit. Morbi ac eros id sapien suscipit dictum laoreet non elit. Aliquam auctor, risus eget posuere iaculis, enim metus bibendum nisi, eu finibus est justo et velit. Suspendisse lacinia sit amet odio et lacinia. Praesent lectus ipsum, tempus in nibh at, egestas facilisis justo. Donec ac lectus mauris. Fusce a bibendum magna. Vestibulum feugiat risus quis rutrum commodo. Donec erat ligula, semper sodales ex eu, sollicitudin blandit tellus. Quisque massa quam, fringilla suscipit tellus sed, porta suscipit augue. Sed feugiat commodo leo, sodales aliquet sem aliquet non. Ut finibus fringilla mi ut maximus. Nunc tincidunt, ipsum sit amet auctor fringilla, nulla felis bibendum tellus, eget bibendum velit nibh at quam. Fusce faucibus ipsum arcu. Nunc volutpat risus orci, vel maximus nibh egestas luctus. Morbi ut volutpat sem, nec porttitor purus. Vivamus non molestie turpis, nec maximus lorem. Praesent id ex ac tellus vehicula sagittis. Quisque ultrices venenatis augue quis gravida. Maecenas sit amet libero est. Sed quis ante magna. Pellentesque eleifend, orci quis pellentesque laoreet, massa felis faucibus dui, id pellentesque metus urna ac orci. Phasellus sit amet lectus quam. Duis mollis a dolor eget feugiat. Cras gravida libero lacus, id posuere augue congue vel. Nullam eget condimentum orci, quis tempor neque. Praesent nec iaculis ligula. Donec ante lectus, elementum et purus a, convallis rutrum leo. Morbi nisl massa, iaculis molestie odio sed, malesuada suscipit ligula. Phasellus congue orci luctus, sollicitudin tortor nec, scelerisque felis. In quis feugiat dolor, in dignissim dolor. Sed imperdiet dui sed mattis ullamcorper. Maecenas quis lectus ut nisl auctor luctus. Aenean at pulvinar leo. Fusce mollis sollicitudin ante sit amet luctus. Vestibulum interdum risus et placerat malesuada. In id ultricies erat, eu mattis libero. Sed a consequat dui, pulvinar cursus justo. Vivamus mollis egestas diam quis varius. Proin quis neque elit. Nam at magna sed justo congue posuere. In ut magna in eros facilisis dapibus. Cras libero nisi, iaculis nec gravida fermentum, porttitor ac enim.</p> </div> </div><span onclick="openNav()" style="cursor:pointer">Click to open overlay</span> <script> function openNav() { document.getElementById("myNav").style.width = "100%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; } </script> </body> </html>
請注意：代碼的某些部分是由W3Schools提供的。
1 個解決方案
解決方案1
2 2016-04-06 07:15:34
我已經更換了打印功能，如下所示。 更新了小提琴 。
function myFunction2() {
var printContents = document.getElementsByClassName('overlay-content')[0].innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
無法在全屏覆蓋模式內居中圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.