كيفية طباعة الفواتير بإستخدام pos printer

محمود موسى2 · 3 سبتمبر 2021

سلام عليكم.

أريد طباعة فاتورة بإستخدام طابعة الpos بإستخدام laravel.

لا أملك طابعة الآن للتجربة ولكن سأقول لكم المفهوم:

يتم الطباعة عن طريق الضغط على زر ينفذ فانكشن javascript وهي window.print();
تفتح نافذة الطباعة الخاصة بالمتصفح مثل google chrome وهي لتعديل خيارات الطباعة.
الفكرة هنا هي أن عند الطباعة يتم الطباعة عادةً بأوراق مثل a4, a5, a3, a2 وهكذا.. وطبعا أريدها بمقاسات الفاتورة بطابعة الpos.

الفاتورة كالشكل التالي منسقة ب php laravel وهذه هي أكوادها

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>طباعة إيصال المصروفات</title>
	<link href="{{ asset('/material/css/bootstrap.min.css') }}" rel="stylesheet">
	<style>
		body {
			direction: rtl;
			font-family: cairo;
			color: #161616;
			font-size: 12px;
		}

		h1 {
			font-weight: bolder;
			font-size: 25px;
		}

		ul {
			list-style: square;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="row">
			<div class="mx-auto bg-white col-12 p-3">
				<div class="text-center brand-name fw-bold mb-3">
					{{ cache()->get('app_name', 'EDU Soft') }}
				</div>
				<div>
					<div class="invoice-info">
						<div class="mb-1">
							<span>تمت العملية في:</span>
							<span>
								{{ date('Y-m-d', strtotime($expenses->created_at)) }}
							</span>
						</div>
						<div class="mb-2">
							<span>تمت بواسطة: </span>
							<span>
								{{ $expenses->user->name }}.
							</span>
						</div>
						<div class="mb-2">
							<table class="table mb-0">
								<thead>
									<tr>
										<td>الطالب</td>
										<td>المبلغ</td>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>{{ $expenses->student->name }}</td>
										<td>
											{{ $expenses->money }} ج
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<p class="mb-2">قم بالإحتفاظ بهذا الإيصال لحين الحاجة إليه.</p>
						<p class="mb-0">
							<span>رقم الهاتف: </span>
							<span>{{ \App\Models\Admin\Settings::where('name', 'center_phone1')->select('value')->first()['value'] }}.</span>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

فالسؤال هنا. هل أراعي مبادئ ومقاسات معينة عند تصميم الفاتورة أم هذا التنسيق بمقاسات الbootstrap تصلح؟

والسؤال أيضاً هل عند توصيل الجهاز بطابعة الفواتير pos هل سيتم تنفيذ أمر الطباعة عبر window.print() في جافا سكربت أيضاً؟

والسؤال الأخير هل عند الطباعة سيتم طباعة هذا الجزء بالمقاسات المضبوطة أم لا.

أرجو عند كتابة إجابة الإجابة عن ال3 أسئلة وشكرا جداً

Hassan Hedr · 3 سبتمبر 2021

يمكنك اعتبار قياسات الأوراق الطباعية مثل قياسات مختلفة لنافذة المتصفح ويمكنك استخدام قياسات Bootstrap نفسها للتصميم
- بالإضافة أنه يمكنك تخصيص ظهور أو اخفاء أي عناصر عند طباعة الفاتورة باستخدام الصفوف
```
// للإظهار عند الطباعة فقط
visible-print-block
visible-print-inline
visible-print-inline-block

// للإخفاء عند الطباعة
hidden-print
```
الأمر print مهمته إظهار نافذة المعاينة ما قبل الطباعة تنفذ هذه الخطوة في Javascript، وفيها يتم تحديد الطابعة والقياس ومعاينة النتيجة أما باقي العمليه يتولاها المتصفح ونظام التشغيل والطابعة عليك فقط في Javascript استدعاء الأمر print
يمكنك معاينة كيف سيكون شكل الفاتورة بالضغط على Ctrl + P والمعاينة بعدة قياسات والتأكد من التصميم وتعديله، ولمحاكاة مظهر الطباعة على نافذة المتصف فورا (في حال استخدامك للصفوف التي تخفي وتظهر عناصر عند الطباعة) يمكنك في Chrome تعيين الأعداد Emulate CSS Media إلى القيمة print كالتالي

محمود موسى2 · 3 سبتمبر 2021

بتاريخ 8 دقائق مضت قال Hassan Hedr:
يمكنك اعتبار قياسات الأوراق الطباعية مثل قياسات مختلفة لنافذة المتصفح ويمكنك استخدام قياسات Bootstrap نفسها للتصميم
بالإضافة أنه يمكنك تخصيص ظهور أو اخفاء أي عناصر عند طباعة الفاتورة باستخدام الصفوف
// للإظهار عند الطباعة فقط
visible-print-block
visible-print-inline
visible-print-inline-block

// للإخفاء عند الطباعة
hidden-print
الأمر print مهمته إظهار نافذة المعاينة ما قبل الطباعة تنفذ هذه الخطوة في Javascript، وفيها يتم تحديد الطابعة والقياس ومعاينة النتيجة أما باقي العمليه يتولاها المتصفح ونظام التشغيل والطابعة عليك فقط في Javascript استدعاء الأمر print

يمكنك معاينة كيف سيكون شكل الفاتورة بالضغط على Ctrl + P والمعاينة بعدة قياسات والتأكد من التصميم وتعديله، ولمحاكاة مظهر الطباعة على نافذة المتصف فورا (في حال استخدامك للصفوف التي تخفي وتظهر عناصر عند الطباعة) يمكنك في Chrome تعيين الأعداد Emulate CSS Media إلى القيمة print كالتالي

شكرا لك أولا.

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

Hassan Hedr · 3 سبتمبر 2021

بتاريخ الآن قال محمود رضا موسى:

شكرا لك أولا.

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

بتاريخ 4 دقائق مضت قال محمود رضا موسى:

هل التصميم الذي ترى أكواده يصلح للطباعة على ورقة فاتورة؟

الإجابة المختصرة نعم يصلح، الإجابة المطولة والتي ستجعلك قادرا على تعديل شكل الفاتورة مستقبلا وتعديل أي محتوى طباعي كما ذكرت لك في الإجابة رقم 1 و 3 في طريقة معاينة كيف سيكون شكل الصفحة عند الطباعة
بتاريخ 5 دقائق مضت قال محمود رضا موسى:

هل عند الطباعة إلى ماكينة الفواتير سأقوم بتنفيذ فانكشن print أيضا؟

الإجابة المختصرة نعم تحتاج لتنفيذ الأمر print، الإجابة المطولة في الإجابة رقم 2 تم شرح مسؤولية الدالة print ومن يتولى مهمة الطباعة واختيار الطابعة والقياس

كيفية طباعة الفواتير بإستخدام pos printer

السؤال

محمود موسى2

3 أجوبة على هذا السؤال

Recommended Posts

Hassan Hedr

محمود موسى2

Hassan Hedr

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية