HTML sayfada javascript ile div print

Merhaba arkadaşlar,

Bugün ki konumuz html bir sayfa içerisinde sadece belli bir div'in javascript kodları ile print alınmasını sağlamak. Kendim böyle bir sorun yaşadığım için bulduğum bilgileri sizler için derledim. Ekteki dosyadan html olarak örneği inidrebilirsiniz. Öncelikle html sayfamıza bir adet div ekliyoruz ve div'imizin id'sini belirliyoruz. Biz şimdilik "printableDiv" diyelim.

        <div id="printableDiv">
             Merhaba Dünya...
        </div>

Şimdi javascript kodlarımızı yazalım; burda önemli nokta şudur. Browser'ınızın popup engelleyicisinin kapalı olması gerekmektedir. Çünkü aşağıda yaptığımız işlem doğrultusunda yukarıda yazmış olduğumuz div'in popup olarak farklı bir pencerede açıp o pencerenin yazma işlemini gerçekleştirme yoluna gideceğiz.


      <script language="javascript" type="text/javascript">
          function PrintEtBakalim(strid) {
              var prtContent = document.getElementById(strid);
              var WinPrint = window.open('', '', 'letf=0,top=0,toolbar=0,sta­tus=0,scrollbars=1');
              WinPrint.document.write(prtContent.innerHTML);
              WinPrint.document.close();
              WinPrint.focus();
              WinPrint.print();
          }
    </script>

Şimdi sıra butonumuzu hazırlamada bir adet image objesi koyuyoruz ve "onclick" eventini dolduruyoruz. Bu benim butonum artık siz nasıl bişey yaparsınız bilemem :D

<img alt="" src="images/printcurrentpage.png" onclick="PrintEtBakalim('printableDiv')" value="sdf" style="cursor: pointer"/>


Örnek programı buradan indirebilirsiniz.

Umarım yardımcı olabilmişimdir.

Kolay Gelsin
Aslı YILMAZ DEMİRBAŞ









Yorumlar

Bu blogdaki popüler yayınlar

Android Geliştirme Ortamı Kurulumu

C# ile Progress Bar ve Timer Kullanımı

varchar ve nvarchar arasındaki fark