کار با پرینترهای چاپ فاکتور فروش (رسید - فیش) بصورت تحت وب

مدت زیادی هست که میخوام این تجربم رو یه جایی بنویسم و منتشر کنم شاید گره از کار کسی باز بشه و بالاخره امروز این تصمیم رو گرفتم.

یکی دو سال پیش بود که توی یه پروژه تحت وب مجبور بودم فاکتورهای خریدی رو برای مشتریها با استفاده از همین چاپگرهای کوچیک معمولا مشکی رنگ که بهشون میگن (receipt printer) - پرینتر حرارتی یا فیش پرینت چاپ کنم.

اوایل فکر میکردم کار خیلی ساده ای هستش و با یه دستور جاوااسکریپتی window.print(); قضیه حل و فصل میشه و مشتری یه رسید تر و تمیز میرسه به دستش! ولی خوب خیلی سخت تر از این حرفا بود و چالشهایی سر راهمون ظاهر شد.

  • اول اینکه با دستور پرینت معمولی صفحه خیلی بد شکل و متنها ناقص پرینت میشدن و زیر صفحات تاریخ و ساعت و یه مشت متن بی مصرف چاپ میشد که ما کنترلی روشون نداشتیم.
  • مشکل دوم سایز کاغذ در چاپگرهای رسیدی بود که طولانی میشد و سایز ثابت و استانداردی نداشت و عرض کمی هم دارن (تصویر بالا).
  • مشکل سوم، حاشیه های (margins) کاغذ بود که ما باید اونو از طریق برنامه نویسی کنترل میکردیم میزانشو که متن چاپ شده دقیقا بیفته وسط کاغذ رسید(فاکتور).
  • مشکل چهارم، قراردادن پرینتر مورد نظر به صورت پیشفرض (default).
  • و دست آخر مشکل پنجم و مشکل اصلی این بود که باید مدل پرینتر یا پرینترهایی که به کامپیوتر یا لپتاپ وصل میشد رو یه جوری تشخیص میدادیم اتوماتیک و موقع پرینت، رسید رو میفرستادیم سمت اون پرینتر؛ (پروژه ما یه سیستم آنلاین دریافت سفارشات غذا بود و معمولا هر بیرونبر-غذای آماده-رستوران و ... چندتا پرینتر داشتن و هر کدوم باید یه نسخه چاپی همزمان دریافت میکردن از سفارش مشتری) ولی عملا این امکان پذیر نبود چون توی برنامه های تحت وب شما به لیست دیوایسهای سخت افزاری متصل به رایانه به دلیل مسائل امنیتی دسترسی ندارین و این خیلی چالش عظیمی بود.

خلاصه بعد از دو هفته سرچ و عدم نتیجه گیری و نا امیدی محض، یکی از دوستان به نام آقای بهفر توی سرچهاشون به یه افزونه فایرفاکس رسیده بود و با معرفیش خون تازه ای تو رگهامون جاری شد :))) از این جای مطلب به بعد نحوه ی کار با اون افزونه و طرز کدنویسیش رو توضیح میدم.

افزونه js Print Setup

لینک فرشته نجات ما توی قسمت اکستنشهای فایرفاکس :

https://addons.mozilla.org/en-US/firefox/addon/js-print-setup/

توضیحاتش هم کاملا گویای کاری هست که انجام میده:

Client side Javascript printer settings.
This extension implements print setup from CS Javascript, similar of MeadCo's ScriptX ActiveX control for Internet Explorer.

این افزونه کل چیزی که یه برنامه نویس وب برای کار با پرینترها علی الخصوص پرینترهای چاپ فاکتور خرید نیاز دارن رو در اختیارشون قرار میده.

کافیه اکستنشن رو روی فایرفاکس نصب کنید و با استفاده از دستورات زیر کاملا رویدادهایی که میخواین رو مدیریت کنید.

// set portrait orientation
jsPrintSetup.setOption('orientation', jsPrintSetup.kPortraitOrientation);
// set top margins in millimeters
jsPrintSetup.setOption('marginTop', 15);
jsPrintSetup.setOption('marginBottom', 15);
jsPrintSetup.setOption('marginLeft', 20);
jsPrintSetup.setOption(' marginRight', 10);
// set page header
jsPrintSetup.setOption('headerStrLeft', 'My custom header');
jsPrintSetup.setOption('headerStrCenter', '');
jsPrintSetup.setOption('headerStrRight', '&PT');
// set empty page footer
jsPrintSetup.setOption('footerStrLeft', '');
jsPrintSetup.setOption('footerStrCenter', '');
jsPrintSetup.setOption('footerStrRight', '');
// Suppress print dialog
jsPrintSetup.setSilentPrint(true);
// Do Print
jsPrintSetup.print();
// Restore print dialog
jsPrintSetup.setSilentPrint(false);

خوب همه چیز کاملا واضح و روشنه و از اونجایی که همه استادن دیگه از توضیحات اضافه خودداری میکنم.

این هم لینکش توی گیتهاب: https://github.com/edabg/jsprintsetup

لینک توضیحات کامل: https://github.com/edabg/jsprintsetup/wiki

فقط نکته پایانی اینکه، موقع پرینت باکس تایید پرینت ظاهر میشه که هر سری باید اوکی کنید تا پرینت انجام بشه؛ برای اینکه فوری عمل پرینت شروع بشه و این پیغام مزاحم نشون داده نشه کافیه دستور jsPrintSetup.setSilentPrint(true); اضافه کنید. و یا در صورتی که مشکل رفع نشد از افزونه عالی SeamLess Print برای حل مشکل استفاده کنید.

امیدوارم به دردتون بخوره و در صورت داشتنداشتن سوال همینجا بپرسید؛ تا جایی که سوادم برسه کمک خواهم کرد ✌