سفارشی‌سازی قالب‌های پرینت

در فلکس، شما قادر خواهید بود تا قالب‌های پرینت PDF اسناد مختلف مانند فاکتورها، پیش‌فاکتورها، سفارش‌ها و سایر سابماژول‌های قابل پرینت را به سادگی و با انعطاف‌پذیری بالا ویرایش و شخصی‌سازی کنید. این ابزار قدرتمند به شما این امکان را می‌دهد که ظاهر اسناد خود را به‌طور دقیق با هویت بصری شرکت، نیازهای خاص مشتریان یا فرآیندهای داخلی هماهنگ کنید.

لیست قالب‌های پرینت

در این بخش، فهرستی از تمامی قالب‌های پرینت موجود نمایش داده می‌شود. هر ردیف شامل اطلاعات زیر است که به شما کمک می‌کند تا به‌راحتی قالب‌ها را شناسایی و مدیریت کنید:

تصویر و نام ایجادکننده: این بخش شامل تصویر و نام شخصی که قالب پرینت را ایجاد کرده است.
نام قالب: عنوان قالب چاپ به‌صورت ترکیبی از کاربرد قالب و نام انتخابی آن، نمایش داده می شود (برای مثال: پیش‌ فاکتور فروش - رسمی 1404).
همچنین، نمایش علامت تیک سبز در کنار عنوان، نشان‌دهنده‌ی پیش‌فرض بودن قالب می‌باشد.

️⚠️ هنگام پرینت یا ساخت PDF، فلکس در ابتدا قالب پیش‌فرض را اولویت قرار می‌دهد.

شما می‌توانید به تعداد دلخواه برای شرکت خود قالب تعریف کنید.

ایجاد قالب جدید

با کلیک بر روی دکمه "ایجاد"، یک پنجره باز می‌شود که در آن فیلدهای زیر برای وارد کردن اطلاعات قالب پرینت وجود دارد:

عنوان: وارد کردن عنوان قالب پرینت به شما این امکان را می‌دهد تا قالب مورد نظر را به راحتی شناسایی کنید.
توضیحات: در این بخش می‌توانید توضیحات و جزئیات مربوط به قالب پرینت را وارد کنید تا اطلاعات بیشتری در مورد قالب فراهم شود.
کاربرد: از این فیلد برای انتخاب بخش یا سابماژول مناسب استفاده کنید که قالب پرینت برای آن طراحی شده است.
نوع کاغذ:
- دلخواه: این گزینه به شما اجازه می‌دهد تا طول و عرض کاغذ را به‌طور دستی و برحسب میلی‌متر وارد کنید.
- A5: اندازه استاندارد کاغذ A5 با طول 210 میلی‌متر و عرض 148 میلی‌متر.
- A4 عمودی: اندازه استاندارد کاغذ A4 به صورت عمودی با طول 297 میلی‌متر و عرض 210 میلی‌متر.
- A4 افقی: اندازه استاندارد کاغذ A4 به صورت افقی با طول 210 میلی‌متر و عرض 297 میلی‌متر.
فاصله از بالا: مقدار این بخش مشخص می‌کند که بدنه اصلی قالب با چه فاصله‌ای از سربرگ (Header) برحسب میلی متر شروع شود.
فاصله از پایین: مقدار این بخش تعیین می‌کند که پایان بدنه قالب با چه فاصله‌ای از پابرگ (Footer) برحسب میلی متر قرارگیرد.

⚠️فیلدهای فاصله از بالا و پایین برای جلوگیری از روی هم رفتن و تداخل محتواها در صفحات دوم به بعد کاربرد دارند.

فعال/غیرفعال: با فعال کردن این گزینه، قالب پرینت برای استفاده در بخش‌های مختلف سیستم قابل دسترسی خواهد بود.

⚠️اگر قالبی در دست طراحی و کدنویسی دارید میتوانید بصورت موقت فیلد فعال آن را خاموش کنید تا همکاران اشتباها از آن قالب استفاده نکنند.

مدیریت قالب‌ها

در هر قالب با کلیک بر روی سه نقطه بالا سمت چپ، گزینه‌های زیر نمایش داده می‌شود:

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

⚠️قالب‌هایی که بصورت پیش‌فرض توسط نرم‌افزار فلکس طراحی و ایجاد شده‌اند قابل ویرایش و حذف نیستند، شما می‌توانید قالب‌های خود را ایجاد کرده و نهایتا بعد از ایجاد قالب، موارد پیش‌فرض فلکس را غیرفعال کنید.

ویرایش قالب‌ پرینت

صفحه ویرایش قالب‌ها به شما این امکان را می‌دهد که قالب‌های پرینت خود را به‌طور کامل تنظیم و سفارشی‌سازی کنید. این صفحه شامل دو بخش اصلی تنظیمات و پیش‌نمایش است که به شما کمک می‌کند قالب پرینت خود را مطابق با نیازهای سازمان یا پروژه‌ی خود ایجاد و به‌روزرسانی کنید.

تنظیمات

در بخش تنظیمات، شما می‌توانید جزئیات مختلف قالب را به‌صورت دقیق تنظیم کنید. این بخش مشابه فیلدهای ایجاد قالب بوده و شامل موارد زیر است:

تنظیمات عمومی: در این قسمت می‌توانید اطلاعات کلی قالب از جمله عنوان، توضیحات و سایر مشخصات عمومی را ویرایش نمایید.

کد قالب: کد قالب شامل تمامی بخش‌های مورد نیاز مانند سربرگ (Header)، محتوای اصلی (Body) و پابرگ (Footer) است. در این بخش هر تغییری در ظاهر قالب‌های پرینت را می‌توان با کمک کدنویسی با Html, Css, Twig انجام داد که در ادامه توضیح داده می‌شود.

درون این کد، بخش‌های مختلف با استفاده از کامنت‌های راهنما مشخص شده‌اند تا محل تقریبی هر جزء (مانند header, main, footer) برای کاربر قابل تشخیص باشد.

همچنین هنگام ویرایش کد، ویرایشگر قابلیت پیشنهاد متغیرها را دارد تا بتوانید به‌سادگی داده‌های مورد نیاز مانند اطلاعات شرکت خود، طرف حساب و همچنین اطلاعات سابماژول یا بخش مورد نظر را در قالب استفاده کنید. لیست و راهنما کامل متغیرهای قابل استفاده در ادامه توضیح داده شده است.

پیش‌نمایش قالب

پس از ایجاد یا ویرایش قالب، می‌توانید با استفاده از پیش‌نمایش، نتیجه تغییرات را بدون نیاز به ذخیره مشاهده کنید. این امکان به شما اجازه می‌دهد قالب را در سایز واقعی بررسی کنید و مطمئن شوید که همه تغییرات به‌درستی اعمال شده‌اند.

⚠️ برای ثبت نهایی تغییرات، لازم است روی دکمه ذخیره کلیک کنید.

معرفی ویرایشگر قالب

ویرایشگر قالب PDF در فلکس، ابزاری کارآمد و قابل انعطاف برای طراحی و شخصی‌سازی قالب‌های چاپی است. این ابزار به کاربران اجازه می‌دهد تا خروجی‌های دلخواه خود را برای انواع اسناد مانند فاکتورها، گزارش‌ها، برچسب‌های بسته‌بندی و سابماژول‌ها به‌صورت کاملاً سفارشی‌سازی‌شده طراحی و چاپ کنند.

از این ویرایشگر می‌توان برای تولید قالب‌های پرینت خاص هر سابماژول استفاده کرد، به‌گونه‌ای که هر واحد از سیستم بتواند متناسب با نیاز خود، ساختار چاپ را تعریف کند. همچنین، امکان طراحی قالب‌های اختصاصی برای لیبل‌های بسته‌بندی کالا نیز فراهم شده است.

ساختار کلی قالب

در این ویرایشگر، ساختار قالب در یک بخش یکپارچه تحت عنوان کد قالب پیاده‌سازی می‌شود. این ساختار شامل تمامی عناصر لازم برای تولید یک قالب کامل است، از جمله بخش‌های مربوط به سربرگ (Header)، محتوای اصلی (Main) و پابرگ (Footer). این بخش‌ها به‌صورت کد داخل ویرایشگر درج می‌شوند و کاربر می‌تواند آن‌ها را با توجه به نیاز خود ویرایش کند.

بخش کد قالب از تکنولوژی‌های HTML، CSS و Twig پشتیبانی می‌کند که در ادامه، نحوه استفاده از هرکدام به‌طور مختصر توضیح داده شده است.

کد نویسی قالب‌های پرینت

شما می‌توانید از کدهای HTML برای ساختاردهی محتوا، از CSS برای طراحی ظاهری و از Twig برای استفاده از داده‌ها و منطق‌های نمایشی بهره بگیرید. تمام این کدها در یک بخش متمرکز قرار گرفته‌اند و امکان پیاده‌سازی قالب‌های چاپی حرفه‌ای و سفارشی را فراهم می‌سازند.

HTML

HTML زبان نشانه‌گذاری است که برای ساختاردهی به محتوای وب استفاده می‌شود.

با استفاده از آن می‌توانیم ساختار و چیدمان بخش‌های مختلف یک صفحه را تعریف کنیم، مثل عنوان‌ها، پاراگراف‌ها، جداول، تصاویر و غیره.

مفاهیم ابتدایی HTML:

تگ‌ها (Tags)

تگ‌ها ساختار اصلی HTML را تشکیل می‌دهند.
هر تگ معمولاً بین < و > نوشته می‌شود.

مثال:

<p>این یک پاراگراف است</p>

<p> تگ باز است
</p> تگ بسته است

تگ‌های پرکاربرد در HTML

<b> یا <strong>

برای پررنگ کردن متن استفاده می‌شود.

<b>این متن پررنگ است</b>

<i> یا <em>

برای کج کردن متن استفاده می‌شود.

<i>این متن کج است</i>

<div>

یک بلاک ایجاد می‌کند که برای بخش‌بندی صفحه استفاده می‌شود.
به تنهایی تغییری در ظاهر متن ایجاد نمی‌کند اما برای چیدمان و استایل‌دهی با CSS ضروری است.

<div>
  <p>این متن داخل یک div است</p>
</div>

<span>

شبیه div است ولی خطی (inline) عمل می‌کند.
معمولاً برای استایل دادن به بخشی از متن استفاده می‌شود.

<p>این متن <span style="color:red;">قرمز</span> است</p>

<hr>

یک خط افقی روی صفحه رسم می‌کند و تگ بسته ندارد.

<p>بالای خط</p>
<hr>
<p>پایین خط</p>

<br>

یک شکست خط (Line Break) ایجاد می‌کند و تگ بسته ندارد.

<p>خط اول<br>خط دوم</p>

تگ‌ها یا Block هستند (مثل div, p, h1) و خط جدید می‌گیرند.
یا Inline هستند (مثل span, b, a) و در همان خط باقی می‌مانند.

<table> (جدول‌ها)

برای ایجاد جدول در HTML استفاده می‌شود.
معمولاً شامل این تگ‌هاست:
- <table> : شروع جدول
- <tr> : ردیف جدول (Table Row)
- <td> : سلول جدول (Table Data)
- <th> : سلول عنوان ستون (Table Header)

نمونه کد:

<table border="1">
  <tr>
    <th>نام</th>
    <th>سن</th>
  </tr>
  <tr>
    <td>علی</td>
    <td>25</td>
  </tr>
  <tr>
    <td>زهرا</td>
    <td>30</td>
  </tr>
</table>

نکته:
برای استایل دادن به جدول‌ها بهتر است به جای border از CSS استفاده کنید.

<img> (تصاویر)

برای نمایش تصاویر در صفحه استفاده می‌شود.
این تگ بسته ندارد و دارای ویژگی‌های مهمی است:
- src : مسیر تصویر
- width و height : اندازه تصویر

نمونه کد:

<img src="image.jpg" width="200" height="150">

CSS

CSS برای استایل‌دهی به HTML استفاده می‌شود. با CSS می‌توانیم ظاهر صفحه وب را تغییر دهیم؛ مثلاً رنگ‌ها، فونت‌ها، فاصله‌ها و موارد دیگر.

برخی از ویژگی‌های رایج CSS:

border-radius: برای گرد کردن گوشه‌ها.
background-color: برای تغییر رنگ پس‌زمینه.
color: برای تغییر رنگ متن.
padding: برای ایجاد فاصله در داخل یک عنصر.
margin: برای ایجاد فاصله بیرونی اطراف یک عنصر.

div {
  border-radius: 5mm;
  background-color: #f0f0f0;
  padding: 20mm;
  margin: 10mm;
  
}

مثال برای اعمال استایل به همه پاراگراف‌ها در صفحه می‌توانیم آن را روی تگ p اعمال کنیم.

p {
  color: blue;
  font-size: 8pt;
}

Twig

Twig یک زبان قالب‌سازی است که به شما این امکان را می‌دهد تا داده‌ها را در قالب‌ها به‌طور پویا نمایش دهید. Twig به‌ویژه برای جدا کردن منطق و طراحی صفحات مفید است.

مفاهیم ابتدایی Twig:

متغیرها: می‌توان داده‌ها را به قالب‌ها ارسال کرد و آن‌ها را نمایش داد.
کنترل‌ها: مانند شرط‌ها و حلقه‌ها که به شما این امکان می‌دهند تا داده‌ها را پردازش کنید و به‌صورت پویا نمایش دهید.

<p>سلام، {{ name }}!</p>

{{ name }} یک متغیر است که مقدار آن به‌طور پویا در صفحه نمایش داده می‌شود.

دستورات شرطی (if)

Twig از ساختارهای شرطی برای کنترل جریان برنامه پشتیبانی می‌کند. مثال:

{% if options.show_material_picture %}
    کدهای مورد نظر
{% endif %}

در اینجا اگر کاربر وارد شده باشد، پیام خوش‌آمدگویی نمایش داده می‌شود، در غیر اینصورت پیام ورود نمایش داده می‌شود.

حلقه‌ها (for)

برای تکرار یک لیست یا آرایه از داده‌ها، از حلقه for استفاده می‌شود:

{% for item in submodule.items %}
<tr>
<td style="text-align: center;">{{ loop.index }}</td>
<td>{{ item.financial_account.code }} - {{ item.financial_account.title }}</td>
<td>{{ item.description }}</td>
<td>{{ item.debtor|number_format }}</td>
<td>{{ item.creditor|number_format }}</td>
<td>{{ item.customer.name }}</td>
</tr>
{% endfor %}

اگر آرایه products خالی باشد، پیام داخل بخش else نمایش داده می‌شود.
در غیر اینصورت، هر محصول به صورت یک آیتم لیست نمایش داده می‌شود.

این متغیرها و دستورات به‌ویژه برای فلکس و قالب‌های پرینت طراحی شده‌اند. برای ساخت قالب‌های پویا و سفارشی، می‌توان از این متغیرها استفاده کرد تا اطلاعات مورد نیاز در نقاط مختلف قالب به‌طور خودکار وارد شوند.
در بخش متغیرهای آماده به معرفی و توضیح دقیق‌تر این متغیرها پرداخته شده است.

نکات حرفه‌ای

نمایش حرفه‌ای اعداد

برای نمایش حرفه‌ای اعداد، جداسازی سه‌رقمی و کنترل تعداد اعشار از این فیلتر استفاده کنید.

{{ number | number_format(decimals, decimal_separator, thousands_separator) }}

decimals: تعداد ارقام اعشار (پیش‌فرض: 0).
decimal_separator: جداکننده اعشار (پیش‌فرض: .).
thousands_separator: جداکننده هزارگان (پیش‌فرض: ,).

<p>{{ 1234567.89 | number_format(2, ',', '٬') }}</p>

نمایش حرفه‌ای واحدپولی

برای نمایش مقادیر پولی به همراه نماد ارز بر اساس استانداردهای بین‌المللی استفاده می‌شود.

{{ amount | format_currency(currency, locale) }}

amount: مقدار عددی پول.
currency: کد سه‌حرفی ارز (USD, EUR,IRR).
locale: کد زبان و منطقه برای تعیین فرمت (en_US).

<p>{{ 199.99 | format_currency('USD', locale='en_US') }}</p>
خروجی نمونه: $199.99

<p>{{ 199.99 | format_currency('EUR', locale='de_DE') }}</p>
خروجی نمونه: €199.99

نکته» برای نمایش واحدهای پولی مانند «تومان» یا «ریال»، بهتر است از فیلتر number_format به همراه نام واحد پول استفاده کنید:

{{ price | number_format }} تومان

نمایش حرفه‌ای تاریخ و زمان

برای نمایش تاریخ و زمان با پشتیبانی از تقویم‌های مختلف (شمسی، میلادی و...) و زبان‌های گوناگون، از این فیلتر استفاده کنید.

{{ date_value | format_datetime(locale, date_format, time_format, calendar) }}

date_value: مقدار تاریخ (now).
locale: کد زبان و منطقه (fa, en).
date_format: فرمت تاریخ (short, medium, long, full).
time_format: فرمت زمان (short, medium, long, full).
calendar: نوع تقویم (jalali, gregorian).

<p>{{ now | format_datetime(locale='fa', date_format='full', calendar='jalali') }}</p>
خروجی نمونه: دوشنبه، 13 مرداد 1404 

<p>{{ now | format_datetime(locale='en', date_format='long') }}</p>
خروجی نمونه: August 4, 2025

نمایش بارکد و تصویر

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

barcode_uri: خروجی را برای استفاده مستقیم در تگ <img> آماده می‌کند. روش پیشنهادی
barcode_svg: بارکد را به صورت کد خام SVG تولید می‌کند.
barcode_html: بارکد را به صورت کدهای HTML می‌سازد.

برای نمایش بارکد، خروجی فیلتر barcode_uri را در ویژگی src یک تگ <img> قرار دهید.

<img class="qr-code"src="{{ company.website | barcode_uri('QRCODE') }}"/>

نوع بارکد	توضیح کاربرد
QRCODE	بارکد دوبعدی محبوب که اطلاعات زیادی مثل لینک یا متن را ذخیره می‌کند؛ سریع اسکن می‌شود.
PDF417	بارکد دوبعدی خطی که اطلاعات متنی و عددی را فشرده ذخیره می‌کند؛ در کارت‌های ملی و بلیط‌ها استفاده می‌شود.
DATAMATRIX	بارکد دوبعدی کوچک و متراکم؛ مناسب برای قطعات صنعتی و محصولات کوچک.
C39 / C39+	Code 39؛ بارکد یک‌بعدی پرکاربرد برای کدگذاری عدد و حروف بزرگ؛ در انبارداری و لجستیک.
C39E / C39E+	نسخه فشرده Code 39 برای چاپ باریک‌تر و صرفه‌جویی در فضا.
C93	Code 93؛ مشابه Code 39 اما فشرده‌تر و با ظرفیت بیشتر.
S25 / S25+	Standard 2 of 5؛ بارکد عددی یک‌بعدی قدیمی؛ معمولاً در انبارها.
I25 / I25+	Interleaved 2 of 5؛ نسخه بهبود یافته 2 of 5 برای تراکم بالاتر داده‌های عددی.
C128 / C128A/B/C	Code 128؛ بارکد یک‌بعدی با پشتیبانی از عدد و حروف؛ بسیار پرکاربرد در لجستیک و پست.
GS1-128	نسخه استاندارد Code 128 برای زنجیره تأمین جهانی (شماره محصول جهانی GTIN).
EAN2 / EAN5	پسوندهای کوچک بارکد EAN برای نمایش اطلاعات اضافه (مثل قیمت یا نسخه مجله).
EAN8 / EAN13	بارکد محصولات فروشگاهی؛ EAN13 استاندارد جهانی است و روی اکثر محصولات دیده می‌شود.
UPCA / UPCE	مشابه EAN ولی مخصوص آمریکای شمالی؛ UPCE نسخه فشرده است.
MSI / MSI+	بارکد عددی ساده برای سیستم‌های داخلی و کارت‌های عضویت.
POSTNET	بارکد سرویس پستی آمریکا برای کدهای پستی.
PLANET	بارکد قدیمی پستی آمریکا برای رهگیری بسته‌ها.
RMS4CC / KIX	بارکد پستی مورد استفاده در انگلستان و هلند.
IMB	Intelligent Mail Barcode؛ نسخه جدید پستی آمریکا با اطلاعات بیشتر.
CODABAR	بارکد یک‌بعدی قدیمی؛ در کتابخانه‌ها و بانک خون استفاده می‌شد.
CODE11	بارکد عددی قدیمی؛ برای سیستم‌های مخابراتی استفاده می‌شد.
PHARMA / PHARMA2T	بارکد خطی مخصوص داروخانه‌ها و صنایع دارویی.

تغییر اندازه با CSS

پس از قرار دادن بارکد در تگ <img>، می‌توانید با استفاده از CSS اندازه آن را به دلخواه تغییر دهید.

.qr-code {
  width: 5mm;
  height: 5mm;
}

کنترل طرح‌بندی و ظاهر در خروجی

حفظ رنگ‌ها در خروجی نهایی

به‌طور پیش‌فرض، ممکن است رنگ‌های پس‌زمینه در سند نهایی (PDF) چاپ نشوند. برای اطمینان از چاپ دقیق رنگ‌ها، از کد CSS زیر برای عناصر مورد نظر خود استفاده کنید.

بطور مثال فرض کنید یک هدر با پس‌زمینه رنگی دارید :

کد HTML

<header class="page-header">
  <h1>فاکتور فروش</h1>
</header>

کد CSS

.page-header {
  background-color: #4A90E2;
  color: white;
  padding: 10mm;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

جلوگیری از سرریز شدن محتوا

اگر محتوای یک بخش (مانند جدول یا باکس توضیحات) زیاد باشد و باعث ایجاد یک صفحه اضافی ناخواسته شود، می‌توانید با overflow: hidden محتوای اضافی را نمایش ندهید.

بطور مثال یک کادر با ارتفاع ثابت که نمی‌خواهید محتوای آن به صفحه بعد برود: