איך עושים כפתור ששולח את העמוד להדפסה?

יש לפעמים צורך בנתינת הרשאה להדפסה של העמוד מסוים באתר. זה יכול להיות הדפסת תמונה או קופון או עפילו הדפסת מסמכים. הפרקטיקה הזאת שימושית מאוד עבור בעלי אתרים ובעלי עסקים באופן כללי שרוצים לתת אפשרות קלה של הדפסת תמונה או מסמכים כאלה ואחרים בצורה פשוטה. למשל, אם ברצונכם לאפשר הדפסת תמונה שלכם דרך האתר ללא צורך בהורדת תמונה למחשב, ביכולתכם ליצור קישור html פשוט ולהוסיף פקודת js (ג'אווהסקריפט) לקישור התמונה כפי שמפורט בהמשך, והקישור יהפוך לקריאה לצורך פתיחת תוכנת הדפסה עם מידע הרצוי עבור הגולש. מדובר ב- א ב בתחום של בניית אתרים שכל בונה אתרים צריך לדעת מכיוון שיש מקרים בהם תרצו להשתמש בטכניקה זו.

כדי לצפות בדוגמה, ניתן ללחוץ על כפתור המופיע כאן למטה. לחיצה על הכפתור תאפשר לכם להדפיס תמונת לוגו של של האתר – Webist. לחיצה על הכפתור באופן אוטומטי ישלח את תמונת הלוגו של האתר להדפסה. כל מה שנדרש מהגולש לעשות זה לאשר את ההדפסה.

אז איך יוצרים כפתור ששולח את התמונה להדפסה?

לפני הכל אנחנו צריכים את התמונה עצמה ותגיות html בסיסיות כדי להציג את התמונה. למשל כך:

[php]
<img src="https://www.webist.co.il/logo.png" alt="" />
[/php]

בקוד למעלה אנחנו רוצים תגית img של html ושרשור לקובץ logo.png של האתר באמצעות תג src. כך אנחנו מקשרים לתמונה בדף html. כעת כדי להפוך את התמונה ללחיץ ויחד עם זאת לבצע קריעה של משלוח תמונה להדפסה אנחנו צריכים להוסיף עוד קוד קטן, אך הפעם מדובר בקוד js.

שלב 2: הוספת קוד JS ועטיפת תמונה בקישור לצורך משלוח התמונה להדפסה

כעת אנחנו צריכים להעטוף את התמונה בקישור מכיוון שהרי אנחנו מעוניינים לשלוח את התמונה להדפסה על ידי לחיצה / הקלקה עליו. האפשרות הקלקה על התמונה תופעל כאשר נגדיר קישור / נהפוך את התמונה ללחיץ.
כדי להפוך את התמונה ללחיץ אנחנו עוטפים אותה בתגית פתיחה וסגירה a. צפה בדוגמה בהמשך.
[php]
<a href="#"><img src="https://www.webist.co.il/logo.png" alt="" /></a>
[/php]

בקוד למעלה עטפנו את התמונה בקישור שמוביל לשום מקום. סולמית (#) היא דימוי של כתובת URL שלשם אנחנו רוצים להפנות את הגולש בעת הלחיצה. השלב הבא והאחרון הוא לשלב את קוד JS במקום הקישור (במקום הסולמית שמופיע בדוגמה). מה שאנחנו צריכים זה לשלב את הקוד JS כפי שמופיע כאן למטה במקום סולמית.

[js]
javascript:window.print()
[/js]

ותוצאה הסופית היא:
[html]
<a href="javascript:window.print()">
<img src="https://www.webist.co.il/logo.png" alt="" />
</a>
[/html]

//

לדוגמה, באפשרותך ללחוץ על התמונה כעת.