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

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

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

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

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

فایل CSS

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

1	`<link` `rel="stylesheet"` `href="Print.css"` `type="text/css"` `media="print">`

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

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

1

2

3

.adverise {
    display: none;
}

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

کدهای HTML

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

1	`<a` `href="javascript:window.print()">چاپ این صفحه!</a>`

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

روش دوم: در این روش شما تنها بخشی از صفحه وب را که می خواهید در نسخه چاپی نمایش داده شود را توسط کد جاوااسکریپت انتخاب کرده و برای چاپ نهایی ارسال می کنید. به عنوان مثال هنگامی که می خواهید محتوای داخل یک کادر و یا یک عنصر 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('<title>my div</title>');
    mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css">'); /*افزودن سی اس اس به صفحه پرینت*/
    mywindow.document.write('');
    mywindow.document.write(data);
    mywindow.document.write('');
 
    mywindow.print();
    mywindow.close();
 
    return true;
}

کدهای HTML

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

1	`<input` `type="button"` `value="Print Div"` `onclick="PrintElem('#mydiv')">`

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

1

2

3

4

5

6

<div id="mydiv">
محتویات این بخش در چاپ نمایش داده خواهد شد.
</div>
<div>
    این متن در چاپ وجود ندارد
</div>

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

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

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

طراحی وب

۱۶۲۴ امیر اعلایی ۱ ۰

نظرات (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.

نام *

پست الکترونيک

سایت یا وبلاگ

پیام *

شما میتوانید از این تگهای html استفاده کنید:

یا ، یا ، ، <strike> یا <s>، ، ، <blockquote>، <code>، <pre>، <hr>، ، ، <a href="" title="">، ، <div align="">

نظر بصورت خصوصی ارسال شود

پست الکترونیک برای عموم قابل مشاهده باشد

درباره من

جدیدترین وبهترین دانستنیهای کامپیوتر _♥کامپیوترگل♥
بازی کلش اف کلنز
دانلود نرم افزار های جدید و کاربردی
نقد و بررسی و کدهای تقلبی بازی ها
فیلم های آموزش کامپیوتر رایانه
آموزش مبتدی تا پیشرفته
برنامه و گیم های موبایل(جاوا،اندروید،ویندوز موبایل،سیمبین)
آموزش و سورس و کامپوننت های ویژال بیسیک
آموزش برنامه نویسی
آموزش تصویری چت روم
پلاگین ها و آموزش های کل چت روم
قالب ها وپوسته ها و کد های جدیدوردپرس
طراحی سایت و وبلاگ و وبسایت
همه و همه درسایت کامپیوتر گل
کامپیـــــــــوتر گــــــــل
همیشه در کنــــــــــــــار شما ♥♥♥همیشه در خدمــــــــت شما