آموزش چاپ یک 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;

 

 
        }

 

 می توانید فایل نمونه را از این لینک دریافت نمایید:

دانلود

 

هاست ویندوز ارزان
نظرات
کد تخفیف اولین سفارش