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

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

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

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

طباعة

 <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> 

.print-button {
	display: inline-flex;
	align-items: center;
	border: 3px solid #BFE2FF;
	border-radius: 22px;
	padding: 6px 18px;
	cursor: pointer;
	transition: box-shadow 0.3s;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 8px 10px rgba(0,0,0,0.2);
	margin: 20px;
}
.print-button svg {
	fill: none;
	stroke: #337AB7;
	stroke-width: 2;
	width: 30px;
	height: 30px;
}
.print-button span {
	color: #337AB7;
	font-size: 18px;
	line-height: 1;
	font-family: Arial, sans-serif;
	padding-left: 12px;
}
.print-button:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);                        
}

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

في هذا الخيار ، نقوم بإنشاء مستند جديد بناءً على المستند الحالي ، ونفتحه في نافذة منبثقة ونطبعه. للقيام بذلك ، ننظر إلى كود 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");	
	}
});          

body.print #header,
body.print .sidebar-block,
body.print .execphpwidget,                                                  
body.print .post-thumbnail,
body.print .title.margin-top-30,                                                             
body.print .linehover,
body.print .comment-respond,
body.print .subbanner2,
body.print .post-meta,
body.print .artlinks {
	display: none;
}
body.print .col-lg-8 {
	width: 100%;
}      

والنتيجة

طباعة

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

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

@media print {
	#header,
	.sidebar-block,
	.execphpwidget,
	.post-thumbnail,
	.title.margin-top-30,                                                                    
	.linehover,
	.comment-respond,
	.subbanner2,
	.post-meta,
	.artlinks {
		display: none;
	}
	.col-lg-8 {
		width: 100%;
	}
}

والنتيجة

print

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