تحويل ملف HTML إلى PDF نصوص عربية عن طريق laravel

كتبها : عبدالفتاح الصلوي منذ سنتين / في رصيف : Laravel

في هذا المقال سوف نتعرف على طريقة تصدير laravel view إلى html ومن ثم إلى pdf مع مراعاة عرض النص العربي بطريقة صحيحة و سنقوم بحل مشكلة النصوص العربية التي تظهر على شكل علامات استفهام (؟؟؟) وذلك عن طريق مكتبة laravel-dompdf , Ar-PHP.

ولتحقيق ذلك سنستخدم حزمة بسيطة تحوي macro للتعامل مع blade view . قم بتنزيل الحزمة عن طريق استخدام الأمر

            composer require ab-alselwi/laravel-arabic-html

قمنا بكتابة هذه الحزمة لدعم اللغة العربية في مكتبة laravel-dompdf من خلال استخدام Ar-PHP سيقوم الباكج بتنزيل المكتبات المطلوبة في حال كانت غير موجودة دون الحاجة لتنزيلها كلاً على حده. يوفر هذا الباكج حالياً دالة واحدة فقط وهي toArabicHTML() بالاضافة إلى انه يمكنك استخدام المكتبات الأصلية في تحويل أي محتوى إلى ملف pdf . يمكنك الإطلاع على المستودع

الإعدادات

بمجرد تنزيل الحزمة يمكنك إعداد المكتبات المرتبطة فقط إن كنت بحاجة لتغيير الإعدادات. سيقوم الأمر التالي بنسخ الإعدات إلى config/dompdf.php

            php artisan vendor:publish --provider="Barryvdh\DomPDF\ServiceProvider"

ينصح بتحديد مجلد الخطوط في المسار storage\fonts . يمكنك نسخ الملف الأصلي الى المسار dompdf/dompdf/lib/fonts

بعض التنسيقات قد لا يتم دعمها في dompdf مثل font-weight مع القيم الرقمية بالاضافة للعديد من التنسيقات التي تعتمد على flex box , ولعرض رسالة خطأ في حال وجود أي تنسيقات غير مدعومة يمكنك تغيير اعدادات عرض الخطاء كما يلي :

            //config\dompdf.php
            'show_warnings' => true , // Throw an Exception on warnings from dompdf

هذا مثال لتنسيقات غير مدعومة font-weight:600 ; لكن يمكن استخدام هذا التنسيق font-weight:bold .

الإستخدام

صيغة الاستخدام لهذه الحزمة كما يلي view('your_blade_view_name')->toArabicHTML(),تسختدم الدالة دالة utf8Glyphs الموجودة في مكتبة Ar-PHP حيث يمكن أن تستقبل الدالة ثلاثة متغيرات اختيارية

1 - $line_length : اختياري رقم - في حال وجود نصوص طويلة قد يتطلب منك تحديد كم حرفاً في السطر الواحد قمنا بتعديل القيمة الافتراضية من 50 الى 100 حرف .
2- $hindo : اختياري قيمة منطقية bool في حال رغبت في تحويل الأرقام الموجودة في المستند إلى أرقام هندية قمنا بتعديل القيمة الافتراضية إلى false حيث ستبقى الأرقام على حالها بألارقام العربية والتي تكتب في اللغة الانجليزية حالياُ
3- $forcertl : اختياري قيمة منطقية bool تتوافق القيمة الافتراضية مع الدالة الأصلية false حيث تشير إلى فرض تحويل اتجاه المستند من اليمين إلى اليسار

مثال للإستخدام

            $html = view('invoice')->toArabicHTML();

            $pdf = PDF::loadHTML($html)->output();

            $headers = array(
                "Content-type" => "application/pdf",
            );

            // Create a stream response as a file download
            return response()->streamDownload(
                fn () => print($pdf), // add the content to the stream
                "invoice.pdf", // the name of the file/stream
                $headers
            );

يمكن تخصيص المتغيرات المذكورة سابقاً كما يلي :

 $html = view('invoice')->toArabicHTML(80,true,true);

بالنسبة لمحتويات ال view سيتم تخصيص خط يدعم ال utf-8 مثل خط DejaVu . font-family: DejaVu Sans !important;

اليك مثال لمحتويات ملف invoice.blade.php

           
            <!DOCTYPE html>
            <html dir="rtl">

            <head>
                <title>Arabic Invoice </title>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1">

                <style>
                    * {
                        font-family: DejaVu Sans !important;
                    }

                    body {
                        font-size: 16px;
                        font-family: 'DejaVu Sans', 'Roboto', 'Montserrat', 'Open Sans', sans-serif;
                        padding: 10px;
                        margin: 10px;

                        color: #777;
                    }


                    body {
                        color: #777;
                        text-align: right;
                    }

                    body h1 {

                        margin-bottom: 0px;
                        padding-bottom: 0px;
                        color: #000;
                    }

                    body h3 {

                        margin-top: 10px;
                        margin-bottom: 20px;
                        color: #555;
                    }

                    body a {
                        color: #06f;
                    }

                    @page {
                        size: a4;
                        margin: 0;
                        padding: 0;
                    }

                    .invoice-box table {
                        direction: ltr;
                        width: 100%;
                        text-align: right;
                        border: 1px solid;
                        font-family: 'DejaVu Sans', 'Roboto', 'Montserrat', 'Open Sans', sans-serif;
                    }


                    .row {
                        display: block;
                        padding-left: 24;
                        padding-right: 24;
                        page-break-before: avoid;
                        page-break-after: avoid;
                    }

                    .column {
                        display: block;
                        page-break-before: avoid;
                        page-break-after: avoid;
                    }
                </style>
            </head>

            <body>

                <div class="row">
                    <div class="column">
                        <p class="text-darky">بيانات باللغة العربية </p>
                    </div>
                </div>
                <h1>ان هذا عبارة عن قالب عادي </h1>
                <h3>ومن هنا قمنا بعرض قالب اعتيادي فقط كمثال توضيحي .</h3>

                <div class="invoice-box">
                    <table>
                        <tr class="top">
                            <td colspan="2">
                                <table>
                                    <tr>
                                        <td class="title">

                                        </td>

                                        <td>
                                            فاتورة #: 123<br />
                                            الانشاء : يناير 1, 2015<br />
                                            تاريخ : فبراير 1, 2015
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>


                        <tr class="heading">
                            <td>العنصر </td>

                            <td>السعر </td>
                        </tr>

                        <tr class="item">
                            <td>تصميم موقع </td>

                            <td>$300.00</td>
                        </tr>

                        <tr class="item">
                            <td>استضافة (3 أشهر )</td>

                            <td>$75.00</td>
                        </tr>

                        <tr class="item ">
                            <td>نطاق (1 عام )</td>

                            <td>$10.00</td>
                        </tr>

                        <tr class="total last">
                            <td>الإجمالي : </td>

                            <td>$385.00 </td>
                        </tr>
                    </table>
                    <div>
                        <p lang="ar">
                            انما نحن هنا نقوم بكتابة نصوص عربية فلما لا يكون هناك اخرى مما قد يحتم علينا أن نكتب أكثر.<br>
                            وعليه فإن السطر هذا يعتبر سطر جديد
                        </p>
                    </div>
                </div>
            </body>

            </html>

يفترض أن تكون المخرجات بهذا الشكل