Asp javascript ile sayfanın istenilen kısmını Print etmek

Muhammet Ali
31 Aralık 2015 Perşembe
3

Merhaba arkadaşlar

Bir web projemizde sayfamızın çıktısını almak isteyebiliriz.Bunu ctrl+p kısayolu ile yaptığımızda sayfanın tümünü alacaktır.Peki biz sayfanın belli bir alanını print yapmak istediğimizde nasıl yapabiliriz bunu göreceğiz.Bunun için sayfaya bir tane çıktı almak için tıklayacağımız button atıyoruz.

  <button type="button" id="btnPrint" class="btn btn-default btn-sm mar-top pull-right"><i class="fa fa-print"></i>Listeyi Yazdır</button>

daha sonra yazdırmak istediğimiz kısmı divler arasına alıcağız.Ve bu div i javascriptimize vererek bunun print işleminde kullanılmasında sağlayacağız.Aşağıda yazdırmak istediğimiz kısmı (print_div) id si ile bir div içine aldık.

<div id="print_div" >
    <h3><asp:Label ID="lblAd" runat="server" Text="Print alınacak kısım" /></h3>
</div>

daha sonra sayfamızın head kısmına Javascript kodumuzu yazıyoruz.Bu kod kısmı özet olarak btnPrint id sine sahip button,clik edildiğinde print_div id li divi al ve printe yolla demek.

<script src="../../js/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnPrint").click(function () {
                var contents = $("#print_div").html();
                var frame1 = $('<iframe />');
                frame1[0].name = "frame1";
                frame1.css({ "position": "absolute"});
                $("body").append(frame1);
                var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
                frameDoc.document.open();
                //Create a new HTML document.
                frameDoc.document.write('<html><head><title>KULLANICI LİSTESİ</title>');
                frameDoc.document.write('</head><body>');
                //Append the external CSS file.
                frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" media="print" />');
                //Append the DIV contents.
                frameDoc.document.write(contents);
                frameDoc.document.write('</body></html>');
                frameDoc.document.close();
                setTimeout(function () {
                    window.frames["frame1"].focus();
                    window.frames["frame1"].print();
                    frame1.remove();
                }, 500);

            });
        });
    </script>

Burda dikkat edilmesi gereken en önemli şeyde JS kodumuzun en üst kısmında bulunan "jquery-1.8.2.js" kütüphanesini projeye entegre etmemiz gerekli.Bu kütüphaneyi buraya tıklayarak indirebilirsiniz.

Bu dosyayı indirdikten sonra projemiz Visual Studio da açıkkan js lerinizin bulunduğu kısma sürüklüyerek atınız.Daha sonra bu kütüphanenin yolunu JS kodumuzun en üstünde bulunan "<script src="../../js/jquery-1.8.2.js"></script>" kısma veriniz.Bunu en kısa şekilde dosyayı projemize attıktan sonra,Solition Explorer dan tekrar tutup JS kodumuzun en üstüne tutup sürükler isinez yolunu direk vericektir.Böylece yol hatası almanız azalır.

Daha sonra projemizde bu butonunu tıklarayarak print ekranına gidebilir ve sadece belirttiğiniz kısmı çıktı alabilirsiniz.

Aşağıda örnek olarak kullanılmış resimleri inceleyebilirsiniz.

İyi Çalışmalar.



yorumlar
64x64

Ali

8 Ocak 2017 Pazar

<script src="../../js/jquery-1.8.2.js"></script>

dosyası linkini bulamadım güncelleyebilirmisiniz.

64x64

Muhammet Ali

11 Ocak 2017 Çarşamba

Merhaba Ali

Script i aşağıdaki gibi ekleyip kullanabilirsin.

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>

Herhangi bir sorun yaşarsan dosya şeklindede paylaşabilirim.

İyi çalışmalar

 

64x64

caran

13 Nisan 2017 Perşembe

direk olarak nasıl yazdırabiliriz?

Yorum yaz