چاپ محتوای Div با استفاده از javaScript و Jquery
دوشنبه 25 اسفند 1393در این مقاله نحوه پرینت محتوای یک Div با استفاده از JavaScript و JQuery بدون استفاده از پلاگین های JQuery را شرح میدهیم .
ما می خواهیم یک Div که از فایل Css خارجی ارثبری می کند را چاپ کند.بنابراین محتوای چاپ شده بدون استفاده از فایل Css چاپ میشود .بنابراین از طریق مراحل زیر می توانیم این مشکل را برطرف کنیم .
ابتدا یک Div که از Style خارج از صفحه ارثبری میکند اضافه میکنیم , همچنین یک دکمه برای دستور چاپ قسمت مورد نظر نیز به صفحه اضافه میکنیم :
<link href="style.css" rel="stylesheet" type="text/css" />
<div id="dvContents">
<div class="right">
<span class="label">
<a href="http://barnamenevisan.org/" title="برنامه نویسان" target="-blank">www.barnamenevisan.org</a>
</span>
</div>
<div class="clear">
</div>
<hr />
<div class="contents">
<span class="label">سلام,
<br />
به <span class="name">برنامه نویسان</span>.<br />
امیدواریم لحظات خوبی را در سایت ما سپری کنید</span>
</div>
</div>
<br />
<input type="button" id="btnPrint" value="چاپ" />
همچنین فایل Css خارجی شامل کدهای زیر میباشد :
.label
{
font-size: 10pt;
font-weight: bold;
font-family: Arial;
}
.contents
{
border: 1px dotted black;
padding: 5px;
width: 300px;
}
.name
{
color: #18B5F0;
}
.left
{
float: left;
width: 50px;
height: 50px;
}
.right
{
margin-left: 60px;
line-height:50px;
}
.clear
{
clear: both;
}
هنگامی دکمه چاپ کلیک میشود ابتدا محتوای Div استخراج میشود .سپس IFrame داینامیک ساخته میشود و محتوای Div استخراج شده در آن قرار میگیرد , سپس محتوای داخل IFrame چاپ میشود و در آخر محتوای IFrame خالی میشود و IFrame بسته میشود .
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnPrint").click(function () {
var contents = $("#dvContents").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("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>DIV Contents</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
//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>
- ASP.net
- 4k بازدید
- 6 تشکر