![[-]](https://forum.romaak.ir/images/first18/collapse.png "[-]")
۹۵/۱۰/۱۷، ۰۹:۴۷ عصر
دکمه چاپ صفحات وب سایت یکی از قابلیت هایی است که بر حسب نیاز و نوع محتوا می تواند به وب سایت شما افزوده شود. شاید برخی از کاربران از نحوه پرینت گرفتن توسط امکانات پیش فرض مرورگر خود بی اطلاع باشند و نتوانند محل دکمه Print (کلید میانبر Ctrl+P) را به راحتی پیدا کنند و یا اینکه دکمه چاپ پیش فرض در مرورگر علاوه بر متن اصلی مورد نظر آنها، عناصر غیر ضروری دیگری مانند منوها، تبلیغات و غیره را در نسخه پرینت نشان میدهد. در این شرایط وجود یک دکمه پرینت که محتوای اصلی صفحه را تمیز و مرتب برای چاپ در اختیار آنها قرار دهد، کاربر را از سردرگمی و یا کارهای زمانبر نجات خواهد داد. در این آموزش چگونگی انجام اینکار توسط کدهای CSS و جاوا اسکریپت نشان خواهم داد.
روش های استفاده شده برای چاپ صفحات وب زیاد هستند اما شما به دو طریق ساده می توانید محتوای بخش های مورد نظر خود را در نسخه قابل چاپ نمایش دهید:
روش اول : در این روش شما بخش های اضافه که نمی خواهید در نسخه چاپی ظاهر شوند را شناسایی و در یک فایل Css به طریقی که در ادامه شرح خواهم داد معرفی و حذف خواهید کرد. سپس بخش های باقیمانده را در همان فایل CSS برای چاپ با ظاهر دلخواه استایل دهی می کنیم. سپس توسط کد جاوا اسکریپت محتوای باقیمانده برای چاپ ارسال می شوند. این روش رایجترین راه اضافه کردن قابلیت پرینت به وبسایتها است.
فایل CSS
ابتدا تمامی استایل هایی را که میخواهید بر روی نسخه چاپی اعمال شود را در یک فایل CSS جداگانه نوشته و به صورت زیر به بخش header کدهای صفحه وب خود آن را ضمیمه نمائید:
نکته قابل توجه در خط بالا پارامتر "media="print می باشد. این پارامتر به صفحه وب سایت ما میگوید که فایل css ضمیمه شده تنها برای استایل دهی عناصر نسخه پرینت می باشد و در سایر موارد از استایل های اصلی صفحه استفاده شود.
توجه کنید برای حذف عناصری که نمی خواهید در نسخه پرینت نشان داده شوند باید با استفاده از id و یا class مربوط به آن عنصر، با نوشتن دستور زیر آن را در صفحه پرینت مخفی نمائید. این دستورات در فایل css مربوط به پرینت نوشته می شوند:
دستور فوق تمامی عناصر تبلیغاتی که دارای خصیصه "class="adverise هستند را مخفی میکند.
کدهای HTML
اکنون نیاز به دکمه ای داریم که با کلیک بر روی آن عملیات چاپ آغاز شود. برای این منظور از کد زیر استفاده می کنیم:
در صورت تمایل می توانید یک عکس و یا آیکون مربوط به دکمه پرینت در کد فوق استفاده کنید. اکنون با کلیک کردن روی لینک ساخته شده صفحه پرینت مرورگر باز شده و پس از دیدن پیش نمایش کاربر میتواند اقدام به چاپ صفحه نماید.
روش دوم: در این روش شما تنها بخشی از صفحه وب را که می خواهید در نسخه چاپی نمایش داده شود را توسط کد جاوااسکریپت انتخاب کرده و برای چاپ نهایی ارسال می کنید. به عنوان مثال هنگامی که می خواهید محتوای داخل یک کادر و یا یک عنصر HTML مانند div را برای چاپ ارسال کنید میتوانید از این روش استفاده کنید.
کدهای جاوا اسکریپت و جی کوئری
این کدها در بخش header سایت و در بین تگهای مربوط به کدهای جاوا اسکریپت قرار داده میشوند. توجه کنید که فایل مربوط به کتابخانه جی کوئری نیز باید در هدر سایت قرار داده شود:
کدهای HTML
دکمه مربوط به چاپ به شکل زیر در محل مورد نظر شما در بین کدهای html سایت قرار داده می شود:
توجه کنید در کد بالا id عنصر div که می خواهیم محتوای داخل آن چاپ شود به صورت پارامتر در رویداد onclick نوشته شده است. اکنون اگر به یک عنصر div به صورت "id="mydiv پارامتر id را اختصاص دهیم، محتویات داخل آن برای چاپ ارسال خواهد شد. به عنوان مثال در کد زیر فقط محتویات عنصر div اولی در چاپ ظاهر خواهد شد:
معرفی سرویس آنلاین چاپ و پرینت صفحات وب به صورت فیزیکی یا PDF
در پایان یک سرویس آنلاین برای افزودن امکان چاپ صفحات به نام دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
برای دوستداران سرویس های آنلاین معرفی میکنم. این سرویس علاوه بر اینکه با دادن آدرس صفحه وب مورد نظر شما نسخه چاپی آن را در فرمت های مختلف آماده می کند، به شما امکان قرار دادن دکمه پرینت با سایزها و اشکال مختلف در وبسایتتان را نیز می دهد. همچنین شما می توانید نسخه pdf صفحات موردنظر خود را نیز از این سرویس تهیه کنید. برای استفاده از این سرویس در وبسایت خود در منوی بالای این وبسایت روی گزینه Website Button کلیک کرده و پس از انتخاب ویژگی های مورد نظر خود کد تولید شده را در وبسایت خود قرار دهید.
روش های استفاده شده برای چاپ صفحات وب زیاد هستند اما شما به دو طریق ساده می توانید محتوای بخش های مورد نظر خود را در نسخه قابل چاپ نمایش دهید:
روش اول : در این روش شما بخش های اضافه که نمی خواهید در نسخه چاپی ظاهر شوند را شناسایی و در یک فایل Css به طریقی که در ادامه شرح خواهم داد معرفی و حذف خواهید کرد. سپس بخش های باقیمانده را در همان فایل CSS برای چاپ با ظاهر دلخواه استایل دهی می کنیم. سپس توسط کد جاوا اسکریپت محتوای باقیمانده برای چاپ ارسال می شوند. این روش رایجترین راه اضافه کردن قابلیت پرینت به وبسایتها است.
فایل CSS
ابتدا تمامی استایل هایی را که میخواهید بر روی نسخه چاپی اعمال شود را در یک فایل CSS جداگانه نوشته و به صورت زیر به بخش header کدهای صفحه وب خود آن را ضمیمه نمائید:
*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *
نکته قابل توجه در خط بالا پارامتر "media="print می باشد. این پارامتر به صفحه وب سایت ما میگوید که فایل css ضمیمه شده تنها برای استایل دهی عناصر نسخه پرینت می باشد و در سایر موارد از استایل های اصلی صفحه استفاده شود.
توجه کنید برای حذف عناصری که نمی خواهید در نسخه پرینت نشان داده شوند باید با استفاده از id و یا class مربوط به آن عنصر، با نوشتن دستور زیر آن را در صفحه پرینت مخفی نمائید. این دستورات در فایل css مربوط به پرینت نوشته می شوند:
*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *
دستور فوق تمامی عناصر تبلیغاتی که دارای خصیصه "class="adverise هستند را مخفی میکند.
کدهای HTML
اکنون نیاز به دکمه ای داریم که با کلیک بر روی آن عملیات چاپ آغاز شود. برای این منظور از کد زیر استفاده می کنیم:
*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *
در صورت تمایل می توانید یک عکس و یا آیکون مربوط به دکمه پرینت در کد فوق استفاده کنید. اکنون با کلیک کردن روی لینک ساخته شده صفحه پرینت مرورگر باز شده و پس از دیدن پیش نمایش کاربر میتواند اقدام به چاپ صفحه نماید.
روش دوم: در این روش شما تنها بخشی از صفحه وب را که می خواهید در نسخه چاپی نمایش داده شود را توسط کد جاوااسکریپت انتخاب کرده و برای چاپ نهایی ارسال می کنید. به عنوان مثال هنگامی که می خواهید محتوای داخل یک کادر و یا یک عنصر HTML مانند div را برای چاپ ارسال کنید میتوانید از این روش استفاده کنید.
کدهای جاوا اسکریپت و جی کوئری
این کدها در بخش header سایت و در بین تگهای مربوط به کدهای جاوا اسکریپت قرار داده میشوند. توجه کنید که فایل مربوط به کتابخانه جی کوئری نیز باید در هدر سایت قرار داده شود:
*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *
کدهای HTML
دکمه مربوط به چاپ به شکل زیر در محل مورد نظر شما در بین کدهای html سایت قرار داده می شود:
*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *
توجه کنید در کد بالا id عنصر div که می خواهیم محتوای داخل آن چاپ شود به صورت پارامتر در رویداد onclick نوشته شده است. اکنون اگر به یک عنصر div به صورت "id="mydiv پارامتر id را اختصاص دهیم، محتویات داخل آن برای چاپ ارسال خواهد شد. به عنوان مثال در کد زیر فقط محتویات عنصر div اولی در چاپ ظاهر خواهد شد:
*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *
معرفی سرویس آنلاین چاپ و پرینت صفحات وب به صورت فیزیکی یا PDF
در پایان یک سرویس آنلاین برای افزودن امکان چاپ صفحات به نام دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
برای دوستداران سرویس های آنلاین معرفی میکنم. این سرویس علاوه بر اینکه با دادن آدرس صفحه وب مورد نظر شما نسخه چاپی آن را در فرمت های مختلف آماده می کند، به شما امکان قرار دادن دکمه پرینت با سایزها و اشکال مختلف در وبسایتتان را نیز می دهد. همچنین شما می توانید نسخه pdf صفحات موردنظر خود را نیز از این سرویس تهیه کنید. برای استفاده از این سرویس در وبسایت خود در منوی بالای این وبسایت روی گزینه Website Button کلیک کرده و پس از انتخاب ویژگی های مورد نظر خود کد تولید شده را در وبسایت خود قرار دهید.
