كيف اطبع صفحة html بالطابعة A4

احمد • منذ 5 سنوات

السلام عليكم ورحمة الله وبركاته

ابغى اسوي صفحات html css بحيث العضو يدخل بيانات معينه وبعدين يضغط على زر طباعه وتفتح نافذة الطباعة بالطابعة A4

كيف اطبع الصفحه بدون اخطاء في حجم الصفحه او المحتوى

وكيف اضيف زر الطباعه بحيث اذا ضغطت عليه يطبع من الطابعه

كلمات دليلية: css html

أعجبني السؤال تابع السؤال شارك السؤال

ساعد بالإجابة

"إن في قضاء حوائج الناس لذة لا يَعرفها إلا من جربها، فافعل الخير مهما استصغرته فإنك لا تدري أي حسنة تدخلك الجنة."

الإجابات (3)

عمار الخوالدة • منذ 5 سنوات

مميز

وعليكم السلام ورحمة الله وبركاته،

بالنسبة للطباعة فستستخدم الميثود window.print() في جافاسكربت للطباعة،

<button onClick="window.print()">print</button>

أما ما يتعلق بتنسيق الصفحة فستحتاج لاستخدام Media Queries لتنسيق الصفحة، والـ Media Query هي ميزة في CSS تساعدك على تطبيق خاصية معينة بحسب شروط يتم تحديدها، فمثلا يمكنك تطبيق خواص معينة في حال كان المستخدم يتصفح الموقع من جهاز بقياس عرض شاشة معين، وغيرها من الشروط، وما يتعلق بسؤالك فمن الشروط التي بالإمكان استخدامها شرط print، بحيث تنفذ جميع الخصائص بداخله عند الطباعة فقط.
مثال:

@media print {
    #myElement {
        display: none;
    }

    .myElements {
        background: #ffffff;
    }
}

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

إضافة إلى الطريقة السابقة، يمكنك بدلا من كتابة Media Query بداخل ملف الـ CSS الخاص بك، ان تحدد ملف CSS معين خاص بعملية الطباعة فقط، مثال:

<link rel="stylesheet" type="text/css" href="all.css">

<link rel="stylesheet" type="text/css" href="computerAndPhone.css" media="screen">

<link rel="stylesheet" type="text/css" href="printer.css" media="print">

الملف الأول سيطبق في جميع الحالات، فلم نحدد له الخاصية media، أما الملف الثاني فسيطبق فقط على الحواسيب والهواتف الذكية ( أي شيء له شاشة ) لأننا حددنا له خاصية media ليعمل على screen فقط،
أما الملف الثالث فيسعمل عند الطباعة فقط.

بما أن عملية الطباعة في الغالب ستتم على أكثر من صفحة في حال كانت البيانات كثيرة، فإنك بحاجة لطريقة لتحديد أماكن "تقطيع" صفحة الويب على شكل صفحات ورقية ( كالفواصل بين الصفحات في الصورة السابقة ).

ومما يساعدك على التحكم في عملية التقطيع خصائص الـ CSS التالية:

page-break-before
page-break-after
page-break-inside

بالنسبة لجعل التصميم متناسبا مع مقياس A4، فمقياس A4 له عرض وطول محدد (يمكنك معرفة القياسات من هنا) فببساطة، باستخدام Media Query خاص بالطباعة، يمكنك تغيير قياسات الـ Div التي تحتوي على جميع عناصرك إلى قياسات A4 ( أو تحويل كل div بحسب عدد الصفحات لديك مع استخدام خصائص الـ CSS الثلاث المذكورة مسبقا ).

احمد: هل يمكن حذف التاريخ والوقت عند الطباعة ب window.print

عمار الخوالدة: غالبا لا، فهذه خيارات متروكة للمستخدم لالغائها أو تفعيلها

احمد: ارجو التوضيح اكثر يعني هل اقدر الغي التاريخ والوقت عند الطباعه او لا وهل يوجد بديل للميثو د window.print يسمح بالطباعه بدون تاريخ ووقت

احمد • منذ 5 سنوات

اولا شكرا على ردك بس فيه حاجه ما فهمتها

<link rel="stylesheet" type="text/css" href="all.css">

<link rel="stylesheet" type="text/css" href="computerAndPhone.css" media="screen">

<link rel="stylesheet" type="text/css" href="printer.css" media="print">

هاذي الاكواد الثلاثة هل الثلاثة اكواد استخدمها كلها ولى تقصد انو لكل صفحة css اسويها اختار الكود الى يناسبني اتمنى انك تشرحها بالتفصيل ان امكن . انا مبتدا بعض الشيء

عمار الخوالدة: هذا ربط للصفحة بثلاث ملفات css، الملف الأول يعمل للمستخدمين وللطابعات، الملف الثاني يعمل للمستخدمين ( الذين يتصفحون من الحاسوب أو الهاتف ) والملف الثالث تطبق الستايلات بداخله فقط عند استخدام الطباعة.

احمد • منذ 5 سنوات

هل يمكن حذف التاريخ والوقت عند الطباعة

ب window.print

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !

اشترك الآن