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.
.png)
İyi Çalışmalar.