اذهب إلى المحتوى
  • 0

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

محمود موسى2

السؤال

سلام عليكم.

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

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

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

JVPlkeT.png

الفاتورة كالشكل التالي منسقة ب 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 أسئلة وشكرا جداً

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

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

       

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

       

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

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

شكرا لك أولا.

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

شكرا لك أولا.

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

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

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

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

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

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

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...