2016-04-06 39 views
3

Bindirme açıkken ve bir yazıcı düğmesine basıldığında, metni tam ekran kaplaması olarak yazdırmak mümkün mü? Örtüdeki bazı metinlerin hariç tutulduğu ve baskı düğmesine basıldığında sadece bir sayfa basıldığı anlaşılıyor. Hala kodlama için yeni olduğum gibi Metni tam ekran bindirme?

Fiddle

yeni keman temin edilebilseydi

, çok fazla takdir edilecektir.

Teşekkür ederiz!


 

 
    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>


Lütfen dikkat: kodun bazı kısımları W3Schools'da nezaket olduğunu.

cevap

2

Yazdırma işlevini aşağıdaki gibi değiştirdim. Güncel fiddle.

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; 
}