wesamdev

افلام هندية$type=sticky$count=4$show=home

$show=home

|روبوتات_$type=slider$source=random-posts$snippet=hide$cate=20$show=home

|اضافات بلوجر$type=three$m=0$rm=0$h=400$c=3$show=home

$show=home

wesamdev

مثالان على إنشاء نسخة قابلة للطباعة على نفس صفحة الموقع مثل المستند

إذا لم تكن هناك حاجة لإظهار كل هذا على الصفحة ، فما عليك سوى إضافة الأنماط الضرورية إلى CSS وتمكين الطباعة على الزر.

مثالان على إنشاء نسخة قابلة للطباعة على نفس صفحة الموقع مثل المستند
مثالان على إنشاء نسخة قابلة للطباعة على نفس صفحة الموقع مثل المستند

هذه الحلول ليست عالمية ويجب أن تكون مختلفة لكل موقع و / أو صفحة. يناقش هذا الموضوع خيارين لإنشاء نسخ مطبوعة باستخدام نموذج الصفحة في هذه المدونة.

بادئ ذي بدء ، دعونا إنشاء زر ، على سبيل المثال :


<div class="print-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"></polyline> <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"> </path><rect x="6" y="14" width="12" height="8"></rect></svg> <span>طباعة</span> </div>

الوضع المنبثق

في هذا الخيار ، نقوم بإنشاء مستند جديد بناءً على المستند الحالي ، ونفتحه في نافذة منبثقة ونطبعه. للقيام بذلك ، ننظر إلى كود HTML  لصفحتنا ونحدد العناصر التي نحتاج إلى إرسالها إلى هذه النافذة ثم طباعتها.

  • عنوان مع فئة subbanner
  • وصف موجز للموضوع مع class entry-summary
  • وصف كامل للموضوع مع class entry-content
  • تذييل مع معرف idfooter
document.querySelector(".print-button").onclick = function() { let w = window.open('','','left=50,top=50,width=860,height=600,toolbar=0,scrollbars=1,status=0'); // قم بإنشاء نافذة let elem_1 = document.body.querySelectorAll(".subbanner")[0].outerHTML; //نأخذ العنوان let elem_2 = document.body.querySelectorAll(".entry-summary")[0].outerHTML; // خذ جزءًا موجزًا ​​من الموضوع let elem_3 = document.body.querySelectorAll(".entry-content")[0].outerHTML; // خذ الجزء الكامل من الموضوع let elem_4 = document.getElementById("footer").outerHTML; //الفوتر // نملأ مستندًا جديدًا ، نضيف فيه جميع العناصر الضرورية ، سواء كانت ثابتة (أنماط ، نصوص ، إلخ) ومنقولة من الرئيسي w.document.write('<link href="/css/all-stylesheets.css" rel="stylesheet" type="text/css" />'); w.document.write('<link href="/css/crayon.css" rel="stylesheet" type="text/css" />'); w.document.write(elem_1); w.document.write(elem_2); w.document.write(elem_3); w.document.write(elem_4); w.document.write('<script src="/js/javaup.js"><\/script>'); w.document.write('<script src="/js/javadown.js"><\/script>'); w.document.write('<script src="/js/crayon.min.js"><\/script>'); w.document.write('<link href="/css/awesome.css" rel="stylesheet" type="text/css" />'); w.document.close(); setTimeout(function () { w.print(); }, 500); w.onfocus = function () { setTimeout(function () { w.close(); }, 500); } };

والنتيجة ستكون هكذا


بطريقة مماثلة ، يمكنك طباعة عدة عناصر مختلفة من الموقع ، على سبيل المثال ، التعريفات ، جهات الاتصال ، إلخ. المزيد عن ذلك لاحقًا في موضوع آخر.

خيار لتغيير المستند نفسه


سنضيف هنا فئة print إلى class body عند النقر ، وبالتالي يتم تضمين النسخة القابلة للطباعة. سيتم إيقاف تشغيله عن طريق الضغط على مفتاح Esc.
هذا الخيار جيد لأنه يمكنك تغيير المستند ليس فقط للطباعة ولكن أيضًا للحفظ. 
 كما في الأول ، ننظر إلى كود HTML لصفحتنا ، لكننا نحدد العناصر التي نحتاج إلى إزالتها (رأس ، تذييل ، شريط جانبي ، وحدات إعلانية ، إلخ) أو تغيير (عرض الكتلة المركزية ، إلخ.) ).

 سيكون الكود هكذا:

document.querySelector(".print-button").onclick = function() { document.body.classList.add("print"); window.print(); }; document.addEventListener('keydown', function(e) { if (e.keyCode === 27) { document.body.classList.remove("print"); } });

والنتيجة



إذا لم تكن هناك حاجة لإظهار كل هذا على الصفحة ، فما عليك سوى إضافة الأنماط الضرورية إلى CSS وتمكين الطباعة على الزر.

document.querySelector(".print-button").onclick = function() { window.print(); };

والنتيجة



على الجانب الجيد ، في كلا الخيارين ، كان من المفيد إضافة تغييرات لعلامات التبويب (بحيث تكون تحت بعضها البعض) ، وتغيير إخراج الكود (بحيث يكون مرئيًا تمامًا) وأشياء صغيرة أخرى ، لكنني لم أفعل الخوض بعمق ، لأن الموضوع هو اختبار واحد لكل موقع سيظل فريدًا.

COMMENTS

BLOGGER
الاسم

اخبار,45,اداة للكمبيوتر,7,اضافات بلوجر,88,افلام اجنبي,9,افلام روسية,32,افلام عربي مترجمة الي الروسية,1,افلام قديمة,2,افلام هندي,8,البرمجة,8,الجديد في التكنولوجيا,46,العاب,9,النمر,7,اليوتيوب,16,اندرويد,15,اندرويد استوديو,3,برامج كمبيوتر,11,بلوجر,8,تركيا,6,تصميم,3,تطبيقات,20,جافاسكريبت,3,حوادث,5,حول العالم,65,حيوانات,25,خلفيات,1,دروس HTML| بالعربية,2,روبوتات,8,روسيا,60,سياحة,4,سيارات,12,سياسة,17,شروحات,34,شريط الاخبار,1,صحتي,2,طائرات,22,فن,35,قناة الوعي نور,4,قناة قعدة تاريخ,8,قوالب بلوجر,3,كتب الكترونية,7,مالتي ميديا,6,متصفح,2,محليات,4,مسلسل لعبة الحبار,1,مسلسلات اجنبية,2,مسلسلات رمضان 2022,1,مسلسلات رمضان 2120,1,مصر والعرب,2,معدات حربية,34,معدات زراعية,6,مقالات,100,مواصلات النقل,1,مواقع للتصميم,14,وثائقي,14,وسوم بلوجر,2,ويندوز,15,Antivirus,3,Button,1,c++,1,css,37,HTML,11,wesam,2,
rtl
item
Wesam: مثالان على إنشاء نسخة قابلة للطباعة على نفس صفحة الموقع مثل المستند
مثالان على إنشاء نسخة قابلة للطباعة على نفس صفحة الموقع مثل المستند
إذا لم تكن هناك حاجة لإظهار كل هذا على الصفحة ، فما عليك سوى إضافة الأنماط الضرورية إلى CSS وتمكين الطباعة على الزر.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYJylcg6zXdW9K1MzMOZ67-9osJx1kbfDBAVzVh8-gbUxjvtL3ca755TgQJL0D-OZbVoFsN-z_mQgVbx7sH227myeSeyPIZ_kLLciJybRCACVVOOTpKWUgw_OKInSZBVAdKduxm70ZFY3v4PHuB9M8qzmad95KHKYV676H75cbJvL6QwtslrsUW8np/s1600/%D9%85%D8%AB%D8%A7%D9%84%D8%A7%D9%86%20%D8%B9%D9%84%D9%89%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%86%D8%B3%D8%AE%D8%A9%20%D9%82%D8%A7%D8%A8%D9%84%D8%A9%20%D9%84%D9%84%D8%B7%D8%A8%D8%A7%D8%B9%D8%A9%20%D8%B9%D9%84%D9%89%20%D9%86%D9%81%D8%B3%20%D8%B5%D9%81%D8%AD%D8%A9%20%D8%A7%D9%84%D9%85%D9%88%D9%82%D8%B9%20%D9%85%D8%AB%D9%84%20%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D9%86%D8%AF.webp
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYJylcg6zXdW9K1MzMOZ67-9osJx1kbfDBAVzVh8-gbUxjvtL3ca755TgQJL0D-OZbVoFsN-z_mQgVbx7sH227myeSeyPIZ_kLLciJybRCACVVOOTpKWUgw_OKInSZBVAdKduxm70ZFY3v4PHuB9M8qzmad95KHKYV676H75cbJvL6QwtslrsUW8np/s72-c/%D9%85%D8%AB%D8%A7%D9%84%D8%A7%D9%86%20%D8%B9%D9%84%D9%89%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%86%D8%B3%D8%AE%D8%A9%20%D9%82%D8%A7%D8%A8%D9%84%D8%A9%20%D9%84%D9%84%D8%B7%D8%A8%D8%A7%D8%B9%D8%A9%20%D8%B9%D9%84%D9%89%20%D9%86%D9%81%D8%B3%20%D8%B5%D9%81%D8%AD%D8%A9%20%D8%A7%D9%84%D9%85%D9%88%D9%82%D8%B9%20%D9%85%D8%AB%D9%84%20%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D9%86%D8%AF.webp
Wesam
https://www.wesamdev.com/2022/06/Create-a-print-button-on-the-website-page.html
https://www.wesamdev.com/
https://www.wesamdev.com/
https://www.wesamdev.com/2022/06/Create-a-print-button-on-the-website-page.html
true
1297279864306511161
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content