افزودن قابلیت پرینت به صفحات وب سایت

دکمه چاپ صفحات وب سایت یکی از قابلیت هایی است که بر حسب نیاز و نوع محتوا می تواند به وب سایت شما افزوده شود. شاید برخی از کاربران از نحوه پرینت گرفتن توسط امکانات پیش فرض مرورگر خود بی اطلاع باشند و نتوانند محل دکمه Print (کلید میانبر Ctrl+P) را به راحتی پیدا کنند و یا اینکه دکمه چاپ پیش فرض در مرورگر علاوه بر متن اصلی مورد نظر آنها، عناصر غیر ضروری دیگری مانند منوها، تبلیغات و غیره را در نسخه پرینت نشان میدهد. در این شرایط وجود یک دکمه پرینت که محتوای اصلی صفحه را تمیز و مرتب برای چاپ در اختیار آنها قرار دهد، کاربر را از سردرگمی و یا کارهای زمانبر نجات خواهد داد. در این آموزش چگونگی انجام اینکار توسط کدهای CSS و جاوااسکریپت نشان خواهم داد.

روش های استفاده شده برای چاپ صفحات وب زیاد هستند اما شما به دو طریق ساده می توانید محتوای بخش های مورد نظر خود را در نسخه قابل چاپ نمایش دهید:

روش اول : در این روش شما بخش های اضافه که نمی خواهید در نسخه چاپی ظاهر شوند را شناسایی و در یک فایل Css به طریقی که در ادامه شرح خواهم داد معرفی و حذف خواهید کرد. سپس بخش های باقیمانده را در همان فایل CSS برای چاپ با ظاهر دلخواه استایل دهی می کنیم. سپس توسط کد جاوااسکریپت محتوای باقیمانده برای چاپ ارسال می شوند. این روش رایجترین راه اضافه کردن قابلیت پرینت به وبسایتها است.

فایل CSS

ابتدا تمامی استایل هایی را که میخواهید بر روی نسخه چاپی اعمال شود را در یک فایل CSS جداگانه نوشته و به صورت زیر به بخش header کدهای صفحه وب خود آن را ضمیمه نمائید:


نکته قابل توجه در خط بالا پارامتر media="print" می باشد. این پارامتر به صفحه وب سایت ما میگوید که فایل css ضمیمه شده تنها برای استایل دهی عناصر نسخه پرینت می باشد و در سایر موارد از استایل های اصلی صفحه استفاده شود.

توجه کنید برای حذف عناصری که نمی خواهید در نسخه پرینت نشان داده شوند باید با استفاده از id و یا class مربوط به آن عنصر، با نوشتن دستور زیر آن را در صفحه پرینت مخفی نمائید. این دستورات در فایل css مربوط به پرینت نوشته می شوند:

.adverise {
	display: none;
}

دستور فوق تمامی عناصر تبلیغاتی که دارای خصیصه class="adverise " هستند را مخفی میکند.

کدهای HTML

اکنون نیاز به دکمه ای داریم که با کلیک بر روی آن عملیات چاپ آغاز شود. برای این منظور از کد زیر استفاده می کنیم:

چاپ این صفحه!

در صورت تمایل میتوانید یک عکس و یا آیکون مربوط به دکمه پرینت در کد فوق استفاده کنید. اکنون با کلیک کردن روی لینک ساخته شده صفحه پرینت مرورگر باز شده و پس از دیدن پیش نمایش کاربر میتواند اقدام به چاپ صفحه نماید.

روش دوم: در این روش شما تنها بخشی از صفحه وب را که می خواهید در نسخه چاپی نمایش داده شود را توسط کد جاوااسکریپت انتخاب کرده و برای چاپ نهایی ارسال می کنید. به عنوان مثال هنگامی که می خواهید محتوای داخل یک کادر و یا یک عنصر HTML مانند div را برای چاپ ارسال کنید میتوانید از این روش استفاده کنید.

کدهای جاوااسکریپت و جی کوئری

این کدها در بخش header سایت و در بین تگهای مربوط به کدهای جاوااسکریپت قرار داده میشوند. توجه کنید که فایل مربوط به کتابخانه جی کوئری نیز باید در هدر سایت قرار داده شود:

    function PrintElem(elem)
    {
        Popup($(elem).html());
    }

    function Popup(data) 
    {
        var mywindow = window.open('', 'my div', 'height=400,width=600');
        mywindow.document.write('my div');
        mywindow.document.write(''); /*افزودن سی اس اس به صفحه پرینت*/
        mywindow.document.write('');
        mywindow.document.write(data);
        mywindow.document.write('');

        mywindow.print();
        mywindow.close();

        return true;
    }

کدهای HTML

دکمه مربوط به چاپ به شکل زیر در محل مورد نظر شما در بین کدهای html سایت قرار داده می شود:


توجه کنید در کد بالا id عنصر div که می خواهیم محتوای داخل آن چاپ شود به صورت پارامتر در رویداد onclick نوشته شده است. اکنون اگر به یک عنصر div به صورت id="mydiv" پارامتر id را اختصاص دهیم، محتویات داخل آن برای چاپ ارسال خواهد شد. به عنوان مثال در کد زیر فقط محتویات عنصر div اولی در چاپ ظاهر خواهد شد:

محتویات این بخش در چاپ نمایش داده خواهد شد.
این متن در چاپ وجود ندارد

معرفی سرویس آنلاین چاپ و پرینت صفحات وب به صورت فیزیکی یا PDF

آموزش چاپ صفحات وب سایت

در پایان یک سرویس آنلاین برای افزودن امکان چاپ صفحات به نام printfriendly برای دوستداران سرویس های آنلاین معرفی میکنم. این سرویس علاوه بر اینکه با دادن آدرس صفحه وب مورد نظر شما نسخه چاپی آن را در فرمت های مختلف آماده می کند، به شما امکان قرار دادن دکمه پرینت با سایزها و اشکال مختلف در وبسایتتان را نیز می دهد. همچنین شما می توانید نسخه pdf صفحات موردنظر خود را نیز از این سرویس تهیه کنید. برای استفاده از این سرویس در وبسایت خود در منوی بالای این وبسایت روی گزینه Website Button کلیک کرده و پس از انتخاب ویژگی های مورد نظر خود کد تولید شده را در وبسایت خود قرار دهید.

Loading