الأربعاء، 1 يونيو 2022
إضافة زر طباعة لموقعك
تطبيقات على جافا سكريبت
طباعة وتحميل موضوع بصيغة pdf من الموقع بواسطة جافا سكريبت
كيفية طباعة صفحة أو نص بواسطة جافا سكريبت أو تحميله بصيغة pdf
سنتعرف في هذه المقالة على كيفية إضافة زر برينت أو طباعة لصفحة ما أو موضوع ما أو وثيقة ما على موقعك عن طريق html و css و جافا سكريبت حيث سنقوم بإنشاء صفحة ويب تتألف من حقل إدخال نصوص textarea وأيضا زر عند النقر على هذا الزر تظهر لنا واجهة الطباعة لطباعة الصفحة أو الوثيقة وأيضا تحميلها ك pdf طبعا الأمر كله سيتم بسطر برمجي واحد فقط ، بحيث سنطبع النافذة كلها لكن النافذة قد تحتوي على عناصر أخرى وليس فقط النص ، هنا يأتي دور ال css media query والتي ستكون خاصة بتخصيص وضع الطباعة حيث سنزيل كل شيئ خلال الطباعة ونترك النص المراد طباعته وهكذا نكون قد قمنا بعمل ستايل وجعلنا النص فقط يظهر في صفحة الطباعة .
لنبدأ معا الشرح حيث في البداية سنقوم بعمل عنصر div والذي سيكون كحاوية لكل العناصر التي بداخله وداخله div آخر يحوي textarea وأيضا داخل الكونتينر يوجد عنصر بوتون button .
 |
| هنا الشكل النهائي لوثيقة html |
الآن ننتقل للcss حيث قمنا بتنسيق الصفحة بحيث أعطيناها شكل جميل وأيضا مريح ومتجاوب .
 |
| هنا صفحة التنسيقات يمكنك تنسيق صفحتك كما تشاء . |
الآن ننتقل للشكل النهائي للصفحة بعد بنائها ب html وتنسيقها ب css لتظهر الصفحة بهذا الشكل الجميل .
 |
| هنا الشكل النهائي للصفحة . |
والآن ننتقل للجانب الأهم ألا وهو تنسيق الميديا كويري الخاصة بالطابعة حيث توفر css ضمن ال media query الخاصة بتنسيق التجاوب مع الأجهزة أو تجاوب المواقع مع الأجهزة تنسيق query خاص بالطابع حيث يمكنك تنسيق صفحة الطباعة كما تريد وغالبا الصفحة عند الطباعة تكون نص فبالتالي يمكنك أن تستغني على عناصر الصفحة في وضع الطباعة لتترك النص فقط .
طبعا أنا هنا قمت بإزالة ال padding عن بعض العناصر لكي لا يؤثر على صفحة الطباعة وتبدو الكتابة بعيدة وقمت بإزالة عنصر البوتون حيث تركته مخفي أيضا قمت بعمل إعادة تنسيق للتنسيق الأولي وجعلت ال textarea يشغل مساحة 100% من الصفحة طولا وعرضا وهكذا نكون قد جهزنا الصفحة للطباعة .
 |
| الميديا كويري الخاص بالطباعة . |
الآن ننتقل لجانب جافا سكريبت حيث سنقوم بتخصيص زر الطباعة حيث عند النقر على زر الطباعة سيتم تنفيذ دالة هذه الدالة تقوم بطباعة الصفحة أو إضهار واجهة التحكم في الطباعة بعبارة اخرى ، حيث أولا إستدعينا عنصر البوتون بإستخدام ال class name بواسطة الدالة query Selector وخزناه في المتغير btn حيث أصبح المتغير يحوي الزر بداخله والذي سنقوم بعمليات عليه هذا العمليات هي أننا سنضيف حدث هناك عدة طريق لإضافة الحدث حيث يمكن إنشاء دالة ووضع سمة الحدث في html وتنفيذ الدالة ويمكن أيضا عمل الحدث على العنصر من جافا سكريبت مباشرة ، هنا إخترنا جافا سكريبت ومن بين طرق إضافة الأحداث هي بجلب العنصر ثم نضع دوت أون كليك أو أي حدث آخر هنا وضعنا arrow function أو دالة مختصرة يعني يمكنك كتابة الدالة وتنفيذها بالطريقة العادية المهم نركز على السطر window.print() حيث يقوم هذا السطر بإضهار واجهة تخصيص والتحكم بالطابعة وأيضا يمكن من هذه الواجهة تحميل الملف ك pdf ويمكن الطباعة .
 |
| أكواد جافا سكريبت . |
 |
| صفحة الطباعة النص ، بحيث نسقنا النصوص لتبدو بهذا الشكل . |
في الأخير نتمنى أن تكون قد إستفدت من الشرح نتمنى منك مشاركته مع أصدقائك ومتباعة باقي المواضيع في الموقع لعل أحدها يهمك نلتقي وإياكم في شرح قادم إن شاء الله .
