طباعة محتوى HTML محدد عند النقر على الزر دون تضمين صفحة ويب كاملة

يمكن طباعة محتوى HTML محدد فقط عند نقرة زر المستخدم بطرق مختلفة طرق. تتمثل إحدى الطرق في إنشاء عنصر div مخفي للاحتفاظ بـ HTML المطلوب. يجب أن يتم تعيين خاصية العرض الخاصة بهذا القسم على "طباعة" لأغراض الطباعة، بينما تظل قيمة العرض الخاصة به "لا شيء" لعرض الشاشة. يمكن تعديل خصائص العرض الخاصة بالعناصر الأخرى الموجودة في الصفحة لتظهر على الشاشة ولكن تختفي أثناء الطباعة. ومع ذلك، تتطلب هذه الطريقة إدارة دقيقة لجميع خصائص عرض عناصر الصفحة.

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

إليك مثال باستخدام الطريقة الثانية:

// Create an invisible iframe to hold the print-only HTML
const printFrame = document.createElement('iframe');
printFrame.style.display = 'none';
document.body.appendChild(printFrame);

// Dynamically load the print-only HTML into the iframe
printFrame.onload = function() {
  // Trigger the browser's print function once the print-only page is loaded
  window.print();
}
printFrame.src = 'print-only.html';

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