مشكلة QRCode و image مع mPDF

Programmer Programmers · 19 فبراير 2024

عند طباعة العنصر

<div class="visible-print text-center">
    {!! QrCode::size(100)->generate(Request::url()); !!}
</div>

هكذا تكون النتيجة

هل يمكن حذف عنصر ال xml.

وأيضا كيف يمكنني التحكم بحجم صورة الخلفية عند الطباعة مع mPDF لانه لايقبل إلا css2

<td style="background-image: url('images/member_image.jpg');
           background-size: 90px;" >
  ...
</td>

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html dir="rtl">

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" 
      content="text/html; charset=utf-8">
    <style>
        body {
            margin: 0;
            font-family: xbriyaz, sans-serif;
        }

        table.table {
            border-collapse: collapse;
            width: 100%;
            border-collapse: 2px solid black;
        }
    </style>
</head>

<body>
    <table class="table">
        @foreach ($hajjs as $items)
            <tr style="margin-top: 50px">
                @foreach ($items as $hajj)
                    <td style="text-align: center; padding-bottom: 30px; 
                    background-image: url('images/member_image.jpg');
                background-size: 90px;" >
                        <h1>بطاقة عضو بعثة</h1>
                        <div><img src="images/avatar/defaultImage.png" alt="" style="width: 100px;"></div>
                        <h2>{{ $hajj->full_name_ar }}</h2>
                        <h2>{{ $hajj->full_name_en }}</h2>
                        {{-- <h4>{{ $hajj-> }}</h4> --}}
                        <h4> رئيس اللجنة </h4>
                        <h4> عضو </h4>
                      <h4> عضو </h4>
                    </td>
                @endforeach
            </tr>
        @endforeach

    </table>
</body>

</html>

تم التعديل في 19 فبراير 2024 بواسطة Programmer Programmers

محمد عاطف17 · 19 فبراير 2024

كما اخبرتك بالنسبة لموضوع الصور فهذا هو الحل

بتاريخ 51 دقائق مضت قال محمد عاطف11:

ذلك الحل هو ان تنشئ عنصر جديد يحمل الصورة مثل هذا الكود

<td style="text-align: center; padding-bottom: 30px;" >
  	<div style="height: 50px;width: 50px;background-image: url('images/member_image.jpg');background-size: 90px;" ></div>
    <h1>بطاقة عضو بعثة</h1>
    <div><img src="images/avatar/defaultImage.png" alt="" style="width: 100px;"></div>
    <h2>{{ $hajj->full_name_ar }}</h2>
    <h2>{{ $hajj->full_name_en }}</h2>
    {{-- <h4>{{ $hajj-> }}</h4> --}}
    <h4> رئيس اللجنة </h4>
    <h4> عضو </h4>
	<h4> عضو </h4>
</td>

ويمكنك تغير طول وعرض العنصر كما تريد .

اما بالنسبة لجزء ظهور عنصر ال xml

بتاريخ 29 دقائق مضت قال Programmer Programmers:
<?xml version="1.0" encoding="utf-8"?>

يمكنك استبدال السطر هذا

    {!! QrCode::size(100)->generate(Request::url()); !!}

بهذا الكود

{!! substr((string) QrCode::size(100)->generate(Request::url()),38) !!}

وهذا الملف كاملا مرفق لك

index.blade.php

ياسر مسكين · 19 فبراير 2024

هل يمكنك إرفاق مجلد المشروع كاملا لتصفحه ومعرفة المشكلة بالتحديد؟

محمد عاطف17 · 19 فبراير 2024

لحذف عنصر ال xml يجب عليك حذف هذا السطر لانه ليس من عناصر html , لذلك هو يظن انه نص تريد كتابته .

بتاريخ 47 دقائق مضت قال Programmer Programmers:
<?xml version="1.0" encoding="utf-8"?>

اما بالنسبة للصور فان كانت المشكلة ان الصورة خلف النصوص وتاخذ الصف باكمله , فان الخطأ هنا انك تضع الصورة خلفيه على الصف كاملا .

بتاريخ 47 دقائق مضت قال Programmer Programmers:

 <td style="text-align: center; padding-bottom: 30px; 
                    background-image: url('images/member_image.jpg');
                background-size: 90px;" >
                        <h1>بطاقة عضو بعثة</h1>
                        <div><img src="images/avatar/defaultImage.png" alt="" style="width: 100px;"></div>
                        <h2>{{ $hajj->full_name_ar }}</h2>
                        <h2>{{ $hajj->full_name_en }}</h2>
                        {{-- <h4>{{ $hajj-> }}</h4> --}}
                        <h4> رئيس اللجنة </h4>
                        <h4> عضو </h4>
                      <h4> عضو </h4>
                    </td>

لاحظ هنا انك تخبره بان يضع خلفية الصف كاملا .

لذلك الحل هو ان تنشئ عنصر جديد يحمل الصورة مثل هذا الكود

<td style="text-align: center; padding-bottom: 30px;" >
  	<div style="height: 50px;width: 50px;background-image: url('images/member_image.jpg');background-size: 90px;" ></div>
    <h1>بطاقة عضو بعثة</h1>
    <div><img src="images/avatar/defaultImage.png" alt="" style="width: 100px;"></div>
    <h2>{{ $hajj->full_name_ar }}</h2>
    <h2>{{ $hajj->full_name_en }}</h2>
    {{-- <h4>{{ $hajj-> }}</h4> --}}
    <h4> رئيس اللجنة </h4>
    <h4> عضو </h4>
	<h4> عضو </h4>
</td>

ويمكنك تغير طول وعرض العنصر كما تريد .

Programmer Programmers · 19 فبراير 2024

بتاريخ 34 دقائق مضت قال ياسر مسكين:

هل يمكنك إرفاق مجلد المشروع كاملا لتصفحه ومعرفة المشكلة بالتحديد؟

هذا المشروع

QRCodeExambleInLaravel.zip

بتاريخ 21 دقائق مضت قال محمد عاطف11:
لحذف عنصر ال xml يجب عليك حذف هذا السطر لانه ليس من عناصر html , لذلك هو يظن انه نص تريد كتابته .

اما بالنسبة للصور فان كانت المشكلة ان الصورة خلف النصوص وتاخذ الصف باكمله , فان الخطأ هنا انك تضع الصورة خلفيه على الصف كاملا .

لاحظ هنا انك تخبره بان يضع خلفية الصف كاملا .

لذلك الحل هو ان تنشئ عنصر جديد يحمل الصورة مثل هذا الكود
<td style="text-align: center; padding-bottom: 30px;" >
  	<div style="height: 50px;width: 50px;background-image: url('images/member_image.jpg');background-size: 90px;" ></div>
    <h1>بطاقة عضو بعثة</h1>
    <div><img src="images/avatar/defaultImage.png" alt="" style="width: 100px;"></div>
    <h2>{{ $hajj->full_name_ar }}</h2>
    <h2>{{ $hajj->full_name_en }}</h2>
    {{-- <h4>{{ $hajj-> }}</h4> --}}
    <h4> رئيس اللجنة </h4>
    <h4> عضو </h4>
	<h4> عضو </h4>
</td>
ويمكنك تغير طول وعرض العنصر كما تريد .

هذا السطر أضفته بعد ظهور الخطأ أي ليس سبب المشكلة

<?xml version="1.0" encoding="utf-8"?>

ياسر مسكين · 19 فبراير 2024

بتاريخ 45 دقائق مضت قال Programmer Programmers:
هذا المشروع

QRCodeExambleInLaravel.zip 70.47 MB · 5 تنزيلات

هذا السطر أضفته بعد ظهور الخطأ أي ليس سبب المشكلة
<?xml version="1.0" encoding="utf-8"?>

بالنسبة للمشكلة التي واجهتك فيجب عليك إزالة هذا العنصر من الـ XML لأنه ليس جزءا من عناصر HTML. بالتالي، يُعتبر كنص ترغب في كتابته.

أما بالنسبة للصور، إذا كانت المشكلة تتعلق بتغطية الصورة للنصوص واحتلالها للصف بأكمله، فالسبب يكمن في وضعك للصورة كخلفية للصف بأكمله.

والحل ممكن من خلال إنشاء عنصر جديد يحتوي على الصورة، مثلما هو موضح في الكود التالي:

<td style="text-align: center; padding-bottom: 30px;">
      <div style="height: 50px; width: 50px; background-image: url('images/member_image.jpg'); background-size: 90px;"></div>
    <h1>بطاقة عضو بعثة</h1>
    <div><img src="images/avatar/defaultImage.png" alt="" style="width: 100px;"></div>
    <h2>{{ $hajj->full_name_ar }}</h2>
    <h2>{{ $hajj->full_name_en }}</h2>
    {{-- <h4>{{ $hajj-> }}</h4> --}}
    <h4> رئيس اللجنة </h4>
    <h4> عضو </h4>
    <h4> عضو </h4>
</td>

Programmer Programmers · 19 فبراير 2024

بتاريخ 13 دقائق مضت قال محمد عاطف11:
كما اخبرتك بالنسبة لموضوع الصور فهذا هو الحل

اما بالنسبة لجزء ظهور عنصر ال xml

يمكنك استبدال السطر هذا
    {!! QrCode::size(100)->generate(Request::url()); !!}
بهذا الكود
{!! substr((string) QrCode::size(100)->generate(Request::url()),38) !!}
وهذا الملف كاملا مرفق لك

index.blade.php 3.63 kB · 0 تنزيلات

أريد أن تظهر صورة الخلفية هكذا

Screenshot2024-02-19220955.png.c9e1960e99fd8fac6ef2c99ebde005f4.png

هذي صورة الخلفيه

عند الطباعة تختفي

مشكلة QRCode و image مع mPDF

السؤال

Programmer Programmers

6 أجوبة على هذا السؤال

Recommended Posts

محمد عاطف17

ياسر مسكين

محمد عاطف17

Programmer Programmers

ياسر مسكين

Programmer Programmers

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية