i have a custom print format when try to send it as attachment or download it as pdf is not as it preview it please any one can help me
Custom print format then maybe code issue and if standard print format then wkhtmltopdf version issue.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap" rel="stylesheet">
</head>
<body>
<div class="logo-welcome">
<div class="student-image">
<div class="student-image-text">
<p class="student-image-p">صورة الطالب</p>
</div>
</div>
<div class="intro-div">
<p class="intro">
وزارة التعليم العالي و البحث العلمي
</p >
<p class="intro">الجامعة التكنولوجية
</p>
<p class="intro">قسم الهندسة الميكانيكية</p>
<p class="intro">استمارة تسجيل طلبة الدراسات الاولية</p>
</div>
<div class="me-logo-div" >
<img class="me-logo" src="/files/med logo.png">
</div>
</div>
<div class="student-information3">
<p class="full-name-title-1" >{{doc.admission_year}}</p>
<p class="full-name-title-2">سنة القبول</p>
<p class="full-name-title-1" >{{doc.admission_type}}</p>
<p class="full-name-title-2">الدراسة</p>
</div>
<div class="full-name">
<p class="full-name-title-1" >{{doc.full_name}}</p>
<p class="full-name-title-2">اسم الطالب الرباعي و اللقب</p>
{{doc.name_in_english}}
اسم الطالب باللغة الانكليزية
<p class="full-name-title-1" >{{doc.blood_group}}</p>
<p class="full-name-title-2">فصيلة الدم</p>
<p class="full-name-title-1" >{{doc.sex}}</p>
<p class="full-name-title-2">الجنس</p>
<p class="full-name-title-1">{{doc.birth_location}}</p>
<p class="full-name-title-2">محل الولادة</p>
<p class="full-name-title-1">{{doc.birth_date}}</p>
<p class="full-name-title-2">تاريخ التولد</p>
</div>
<div class="student-information3">
<p class="full-name-title-1" >{{doc.address}}</p>
<p class="full-name-title-2">العنوان</p>
<p class="full-name-title-1" >{{doc.governorate}}</p>
<p class="full-name-title-2">المحافظة</p>
</div>
<div class="student-information2">
<p class="full-name-title-1" >{{doc.house}}</p>
<p class="full-name-title-2">دار</p>
<p class="full-name-title-1" >{{doc.alley}}</p>
<p class="full-name-title-2">زقاق</p>
<p class="full-name-title-1" >{{doc.neighborhood}}</p>
<p class="full-name-title-2">محلة</p>
</div>
<div class="student-information4">
<p class="full-name-title-1" >{{doc.issuing_authority}}</p>
<p class="full-name-title-2">جهة الاصدار</p>
<p class="full-name-title-1" >{{doc.national_id_number}}</p>
<p class="full-name-title-2">رقم البطاقة الوطنية</p>
</div>
<div class="student-information4">
<p class="full-name-title-1" >{{doc.student_email}}</p>
<p class="full-name-title-2">بريد الاكتروني</p>
<p class="full-name-title-1" >{{doc.phone_number}}</p>
<p class="full-name-title-2">رقم الهاتف </p>
</div>
<div class="student-information5">
<p class="full-name-title-1" >{{doc.guardian_name}}</p>
<p class="full-name-title-2">اسم ولي الامر</p>
<p class="full-name-title-1" >{{doc.mother_name}}</p>
<p class="full-name-title-2">اسم الام</p>
</div>
<div class="student-information6">
<p class="full-name-title-1" >{{doc.guardian_phone_number}}</p>
<p class="full-name-title-2">رقم هاتف ولي الامر</p>
</div>
<div class="student-information6">
<p class="full-name-title-1" >{{doc.student_workplace}}</p>
<p class="full-name-title-2">مكان عمل الطالب</p>
</div>
<div class="student-information4">
<p class="full-name-title-1" >{{doc.fathers_profession}}</p>
<p class="full-name-title-2">مهنة الاب</p>
<p class="full-name-title-1" >{{doc.father_workplace}}</p>
<p class="full-name-title-2">مكان عمل الاب</p>
</div>
<div class="student-information2">
<p class="full-name-title-1" >{{doc.ethnicity}}</p>
<p class="full-name-title-2">القومية</p>
<p class="full-name-title-1" >{{doc.nationality}}</p>
<p class="full-name-title-2">الجنسية</p>
<p class="full-name-title-1" >{{doc.religion}}</p>
<p class="full-name-title-2">الديانة</p>
</div>
<div class="student-information4-2">
<p class="full-name-title-1" >{{doc.high_school_graduation_year}}</p>
<p class="full-name-title-2">سنة التخرج من الاعدادية</p>
<p class="full-name-title-1" >{{doc.examination_number}}</p>
<p class="full-name-title-2">الرقم الامتحاني</p>
{{doc.round}}
الدور
{{doc.average_mark_without_addons}}
المعدل
{{doc.mark_sum_without_addons}}
المجموع
{{doc.franch_language_addons}}
هل يدرس الطالب لغة فرنسية ؟
{{doc.branch}}
فرع الاعدادية
{{doc.specialization}}
التخصص
-:اتعهد بما يلي
1-بصحة المعلومات الواردة التي تم ادراجها في الحقول اعلاه.
2-تسليم اصل الوثيقة للدراسة الاعدادية في موعد اقصاه قبل الامتحانات و بخلافه يلغى قبولي.
3-ان التزم بالدوام الصباحي او المسائي و حسب الجدول المعلن بصفة طالب في الجامعة و ان التزم بتنفيذ كافة الانظمة و التعليمات و الاوامر التي تصدرها الجامعة و الجهات المخولة من قبلها.
4-ان لا اقوم ب اي عمل يخل بسمعة الطالب الجامعي او الجامعة.
5-لم يصدر بحقي اي كتاب يخص تزوير اي وثيقة رسمية.
6-اتحمل كافة التبعات القانونية خلاف ذلك و عليه وقعت.
</div>
<div class="student-information6-1">
<p class="full-name-title-1" ></p>
<p class="full-name-title-2">توقيع الطالب</p>
<p class="full-name-title-1"></p>
<p class="full-name-title-2">توقيع و اسم مدقق الاستمارة</p>
</div>
</body>
</html>
p{
margin-top:0;
margin-bottom:0;
}
.student-image{
width:3.5cm;
}
.confomation{
font-family:"Cairo";
font-size: 16px;
text-align: right;
direction:rtl;
}
.logo-welcome{
display:grid;
grid-template-columns: 1fr 3fr 1fr ;
height:5cm;
align-items:center;
margin-bottom:10px;
}
.intro-div{
height:100%;
display:inline-block;
width:10cm;
}
.me-logo-div{
width:3cm;
}
.student-image-text{
margin-top:0.25cm;
height:4.5cm;
width:100%;
border-style:solid;
border-radius:0.3mm;
border-width:0.5mm;
background-color:white;
border-color:black;
}
.intro{
font-family:"Cairo";
font-size:20px;
text-align:center;
padding-top:2px;
}
.student-image-p{
font-family:"Cairo";
font-size:5mm;
text-align:center;
padding-top:1.75cm;
}
.full-name{
display:grid;
grid-template-columns: 1fr 250px ;
column-gap:3px;
padding-top:20px;
}
.full-name-title{
font-family:"Cairo", Arial;
font-size:16px;
text-align:right;
border-color:black;
border-width:1px;
border-style:solid;
}
.full-name-title-1{
font-family:"Cairo", Arial;
font-size:16px;
text-align:right;
border-color:black;
border-width:1px;
border-style:solid;
padding-right:20px;
}
.full-name-title-2{
font-family:"Cairo", Arial;
font-size:16px;
border-color:black;
border-width:1px;
border-style:solid;
text-align:center;
padding-right:20px;
font-weight:bold;
}
.student-information{
display:grid;
grid-template-columns: 1fr 200px 1fr 200px ;
column-gap:3px;
row-gap:3px;
padding-top:3px;
margin-top:3px;
}
.student-information2{
display:grid;
grid-template-columns: 1fr 100px 1fr 100px 1fr 100px;
column-gap:3px;
padding-top:3px;
}
.student-information3{
display:grid;
grid-template-columns: 2fr 100px 1fr 100px ;
column-gap:3px;
padding-top:3px;
}
.student-information4{
display:grid;
grid-template-columns: 3fr 125px 2fr 190px ;
column-gap:3px;
padding-top:3px;
}
.student-information5{
display:grid;
grid-template-columns: 1fr 150px 1fr 120px ;
column-gap:3px;
padding-top:3px;
}
.student-information6{
display:grid;
grid-template-columns: 1fr 200px ;
column-gap:3px;
padding-top:3px;
}
.student-information4-2{
display:grid;
grid-template-columns: 2fr 200px 3fr 150px ;
column-gap:3px;
padding-top:3px;
}
.student-information6-2{
display:grid;
grid-template-columns: 1fr 400px ;
column-gap:3px;
padding-top:3px;
}
.student-information3-1{
display:grid;
grid-template-columns: 1fr 130px 1fr 100px ;
column-gap:3px;
padding-top:3px;
}
.student-information6-1{
display:grid;
grid-template-columns: 1fr 200px 1fr 200px ;
column-gap:3px;
padding-top:3px;
}
it’s custom format but why in the preview everything is fine
i have share the code with you if you can help me please
Hi,
Please check the version of wkhtmltopdf by following command on server:
wkhtmltopdf --version
Please make sure you have wkhtmltopdf 0.12.6 (with patched qt), if not please install the qt patched version.
You can install the qt patched version by following commands:
wget https://github.com/wkhtmltopdf/wkhtmltopdf/releases/download/0.12.6/wkhtmltox-0.12.6_linux-generic-amd64.tar.xz
tar xvf wkhtmltox*.tar.xz
sudo mv wkhtmltox/bin/wkhtmlto* /usr/bin
sudo apt-get install -y openssl build-essential libssl-dev libxrender-dev git-core libx11-dev libxext-dev libfontconfig1-dev libfreetype6-dev fontconfig
Thanks,
Divyesh Mangroliya
i already have the version wkhtmltopdf 0.12.6 (with patched qt),
any other solution? 
Hi,
Please try the below code, I converted it with inline css:
<body>
<div style="display: grid; grid-template-columns: 1fr 3fr 1fr; height: 5cm; align-items: center; margin-bottom: 10px;">
<div style="width: 3.5cm;">
<div style="margin-top: 0.25cm; height: 4.5cm; width: 100%; border-style: solid; border-radius: 0.3mm; border-width: 0.5mm; background-color: white; border-color: black;">
<p style="font-family: 'Cairo'; font-size: 5mm; text-align: center; padding-top: 1.75cm; direction: rtl;">صورة الطالب</p>
</div>
</div>
<div style="height: 100%; display: inline-block; width: 10cm;">
<p style="font-family: 'Cairo'; font-size: 20px; text-align: center; padding-top: 2px;">وزارة التعليم العالي و البحث العلمي</p>
<p style="font-family: 'Cairo'; font-size: 20px; text-align: center;">الجامعة التكنولوجية</p>
<p style="font-family: 'Cairo'; font-size: 20px; text-align: center;">قسم الهندسة الميكانيكية</p>
<p style="font-family: 'Cairo'; font-size: 20px; text-align: center;">استمارة تسجيل طلبة الدراسات الاولية</p>
</div>
<div style="width: 3cm;">
<img src="/files/med logo.png" style="width: 100%; height: auto;">
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 200px 1fr 200px; column-gap: 3px; row-gap: 3px; padding-top: 3px;">
<p style="font-family: 'Cairo'; font-size: 16px; text-align: right; border-color: black; border-width: 1px; border-style: solid;">{{doc.admission_year}}</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: center; font-weight: bold; border-color: black; border-width: 1px; border-style: solid;">سنة القبول</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: right; border-color: black; border-width: 1px; border-style: solid;">{{doc.admission_type}}</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: center; font-weight: bold; border-color: black; border-width: 1px; border-style: solid;">الدراسة</p>
</div>
<div style="display: grid; grid-template-columns: 1fr 250px; column-gap: 3px; padding-top: 20px;">
<p style="font-family: 'Cairo'; font-size: 16px; text-align: right; border-color: black; border-width: 1px; border-style: solid;">{{doc.full_name}}</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: center; font-weight: bold; border-color: black; border-width: 1px; border-style: solid;">اسم الطالب الرباعي و اللقب</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: right; border-color: black; border-width: 1px; border-style: solid;">{{doc.blood_group}}</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: center; font-weight: bold; border-color: black; border-width: 1px; border-style: solid;">فصيلة الدم</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: right; border-color: black; border-width: 1px; border-style: solid;">{{doc.sex}}</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: center; font-weight: bold; border-color: black; border-width: 1px; border-style: solid;">الجنس</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: right; border-color: black; border-width: 1px; border-style: solid;">{{doc.birth_location}}</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: center; font-weight: bold; border-color: black; border-width: 1px; border-style: solid;">محل الولادة</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: right; border-color: black; border-width: 1px; border-style: solid;">{{doc.birth_date}}</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: center; font-weight: bold; border-color: black; border-width: 1px; border-style: solid;">تاريخ التولد</p>
</div>
<!-- Add similar structure for the other sections like "student-information", "student-information2", etc. -->
<div style="display: grid; grid-template-columns: 1fr 150px 1fr 120px; column-gap: 3px; padding-top: 3px;">
<p style="font-family: 'Cairo'; font-size: 16px; text-align: right; border-color: black; border-width: 1px; border-style: solid;">{{doc.guardian_name}}</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: center; font-weight: bold; border-color: black; border-width: 1px; border-style: solid;">اسم ولي الامر</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: right; border-color: black; border-width: 1px; border-style: solid;">{{doc.mother_name}}</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: center; font-weight: bold; border-color: black; border-width: 1px; border-style: solid;">اسم الام</p>
</div>
<div style="display: grid; grid-template-columns: 1fr 200px; column-gap: 3px; padding-top: 3px;">
<p style="font-family: 'Cairo'; font-size: 16px; text-align: right; border-color: black; border-width: 1px; border-style: solid;">{{doc.guardian_phone_number}}</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: center; font-weight: bold; border-color: black; border-width: 1px; border-style: solid;">رقم هاتف ولي الامر</p>
</div>
<div style="display: grid; grid-template-columns: 1fr 200px; column-gap: 3px; padding-top: 3px;">
<p style="font-family: 'Cairo'; font-size: 16px; text-align: right; border-color: black; border-width: 1px; border-style: solid;">{{doc.student_workplace}}</p>
<p style="font-family: 'Cairo'; font-size: 16px; text-align: center; font-weight: bold; border-color: black; border-width: 1px; border-style: solid;">مكان عمل الطالب</p>
</div>
</body>
thank you very much for your effort but still the same issue
Hi,
Please find below the new code. I converted it using tables:
<body>
<table style="width: 100%; height: 5cm; margin-bottom: 10px; border-collapse: collapse;">
<tr>
<td style="width: 3.5cm; vertical-align: middle;">
<div style="margin-top: 0.25cm; height: 4.5cm; width: 100%; border: 0.5mm solid black; border-radius: 0.3mm; background-color: white;">
<p style="font-family: 'Cairo'; font-size: 5mm; text-align: center; padding-top: 1.75cm; direction: rtl;">صورة الطالب</p>
</div>
</td>
<td style="width: 10cm; text-align: center; vertical-align: middle;">
<p style="font-family: 'Cairo'; font-size: 20px;">وزارة التعليم العالي و البحث العلمي</p>
<p style="font-family: 'Cairo'; font-size: 20px;">الجامعة التكنولوجية</p>
<p style="font-family: 'Cairo'; font-size: 20px;">قسم الهندسة الميكانيكية</p>
<p style="font-family: 'Cairo'; font-size: 20px;">استمارة تسجيل طلبة الدراسات الاولية</p>
</td>
<td style="width: 3cm; vertical-align: middle;">
<img src="/files/med logo.png" style="width: 100%; height: auto;">
</td>
</tr>
</table>
<table style="width: 100%; border-collapse: collapse; padding-top: 3px;">
<tr>
<td style="text-align: right; border: 1px solid black; font-family: 'Cairo'; font-size: 16px;">{{doc.admission_year}}</td>
<td style="text-align: center; border: 1px solid black; font-family: 'Cairo'; font-size: 16px; font-weight: bold;">سنة القبول</td>
<td style="text-align: right; border: 1px solid black; font-family: 'Cairo'; font-size: 16px;">{{doc.admission_type}}</td>
<td style="text-align: center; border: 1px solid black; font-family: 'Cairo'; font-size: 16px; font-weight: bold;">الدراسة</td>
</tr>
</table>
<table style="width: 100%; border-collapse: collapse; padding-top: 20px;">
<tr>
<td style="text-align: right; border: 1px solid black; font-family: 'Cairo'; font-size: 16px;">{{doc.full_name}}</td>
<td style="text-align: center; border: 1px solid black; font-family: 'Cairo'; font-size: 16px; font-weight: bold;">اسم الطالب الرباعي و اللقب</td>
</tr>
<tr>
<td style="text-align: right; border: 1px solid black; font-family: 'Cairo'; font-size: 16px;">{{doc.blood_group}}</td>
<td style="text-align: center; border: 1px solid black; font-family: 'Cairo'; font-size: 16px; font-weight: bold;">فصيلة الدم</td>
</tr>
<tr>
<td style="text-align: right; border: 1px solid black; font-family: 'Cairo'; font-size: 16px;">{{doc.sex}}</td>
<td style="text-align: center; border: 1px solid black; font-family: 'Cairo'; font-size: 16px; font-weight: bold;">الجنس</td>
</tr>
<tr>
<td style="text-align: right; border: 1px solid black; font-family: 'Cairo'; font-size: 16px;">{{doc.birth_location}}</td>
<td style="text-align: center; border: 1px solid black; font-family: 'Cairo'; font-size: 16px; font-weight: bold;">محل الولادة</td>
</tr>
<tr>
<td style="text-align: right; border: 1px solid black; font-family: 'Cairo'; font-size: 16px;">{{doc.birth_date}}</td>
<td style="text-align: center; border: 1px solid black; font-family: 'Cairo'; font-size: 16px; font-weight: bold;">تاريخ التولد</td>
</tr>
</table>
<table style="width: 100%; border-collapse: collapse; padding-top: 3px;">
<tr>
<td style="text-align: right; border: 1px solid black; font-family: 'Cairo'; font-size: 16px;">{{doc.guardian_name}}</td>
<td style="text-align: center; border: 1px solid black; font-family: 'Cairo'; font-size: 16px; font-weight: bold;">اسم ولي الامر</td>
</tr>
<tr>
<td style="text-align: right; border: 1px solid black; font-family: 'Cairo'; font-size: 16px;">{{doc.mother_name}}</td>
<td style="text-align: center; border: 1px solid black; font-family: 'Cairo'; font-size: 16px; font-weight: bold;">اسم الام</td>
</tr>
</table>
<table style="width: 100%; border-collapse: collapse; padding-top: 3px;">
<tr>
<td style="text-align: right; border: 1px solid black; font-family: 'Cairo'; font-size: 16px;">{{doc.guardian_phone_number}}</td>
<td style="text-align: center; border: 1px solid black; font-family: 'Cairo'; font-size: 16px; font-weight: bold;">رقم هاتف ولي الامر</td>
</tr>
</table>
<table style="width: 100%; border-collapse: collapse; padding-top: 3px;">
<tr>
<td style="text-align: right; border: 1px solid black; font-family: 'Cairo'; font-size: 16px;">{{doc.student_workplace}}</td>
<td style="text-align: center; border: 1px solid black; font-family: 'Cairo'; font-size: 16px; font-weight: bold;">مكان عمل الطالب</td>
</tr>
</table>
</body>
Thanks,
Divyesh Mangroliya