آموزش چاپ یک div به وسیله javascript
همیشه یکی از مهمترین نیازهای وب سایت های خبری که تولید محتوا دارند توانایی چاپ صفحات وب است ما در این بخش قصد داریم این موضوع را به وسیله javascript حل نماییم.
ابتدا یک تگ a به عنوان دکمه چاپ ایجاد میکنیم و خاصیت onclick آن را هم به صورت تکه کد زیر قرار می دهیم.
<a style="background-color:red; color:white; cursor:pointer" onclick="javascript:printDiv('printablediv')">چاپ</a>
سپس بخشی که قرار است چاپ شود که در اینجا یک div است را با شناسه printablediv ایجاد می نماییم.
<div id="printablediv" style="width: 100%; background-color: black; color:white; height: 100px; direction:rtl; text-align:center">
چاپ این بخش با موفقیت انجام شد!
</div>
در انتها تکه کد جاوا اسکریپت زیر را درون یک تگ script قرار دهید تا مقدار مورد نظر را چاپ نماید.
function printDiv(divID) {//دریافت تگ مورد نظر بر اساس شناسهvar divElements = document.getElementById(divID).innerHTML;//تمامی محتوای صفحه را دریافت می کنیمvar oldPage = document.body.innerHTML;
//تمام محتوای صفحه را خالی و تگ مورد نظر برای چاپ را درونش قرار میدهیمdocument.body.innerHTML ="<html><head><title></title></head><body>" +divElements + "</body>";
//صفحه را چاپ میکنیمwindow.print();
//محتوای صفحه را که در بالا دریافت نموده بودیم به صفحه بازمیگردانیم.document.body.innerHTML = oldPage;
}
می توانید فایل نمونه را از این لینک دریافت نمایید:
