add PdfImageAsset #79

ArielMejiaDev · 2024-02-08T20:50:51Z

What makes the PR

It adds a new class helper that encodes as base 64 images, no matter if the image path is relative or an absolute path, and also adds some prefix required for image assets in headers and footers to display images successfully by puppeteer.

The code would look like this

    public function __invoke(): PdfBuilder
    {
        return pdf('pdf.invoice', [
            'invoiceNumber' => '1234',
            'customerName' => 'Grumpy Cat',
        ])->footerView('components.footer', [
            'image' => PdfImageAsset::make('https://avatars.githubusercontent.com/u/7535935?s=200&v=4')
        ])->headerView('components.header', [
            'image' => PdfImageAsset::make(public_path('assets/spatie-logo.png')),
        ]);
    }

It would solve a lot of discussions and issues about how to add images to headers and footers.

like:

I add it as a support class as its concern is simple, I doubt adding the functionality as a trait to the PdfBuilder class but just makes more sense to handle it as a static helper.

Testing

It also adds its test `PdfImageAssetTest.

Docs

It also adds some suggested text for docs in headers and footers.

Demo about the issue

It solves the issue talked about in discussion #71

https://www.loom.com/share/8912fba845214a1d93aefc99fcf93b93?sid=c0389007-fcdf-4110-bee1-82317fc53c91

freekmurze · 2024-02-09T08:00:07Z

Thanks for your work on this PR.

I like the functionality, but I think it could be make easier to use. Instead of letting users call PdfImageAsset::make in a controller, let's provide a Blade directive for them.

It could work like this in a Blade view

@inlidedImage($url)

This way, the controller doesn't have to know that images should be inlined.

Could you make this change? Thanks!

RVP04 · 2024-02-09T10:56:53Z

@freekmurze appreciated for the suggestion @ArielMejiaDev welcoming to do it and waiting for the push

ArielMejiaDev · 2024-02-09T12:51:13Z

Thanks for your work on this PR.

I like the functionality, but I think it could be make easier to use. Instead of letting users call PdfImageAsset::make in a controller, let's provide a Blade directive for them.

It could work like this in a Blade view
@inlidedImage($url)
This way, the controller doesn't have to know that images should be inlined.

Could you make this change? Thanks!

I am on it! thanks

RVP04 · 2024-02-09T13:02:17Z

Eagerly waiting @ArielMejiaDev

ArielMejiaDev · 2024-02-09T14:27:20Z

Hi @freekmurze there is a commit, if you can check this loom (I try to make it short & fun, sorry the audio) you would see the behavior now with a directive (looks lot more cleaner).

Demo

https://www.loom.com/share/e3a5fc63f7894b779371e4c5d13a6a0d?sid=80074810-3d33-4ac6-9293-9d7061afc2b4

I was not able to run all Pest tests that uses toContainText because I do not find how to install pdfToText package with Hombrew

expect()->extend('toContainText', function (string|array $expectedText) {
    $binPath = PHP_OS === 'Linux'
        ? '/usr/bin/pdftotext'
        : '/opt/homebrew/bin/pdftotext';

RVP04 · 2024-02-09T15:00:00Z

@freekmurze waiting for you

RVP04 · 2024-02-10T16:12:09Z

@freekmurze waiting please

freekmurze · 2024-02-12T08:23:47Z

@RVP04 Thanks for your enthusiasm but please refrain from posting reminders here and on other social channels. That won't make me working faster.

freekmurze

@ArielMejiaDev Thanks for your work on this!

freekmurze · 2024-02-12T08:24:32Z

docs/basic-usage/formatting-pdfs.md

@@ -48,6 +48,16 @@ Inside the footer, you can use the following Blade directives:
 - `@pageNumber`:  The current page number
 - `@totalPages`:  The total number of pages

+### Display Images in Headers and Footers
+
+You can add an image using the blade directive `@inlidedImage`


This should be renamed to inlinedImage everywhere in this PR.

Hi @freekmurze , the directive name has been fixed, hopefully it helps and thanks for your efforts

@ArielMejiaDev thanks

RVP04 · 2024-02-12T09:14:08Z

Because I am eagerly waiting for you

freekmurze · 2024-02-12T12:26:23Z

Thanks!

Professor93M · 2024-04-08T15:33:13Z

How I can use PdfImageAsset with the pdf. because it's not found?
and I tried to add image to the header but it's not worked

ArielMejiaDev · 2024-04-08T15:35:55Z

How I can use PdfImageAsset with the pdf. because it's not found? and I tried to add image to the header but it's not worked

@Professor93M

You can set images using the directive:

@imageInlined('your-image.png')

Professor93M · 2024-04-08T16:30:50Z

@ArielMejiaDev
Not work with me.
I tried all of these and nothing show:
@imageInline('images/logo.png')
<img src="{{ asset('images/logo.png') }}">
<img src="{{ public_path('images/logo.png') }}">

But when I used these lines of code:
@inlinedImage('images/logo.png')
<img src="data:image/png;base64,{{base64_encode(file_get_contents(public_path('images/logo.png')))}}">

the pages will not responding and show me This site can’t be reached and I have to stop the serve and re run it by php artisan serve

Please help me if you have any idea.

RVP04 · 2024-04-08T16:47:28Z

You have to use

@imageInlined('your-image.png')

Check yours it is wrong @inlinedImage()

ArielMejiaDev · 2024-04-08T17:15:40Z

Hi @Professor93M as @RVP04 says sorry the correct directive is @imageInlined(), so your current code should look like this:

@imageInlined('images/logo.png')

or using an object property

@imageInlined($model->image)

Professor93M · 2024-04-08T17:28:01Z

Do you mean like that:

<div dir="rtl" style="miargin: 20px auto; padding: 20px 70px; width: 100%;">
    <div style="display: flex; justify-content: space-between; align-items: center;">
        <h1 style="font-size: 16px; font-weight: 700; width: 150px; text-align: center;">Title</h1>
        @imageInlined('images/logo.png')
        <h1 style="font-size: 14px; font-weight: 700; width: 200px; text-align: center;">Title2</h1>
    </div>
    <hr style="border: 1px solid #DE9C55; width: 100%;">
</div>

return pdf('Print.pdf', compact('invoice', 'exchange'))
            ->footerView('Print.footer')
            ->headerView('Print.header')
            ->margins(30, 5, 15, 5)
            ->landscape()
            ->format(Format::A5);

I tried that but it show only the text like that: @imageInlined('images/logo.png')

ArielMejiaDev · 2024-04-08T17:43:23Z

@Professor93M please check first that the file exists in your public directory, then you can follow this example https://github.com/ArielMejiaDev/laravel-pdf-demo/blob/main/resources/views/components/header.blade.php you can check the whole app to see controllers, public directory, resources/views to check blade files etc.

Professor93M · 2024-04-08T17:56:38Z

I used @imageInlined directive but it's not work with me.
I used this code I think it's work but there is problem with my server I think

<figure>
    @inlinedImage('images/logo.png')
</figure>

It show me this page even if I refresh it:

and I have to stop the server and restart it again.

RVP04 · 2024-04-08T18:01:15Z

First check in view whether file is loading or not. Share your actual code controller and view properly to troubleshoot

Also try to clear cache, config and view

Professor93M · 2024-04-08T20:58:51Z

This my code:

Controller

public function invoice($id)
    {
        return pdf('Print.pdf')
            ->footerView('Print.footer')
            ->headerView('Print.header')
            ->margins(30, 5, 15, 5)
            ->landscape()
            ->format(Format::A5);
    }

pdf.blade.php (View)

<html>
    <head>
        <title>Invoice</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body dir="rtl">
        <div class="flex mx-auto space-x-2 sm:space-x-4 font-['Almarai']">
            <div class="w-full px-10">
                <h1 class="text-xl text-center font-bold">Invoice</h1>
            </div>
        </div>
    </body>
</html>

header.blade.php

<div dir="rtl" style="miargin: 20px auto; padding: 20px 70px; width: 100%;">
    <div style="display: flex; justify-content: space-between; align-items: center;">
        <h1 style="font-size: 16px; font-weight: 700; width: 150px; text-align: center;">Title</h1>
        <figure>
            @inlinedImage('images/logo.png')
        </figure>
        <h1 style="font-size: 14px; font-weight: 700; width: 200px; text-align: center;">Title2</h1>
    </div>
    <hr style="border: 1px solid #DE9C55; width: 100%;">
</div>

I run php artisan optimize

same problem

Professor93M · 2024-04-11T08:14:13Z

Any comment gents?
Please need help

RVP04 · 2024-04-11T11:33:00Z

Try to trouble shoot with views first it is getting loaded or not then you we decide for the solution Get Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: Mohammed K. Jumaah ***@***.***> Sent: Thursday, April 11, 2024 12:14:35 PM To: spatie/laravel-pdf ***@***.***> Cc: VP ***@***.***>; Mention ***@***.***> Subject: Re: [spatie/laravel-pdf] add PdfImageAsset (PR #79) Any comment gents? Please need help — Reply to this email directly, view it on GitHub<#79 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AB6ONJ25DMT3U6KNE5PCEF3Y4ZA6XAVCNFSM6AAAAABDAND2FSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANBZGE3DKNBVGE>. You are receiving this because you were mentioned.Message ID: ***@***.***>

ArielMejiaDev added 2 commits February 8, 2024 14:21

add PdfImageAsset

398a477

add docs section

5bf829e

update docs section

b13085f

ArielMejiaDev added 2 commits February 9, 2024 08:22

add a blade directive for inlidedImage

ab1cd44

update docs

6f33318

freekmurze requested changes Feb 12, 2024

View reviewed changes

fix directive name

90f321d

freekmurze merged commit ebe2e03 into spatie:main Feb 12, 2024
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add PdfImageAsset #79

add PdfImageAsset #79

ArielMejiaDev commented Feb 8, 2024

freekmurze commented Feb 9, 2024

RVP04 commented Feb 9, 2024 •

edited

Loading

ArielMejiaDev commented Feb 9, 2024

RVP04 commented Feb 9, 2024

ArielMejiaDev commented Feb 9, 2024

RVP04 commented Feb 9, 2024

RVP04 commented Feb 10, 2024

freekmurze commented Feb 12, 2024

freekmurze left a comment •

edited

Loading

freekmurze Feb 12, 2024

ArielMejiaDev Feb 12, 2024

RVP04 Feb 12, 2024

RVP04 commented Feb 12, 2024

freekmurze commented Feb 12, 2024

Professor93M commented Apr 8, 2024

ArielMejiaDev commented Apr 8, 2024

Professor93M commented Apr 8, 2024

RVP04 commented Apr 8, 2024 •

edited

Loading

ArielMejiaDev commented Apr 8, 2024

Professor93M commented Apr 8, 2024

ArielMejiaDev commented Apr 8, 2024

Professor93M commented Apr 8, 2024

RVP04 commented Apr 8, 2024 •

edited

Loading

Professor93M commented Apr 8, 2024

Professor93M commented Apr 11, 2024

RVP04 commented Apr 11, 2024 via email

add PdfImageAsset #79

add PdfImageAsset #79

Conversation

ArielMejiaDev commented Feb 8, 2024

What makes the PR

Testing

Docs

Demo about the issue

freekmurze commented Feb 9, 2024

RVP04 commented Feb 9, 2024 • edited Loading

ArielMejiaDev commented Feb 9, 2024

RVP04 commented Feb 9, 2024

ArielMejiaDev commented Feb 9, 2024

Demo

RVP04 commented Feb 9, 2024

RVP04 commented Feb 10, 2024

freekmurze commented Feb 12, 2024

freekmurze left a comment • edited Loading

Choose a reason for hiding this comment

freekmurze Feb 12, 2024

Choose a reason for hiding this comment

ArielMejiaDev Feb 12, 2024

Choose a reason for hiding this comment

RVP04 Feb 12, 2024

Choose a reason for hiding this comment

RVP04 commented Feb 12, 2024

freekmurze commented Feb 12, 2024

Professor93M commented Apr 8, 2024

ArielMejiaDev commented Apr 8, 2024

Professor93M commented Apr 8, 2024

RVP04 commented Apr 8, 2024 • edited Loading

ArielMejiaDev commented Apr 8, 2024

Professor93M commented Apr 8, 2024

ArielMejiaDev commented Apr 8, 2024

Professor93M commented Apr 8, 2024

RVP04 commented Apr 8, 2024 • edited Loading

Professor93M commented Apr 8, 2024

Professor93M commented Apr 11, 2024

RVP04 commented Apr 11, 2024 via email

RVP04 commented Feb 9, 2024 •

edited

Loading

freekmurze left a comment •

edited

Loading

RVP04 commented Apr 8, 2024 •

edited

Loading

RVP04 commented Apr 8, 2024 •

edited

Loading