תצוגת מדפסת להמחשה
Picture of נאור בן שושן
נאור בן שושן
2024-05-19

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

בתיכלוס

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

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

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

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

				
					 <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 -->
                <style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-2ba82c04-c1a8-4e56-a0d5-d74d8e20f8ac: url('../../../../../../../../../../../../plugins/jet-elements/assets/images/dummy-map.png');}:root{--wpr-bg-3b8026a6-9472-4d08-b398-dd110c3ef62e: url('https://webbed.digital/wp-content/uploads/2023/05/640419_AS02-1.webp');}:root{--wpr-bg-91b6873d-021f-46b1-9e48-bbecf08ee36c: url('https://webbed.digital/wp-content/uploads/2023/05/webbed-bg-mobile@4x-com.webp');}:root{--wpr-bg-c277c9d3-6cd0-4f9e-ac90-5ada08a237c0: url('https://webbed.digital/wp-content/uploads/2023/05/webbed-bg-mobile@4x-com.webp');}:root{--wpr-bg-1c60a483-3c9c-4c83-9164-6f04d32cfb88: url('https://webbed.digital/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".elementor-widget-jet-map .jet-map-message .jet-map-message__dammy-map","style":":root{--wpr-bg-2ba82c04-c1a8-4e56-a0d5-d74d8e20f8ac: url('..\/..\/..\/..\/..\/..\/..\/..\/..\/..\/..\/..\/plugins\/jet-elements\/assets\/images\/dummy-map.png');}","hash":"2ba82c04-c1a8-4e56-a0d5-d74d8e20f8ac"},{"selector":".elementor-2090 .elementor-element.elementor-element-4a20bdf, .elementor-2090 .elementor-element.elementor-element-4a20bdf > .elementor-background-video-container, .elementor-2090 .elementor-element.elementor-element-4a20bdf > .e-con-inner > .elementor-background-video-container, .elementor-2090 .elementor-element.elementor-element-4a20bdf > .elementor-background-slideshow, .elementor-2090 .elementor-element.elementor-element-4a20bdf > .e-con-inner > .elementor-background-slideshow, .elementor-2090 .elementor-element.elementor-element-4a20bdf > .elementor-motion-effects-container > .elementor-motion-effects-layer","style":":root{--wpr-bg-3b8026a6-9472-4d08-b398-dd110c3ef62e: url('https:\/\/webbed.digital\/wp-content\/uploads\/2023\/05\/640419_AS02-1.webp');}","hash":"3b8026a6-9472-4d08-b398-dd110c3ef62e"},{"selector":".elementor-2090 .elementor-element.elementor-element-4a20bdf, .elementor-2090 .elementor-element.elementor-element-4a20bdf > .elementor-background-video-container, .elementor-2090 .elementor-element.elementor-element-4a20bdf > .e-con-inner > .elementor-background-video-container, .elementor-2090 .elementor-element.elementor-element-4a20bdf > .elementor-background-slideshow, .elementor-2090 .elementor-element.elementor-element-4a20bdf > .e-con-inner > .elementor-background-slideshow, .elementor-2090 .elementor-element.elementor-element-4a20bdf > .elementor-motion-effects-container > .elementor-motion-effects-layer","style":":root{--wpr-bg-91b6873d-021f-46b1-9e48-bbecf08ee36c: url('https:\/\/webbed.digital\/wp-content\/uploads\/2023\/05\/webbed-bg-mobile@4x-com.webp');}","hash":"91b6873d-021f-46b1-9e48-bbecf08ee36c"},{"selector":"body.elementor-page-2090:not(.elementor-motion-effects-element-type-background), body.elementor-page-2090 > .elementor-motion-effects-container > .elementor-motion-effects-layer","style":":root{--wpr-bg-c277c9d3-6cd0-4f9e-ac90-5ada08a237c0: url('https:\/\/webbed.digital\/wp-content\/uploads\/2023\/05\/webbed-bg-mobile@4x-com.webp');}","hash":"c277c9d3-6cd0-4f9e-ac90-5ada08a237c0"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-1c60a483-3c9c-4c83-9164-6f04d32cfb88: url('https:\/\/webbed.digital\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"1c60a483-3c9c-4c83-9164-6f04d32cfb88"}]; const rocket_excluded_pairs = [];</script></head>
                <body>
                    ${sectionToPrint.outerHTML}
                <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 ניתן ליצור כפתור שיאפשר למשתמש לבחור את התוכן הרצוי להדפסה ולהדפיסו בצורה מדויקת ומותאמת להדפסתו.

שתפו את המאמר

הוסיפו תגובה

שמך המלא *
תוכן התגובה

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

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

הוסיפו תגובה

שמך המלא *
תוכן התגובה