إذا لم تكن هناك حاجة لإظهار كل هذا على الصفحة ، فما عليك سوى إضافة الأنماط الضرورية إلى CSS وتمكين الطباعة على الزر.
مثالان على إنشاء نسخة قابلة للطباعة على نفس صفحة الموقع مثل المستند
هذه الحلول ليست عالمية ويجب أن تكون مختلفة لكل موقع و / أو صفحة. يناقش هذا الموضوع خيارين لإنشاء نسخ مطبوعة باستخدام نموذج الصفحة في هذه المدونة.
بادئ ذي بدء ، دعونا إنشاء زر ، على سبيل المثال :
الوضع المنبثق
في هذا الخيار ، نقوم بإنشاء مستند جديد بناءً على المستند الحالي ، ونفتحه في نافذة منبثقة ونطبعه.
للقيام بذلك ، ننظر إلى كود 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 لصفحتنا ، لكننا نحدد العناصر التي نحتاج إلى إزالتها (رأس ، تذييل ، شريط جانبي ، وحدات إعلانية ، إلخ) أو تغيير (عرض الكتلة المركزية ، إلخ.) ).
سيكون الكود هكذا:
والنتيجة
إذا لم تكن هناك حاجة لإظهار كل هذا على الصفحة ، فما عليك سوى إضافة الأنماط الضرورية إلى CSS وتمكين الطباعة على الزر.
والنتيجة
على الجانب الجيد ، في كلا الخيارين ، كان من المفيد إضافة تغييرات لعلامات التبويب (بحيث تكون تحت بعضها البعض) ، وتغيير إخراج الكود (بحيث يكون مرئيًا تمامًا) وأشياء صغيرة أخرى ، لكنني لم أفعل الخوض بعمق ، لأن الموضوع هو اختبار واحد لكل موقع سيظل فريدًا.
COMMENTS