נאור בן שושן

יצירת כפתור להדפסת אזור מוגדר מראש בעמוד

למה שאצטרך כפתור להדפסת אזור מוגדר מראש?

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

ואיך יוצרים את זה?

יצירת כפתור להדפסת אזור מוגדר מראש מתבצעת בדרך פשוטה. בעזרת גלילת הקוד של HTML ו-CSS, ניתן ליצור כפתור המשמש כדי לקרא פונקציה המדפיסה את התוכן הרצוי בלבד. בדרך כלל, יש להשתמש בפונקציות המוגדרות ב-JavaScript לצורך הדפסת האזור שנבחר ולהתאים אותו למדפסת.

את הקוד מכניסים לתוסף סניפטים בתצורת JavaScript או לעורך הקוד של אלמנטור
הקפידו לבדוק את הדף לאחר הכנסת הקוד ולראות שלא נשבר כלום ושהכל עובד מצוין
יש ליצור כפתור באלמנטור ולתת לו את הקלאס elementor-share-btn_print
יש לשים לב שבשורה 8 תפסתי את הקונטיינר של אלמנטור שאותו רציתי להדפיס. לכל קונטיינר או ווידג'ט של אלמנטור יש ID, תעודת זהות ששיכת רק לו. במקרה הזה, זה היה div[data-id="aa69064"]. במקרה שלכם זה יהיה שונה. תוכלו ללחוץ על F12 ולמצוא את הID שרלוונטי לכם.

				
					 <script>
        // Get the print button element
        const printButton = document.querySelector('.elementor-share-btn_print');

        // Add a click event listener to the print button
        printButton.addEventListener('click', () => {
            // Get the section you want to print
            const sectionToPrint = document.querySelector('div[data-id="aa69064"]');

            // Create a new window to print the section
            const printWindow = window.open('', '_blank');

            // Write the section's HTML to the new window
            printWindow.document.write(`
                <html>
                <head>
                    <!-- Optional: You can include your CSS styles here -->
                </head>
                <body>
                    ${sectionToPrint.outerHTML}
                <script>var rocket_beacon_data = {"ajax_url":"https:\/\/webbed.digital\/wp-admin\/admin-ajax.php","nonce":"e0df85c7de","url":"https:\/\/webbed.digital\/knowledge-base\/%D7%99%D7%A6%D7%99%D7%A8%D7%AA-%D7%9B%D7%A4%D7%AA%D7%95%D7%A8-%D7%9C%D7%94%D7%93%D7%A4%D7%A1%D7%AA-%D7%90%D7%96%D7%95%D7%A8-%D7%9E%D7%95%D7%92%D7%93%D7%A8-%D7%9E%D7%A8%D7%90%D7%A9-%D7%91%D7%A2%D7%9E","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://webbed.digital/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
                </html>
            `);

            // Close the document stream to ensure all content is loaded
            printWindow.document.close();

            // Print the section
            printWindow.print();
        });
    </script>

למיטיבי הלכת, מה שבעצם עשינו זה איתור כפתור ההדפסה על פי הקלאס שלהם (שורה 3). לאחר מכן, איתרנו את הקונטיינר שאותו נרצה להדפיס (שורה 8) ולאחר מכן הגדרנו בשורה 11 שההדפסה תעבור ללשונית חדשה.

למי שלא מספיק לו העיצוב של הטקסט בדף המודפס, ניתן לסגנן את התוכן על ידי הוספת תגית <style> בשורה 17. ממליץ בחום לא להתחכם יותר מדי בעיצוב אלא לשמור עליו פשוט ככל האפשר. לדוגמא, לא לשים פונטים כמו Assistant או Heebo כי ההדפסה פשוט לא תתמוך בזה. אלא לשים פונט גנרי כמו Calibri או Arial.

ולסיכום

הוספת כפתור להדפסת אזור מוגדר מראש בעמוד משפרת את חוויית המשתמש ומסייעת בהדפסת תוכן ספציפי בצורה יעילה. בשילוב קוד HTML, CSS ו-JavaScript ניתן ליצור כפתור שיאפשר למשתמש לבחור את התוכן הרצוי להדפסה ולהדפיסו בצורה מדויקת ומותאמת להדפסתו.

שתפו את המאמר:

הרעיונות והתגובות שלכם

אין תגובות עדיין...

יצירת כפתור להדפסת אזור מוגדר מראש בעמוד

מה במאמר?

למה שאצטרך כפתור להדפסת אזור מוגדר מראש?

ואיך יוצרים את זה?

ולסיכום

הרעיונות והתגובות שלכם

צרו קשר