Merhaba arkadaşlar,
Bir çoğumuz sayfalarımızda masterpage, template ve bolca resim kullanmaktayız. Sayfalarımızı yazdırmak istediğimizde ise bunların çıkmamasını ve sadece content in yazdırılmasını isteriz.
İşte bu tarz durumlarda yazıcı dostu sayfalar hazırlayıp bunları yazdırmak isteriz.
Bu makalemizde bu yazıcı dostu sayfaları nasıl hazırlayacağımızı göreceğiz.
Bu işlem için bir javascript fonksiyonu kullanacağız. Butona basınca bu javascript çalışacak ve yeni sayfa açarak istediğimiz id li elemanı yazıcı dostu bir şekilde ekrana getirecek.
Mesela şu yapıda bir aspx.dosyamız olduğunu varsayalım.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Yazıcı Dostu Sayfa Yazdırmak..Turgay Sahtiyan</title>
<link href="myCss.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="yazdir.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="divMain">
<div id="divForm">
Form 1
<br />
<table style="width: 210px" border=1>
<tr>
<td class="style2">
<asp:Label ID="Label1" runat="server" Text="Ad"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Text="Turgay"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style2">
<asp:Label ID="Label2" runat="server" Text="Soyad"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Text="Sahtiyan"></asp:TextBox>
</td>
</tr>
</table>
<asp:Button ID="Button1" runat="server" Text="Gönder" />
<asp:Button ID="Button2" runat="server" Text="Vazgeç" />
<br /><br />
</div>
<div id="divTable1" class="yazdirma">
Tablo 1
<br />
<table style="width: 210px" border=1>
<tr>
<td class="style2">
1-1</td>
<td>
1-2</td>
</tr>
<tr>
<td class="style2">
2-1</td>
<td>
2-2</td>
</tr>
</table>
<br />
</div>
<div id="divTable2">
Tablo 2<br />
<table border=1>
<tr>
<td class="style3">
a</td>
<td class="style4">
b</td>
<td class="style5">
c</td>
</tr>
<tr>
<td class="style3">
d</td>
<td class="style4">
e</td>
<td class="style5">
f</td>
</tr>
<tr>
<td class="style3">
g</td>
<td class="style4">
h</td>
<td class="style5">
ı</td>
</tr>
</table>
</div>
<br /><br />
</div>
<asp:Button ID="print" runat="server" Text="Sayfayı Yazdır" OnClientClick="yazdir('divMain');false;"/>
</form>
</body>
</html>
Gördüğünüz gibi div ler için id kullandık. Çünkü bu id leri kullanarak istediğimiz id li elemanı yazdırabileceğiz.
Aynı zamanda göreceğiniz gibi divTable1 id li div de yazdirma diye bir class kullandık. Ve bu class sayesinde bu div yazdırılacak kısımın içinde olsa bile bunu yazdırmamayı sağlayabileceğiz.
Yani demek istediğim şu. Bir divin tamamını yazdırmak istiyoruz ama onun için de bir kısmı yazdırmak istemiyoruz. İşte bunu class ataması sayesinde halledeceğiz.
Sayfamızın yapısını şu şekilde tekrar basitçe hatırlayacak olursak.
<div id=”divMain”>
<div id="divForm">
</div>
<div id="divTable1" class="yazdirma">
</div>
<div id="divTable2">
</div>
</div>
Buton a atayacağımız kod ise şu şekilde olacak.
<asp:Button ID="print" runat="server" Text="Sayfayı Yazdır" OnClientClick="yazdir('divMain');false;"/>
Butona basıldığında divMain içeriğinin tamamı yazılacak. Ama divTable1 yazılmayacak çünkü onun class atamasında yazdırma seçili. Bu şekilde yazdırmak istemediklerimize class ataması yapabiliriz.
Mesela sadece divTable2 yi yazdıralım
<asp:Button ID="print" runat="server" Text="Sayfayı Yazdır" OnClientClick="yazdir('divTable2');false;"/>
Şimdi yazdırma işini üstlenen javascript kodumuzu inceleyelim.
function yazdir(yazdirilacakBolum) {
//Yeni bir sayfa create ediyoruz. Yazdırılacak veriyi yeni sayfada açacağız.
var pp = window.open();
//Yeni sayfaya HTML ve Head taglarını açıyoruz.
pp.document.writeln('<HTML><HEAD><title>Yazdır</title></HEAD>');
//css imizi ekliyoruz
pp.document.writeln('<LINK href=myCss.css type="text/css" rel="stylesheet">');
//head tag ını kapatıyoruz.
pp.document.writeln('</HEAD>');
//Body tag ı ekliyoruz
pp.document.writeln('<body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0">');
//Form tag ı ekliyoruz
pp.document.writeln('<form method="post">');
//yazdır ve kapat diye 2 tane buton ekliyoruz.
pp.document.writeln('<TABLE width=100%><TR><TD></TD></TR>');
pp.document.writeln('<TR><TD align=right>');
pp.document.writeln('<INPUT ID="PRINT" type="button" value="Yazdır" ');
pp.document.writeln('onclick="javascript:location.reload(true);window.print();">');
pp.document.writeln('<INPUT ID="CLOSE" type="button" value="Kapat" ');
pp.document.writeln('onclick="window.close();">');
pp.document.writeln('</TD></TR><TR><TD></TD></TR></TABLE>');
//yazdırılıcak bölümü sayfaya yazıyoruz.
//Görüldüğü gibi yazdırılacak bölümün önce child elemanlarına erişiyoruz.
//Daha sonrada bu child elemanlardan yazdirma class ı içermeyenleri alıp
//objeler adında bir değişken listesinde topluyoruz.
objeler = $("#" + yazdirilacakBolum).children().not(".yazdirma");
//objeler değişken listesine map fonksiyonu ile erişip bunları array e dönüştürüyoruz
//array dönüşen kısmında her bir elemanı için html() fonksiyonu ile
//html içeriğini alıyoruz. Bunuda documan a yazdırıyoruz.
pp.document.writeln(objeler.map(function() {
return $(this).html();
}).get().join(" ") );
//form,body ve html taglarını kapatıyoruz.
pp.document.writeln('</form></body></HTML>');
}
Evet işlemimiz bu kadar. Umarım açıklayıcı olmuştur.
Kafanıza takılan veya sormak istediğiniz herhangi bir şey olursa yorum kısmında sorabilirsiniz. En kısa sürede cevap vermeye çalışırım.
Projeyi buradan indirip inceleyebilirsiniz. YaziciDostu.zip (23,87 kb)
Kolay Gelsin
Turgay Sahtiyan
9aa64277-26b0-4cac-ab11-e266df8d6c34|4|4.0