طباعة عناصر في صفحة ASPX

السلام عليكم ورحمة الله..

فكرة الدرس :

كثيرا ما صادفت اسئلة حول طباعة DataGrid أو DataLst أو حتى صورة موجودة على صفحة ASPX

وسأطرح هنا حلا جيدا لهذه المسألة أرجو أن يكون هذا الحل جيدا :rolleyes: ..

طريقة العمل :

سوف يتم طباعة الأدوات في صفحة جديدة مع زرين فقط هما Print و Cancel

الخطوات :

1. انشئ صفحة ASPX جديدة ثم انسخ هذا الكود في صفحة HTML ضمن خانة <Form> الخاصة بها:

	<DIV id="PrintDiv" style="DISPLAY: inline; Z-INDEX: 101; LEFT: 136px; WIDTH: 73.38%; POSITION: absolute; TOP: 104px; HEIGHT: 232px"
	align="center" ms_positioning="FlowLayout">
	<P>
	 <asp:ListBox id="ListBox1" runat="server" BackColor="#FFE0C0" Width="176px" Height="200px">
	  <asp:ListItem Value="Nokia">Nokia</asp:ListItem>
	  <asp:ListItem Value="Ericsson">Ericsson</asp:ListItem>
	  <asp:ListItem Value="Seminse">Seminse</asp:ListItem>
	  <asp:ListItem Value="Motorola">Motorola</asp:ListItem>
	 </asp:ListBox></P>
   </DIV>
   <INPUT type="button" value="Button" onclick="getPrint('PrintDiv');" style="Z-INDEX: 103; LEFT: 408px; WIDTH: 160px; POSITION: absolute; TOP: 376px; HEIGHT: 24px">

تعليق : اذا رجعت الى صفحة التصميم فستجد ان لديك عنصران ( InputButton و ListBox )

2. في خانة <Head> اضف هذا السكربت

  <script language="javascript">
<!--

  function getPrint(print_area)
  { 
   //Creating new page
   var pp = window.open();
   //Adding HTML opening tag with <HEAD> … </HEAD> portion 
   pp.document.writeln('<HTML><HEAD><title>Print Preview</title><LINK href=Styles.css  type="text/css" rel="stylesheet">')
   pp.document.writeln('<LINK href=PrintStyle.css  type="text/css" rel="stylesheet" media="print"><base target="_self"></HEAD>')
   //Adding Body Tag
   pp.document.writeln('<body MS_POSITIONING="GridLayout" bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0">');
   //Adding form Tag
   pp.document.writeln('<form  method="post">');
   //Creating two buttons Print and Close within a table
   pp.document.writeln('<TABLE width=100%><TR><TD></TD></TR><TR><TD align=right><INPUT ID="PRINT" type="button" value="Print" onclick="java script:location.reload(true);window.print();"><INPUT ID="CLOSE" type="button" value="Close" onclick="window.close();"></TD></TR><TR><TD></TD></TR></TABLE>');
   //Writing print area of the calling page
   pp.document.writeln(document.getElementById(print_area).innerHTML);
   //Ending Tag of </form>, </body> and </HTML>
   pp.document.writeln('</form></body></HTML>');   

  }  


//-->
  </script>

3. الآن جرب الطريقة واضغط على الزر .. ماذا تلاحظ .. :blink:

ملخص :

العملية وما فيها انه تم انشاء صفحة جديدة كليا باستخدام الجافا سكربت وتم اضافة زرين فيها ايضا عن طريق الجافا سكربت ،، مع نسخ الموجود داخل النموذج المسمى PrintDiv

ملاحظة :

الآن يمكنك استبدال الـ listView الموجود في الصفحة بأي اداة أردت .. وستجد الطريقة ذانها

المثال في المرفقات

أدعو لي

printedASPX.rar

طباعة عناصر في صفحة ASPX

مواضيع مشابهة