151 lines
4.2 KiB
Plaintext
151 lines
4.2 KiB
Plaintext
|
أريد إصلاح تصدير PDF لجدول الاجتماعات بشكل نهائي.
|
||
|
|
|
||
|
|
⚠️ مهم:
|
||
|
|
التصميم الخارجي للـPDF ثابت (العنوان + الفوتر + حجم الصفحة + الخط DIN Next LT Arabic).
|
||
|
|
التعديل فقط داخل الجدول.
|
||
|
|
|
||
|
|
==================================
|
||
|
|
أولاً: إصلاح المشاكل الحالية
|
||
|
|
==================================
|
||
|
|
|
||
|
|
1. لا يوجد أي فراغات بين الصفوف:
|
||
|
|
- لا padding عمودي
|
||
|
|
- لا margin
|
||
|
|
- ارتفاع الصف = حجم المحتوى فقط
|
||
|
|
|
||
|
|
2. كل اجتماع يجب أن يكون صف واحد:
|
||
|
|
- الرقم + اسم الاجتماع + الحضور + الوقت في نفس الصف
|
||
|
|
- لا يظهر الوقت في صف منفصل أبداً
|
||
|
|
|
||
|
|
3. إصلاح الترقيم:
|
||
|
|
- لا يبدأ من 4 أو رقم خاطئ
|
||
|
|
- استخدم رقم الاجتماع الحقيقي من البيانات
|
||
|
|
|
||
|
|
4. إصلاح ترتيب الحضور:
|
||
|
|
- لا يظهر بشكل مقلوب مثل:
|
||
|
|
-5 سالم -4 علي
|
||
|
|
- الترتيب يكون:
|
||
|
|
1- محمد 2- علي 3- طارق
|
||
|
|
|
||
|
|
5. الدمج:
|
||
|
|
- أي merge في النظام (rowSpan / colSpan) يجب أن يظهر نفسه في PDF
|
||
|
|
- لا تعيد بناء الجدول بدون الدمج
|
||
|
|
|
||
|
|
==================================
|
||
|
|
ثانياً: تنسيق الحضور
|
||
|
|
==================================
|
||
|
|
|
||
|
|
- الحضور في نفس السطر (inline)
|
||
|
|
- كل سطر يحتوي 3 إلى 4 أسماء تقريباً
|
||
|
|
- إذا زاد العدد → ينزل سطر جديد تلقائياً
|
||
|
|
- لا تجعل كل اسم في سطر مستقل
|
||
|
|
|
||
|
|
مثال:
|
||
|
|
1- محمد 2- علي 3- طارق
|
||
|
|
4- سالم 5- عبدالله
|
||
|
|
|
||
|
|
==================================
|
||
|
|
ثالثاً: محاذاة المحتوى
|
||
|
|
==================================
|
||
|
|
|
||
|
|
- عمود "الاجتماع" في المنتصف (center)
|
||
|
|
- عمود "الحضور" في المنتصف
|
||
|
|
- عمود "الوقت" في المنتصف
|
||
|
|
- vertical-align: middle
|
||
|
|
|
||
|
|
==================================
|
||
|
|
رابعاً: عكس تنسيق المستخدم (مهم جداً)
|
||
|
|
==================================
|
||
|
|
|
||
|
|
داخل الجدول فقط:
|
||
|
|
|
||
|
|
- Bold → يظهر Bold في PDF
|
||
|
|
- Center / Right / Left → يظهر نفس المحاذاة
|
||
|
|
- لون الخط → يظهر نفسه
|
||
|
|
- لون الخلفية → يظهر نفسه
|
||
|
|
- حجم الخط → يظهر نفسه
|
||
|
|
|
||
|
|
⚠️ لا تجعل CSS العام يلغي تنسيقات الخلايا
|
||
|
|
|
||
|
|
الحل:
|
||
|
|
- استخدم inline style لكل خلية
|
||
|
|
- مثال:
|
||
|
|
|
||
|
|
<td
|
||
|
|
rowspan="..."
|
||
|
|
colspan="..."
|
||
|
|
style="
|
||
|
|
font-weight: bold;
|
||
|
|
text-align: center;
|
||
|
|
color: #000;
|
||
|
|
background-color: #f2f2f2;
|
||
|
|
font-size: 13px;
|
||
|
|
vertical-align: middle;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
المحتوى
|
||
|
|
</td>
|
||
|
|
|
||
|
|
==================================
|
||
|
|
خامساً: CSS المطلوب
|
||
|
|
==================================
|
||
|
|
|
||
|
|
@media print {
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
table-layout: fixed;
|
||
|
|
border-spacing: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
th, td {
|
||
|
|
padding: 0 4px !important;
|
||
|
|
margin: 0 !important;
|
||
|
|
line-height: 1.05 !important;
|
||
|
|
vertical-align: middle !important;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendees-inline {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0 10px;
|
||
|
|
direction: rtl;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-item {
|
||
|
|
white-space: nowrap;
|
||
|
|
unicode-bidi: isolate;
|
||
|
|
}
|
||
|
|
|
||
|
|
.time-cell {
|
||
|
|
direction: ltr;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
==================================
|
||
|
|
سادساً: شرط مهم جداً
|
||
|
|
==================================
|
||
|
|
|
||
|
|
لا تبنِ PDF من DOM مكسور.
|
||
|
|
|
||
|
|
- استخدم نفس بيانات الجدول في النظام
|
||
|
|
- طبّق rowSpan و colSpan كما هي
|
||
|
|
- كل صف في PDF = صف حقيقي في النظام
|
||
|
|
|
||
|
|
==================================
|
||
|
|
النتيجة المطلوبة:
|
||
|
|
==================================
|
||
|
|
|
||
|
|
PDF مطابق للنظام من حيث:
|
||
|
|
- بدون فراغات
|
||
|
|
- الحضور inline
|
||
|
|
- الترقيم صحيح
|
||
|
|
- الدمج صحيح
|
||
|
|
- الوقت داخل الصف
|
||
|
|
- المحاذاة في المنتصف
|
||
|
|
- جميع التنسيقات (Bold / Color / Alignment) تنعكس
|