I'm trying to generate a pdf file with a header and footer. The header has two logo (left and right ) and footer ( one logo ). I used browsershot and base64 for my logo as only base64 works on puppeteer header/footer. My code works fine when I use only one logo, but if I use two logo I get the following error in Postman.
Symfony\Component\Process\Exception\ProcessFailedException: The command "PATH=$PATH:/usr/local/bin:/opt/homebrew/bin NODE_PATH=`npm root -g` node '/home/lance/pledgebox/pledgebox_be/vendor/spatie/browsershot/src/../bin/browser.cjs' '{"url":"file:\/\/\/tmp\/1706712696-0382534001692006980\/index.html","action":"pdf","options":{"path":"\/home\/lance\/pledgebox\/pledgebox_be\/public\/pdf\/part1.pdf","args":[],"viewport":{"width":800,"height":600},"displayHeaderFooter":true,"headerTemplate":"<style>\nspan.logo { content: url(\"data:image\/png;base64,iVBORw0K...\");\nwidth: 50px;\nheight: 50px;\n}\nspan.logo2 { content: url(\"data:image\/png;base64,iVBORw0...\");\nwidth: 50px;\nheight: 50px;\n}\n<\/style>\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" \/>\n <title>Grant Proposal<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @media print {\n body {\n -webkit-print-color-adjust: exact;\n }\n\n div.paper[data-size=\"A4\"] {\n margin: 0;\n box-shadow: 0;\n -webkit-column-break-inside: avoid;\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n div.pagebreak {\n break-after: page;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n <header style=\"display: flex; justify-content: space-between; width: 100%; font-size: 19px; margin: 0 1cm\">\n <span class=\"logo\"><\/span>\n <div style=\"text-align: center\">\n <p style=\"font-weight: 500\">CARMEL DEVELOPMENT CENTER Test<\/p>\n <\/div>\n <span class=\"logo\"><\/span>\n <\/header>\n<\/body>\n\n<\/html>","footerTemplate":"<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" \/>\n <title>Grant Proposal<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @media print {\n body {\n -webkit-print-color-adjust: exact;\n }\n\n div.paper[data-size=\"A4\"] {\n margin: 0;\n box-shadow: 0;\n -webkit-column-break-inside: avoid;\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n div.pagebreak {\n break-after: page;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n <footer style=\"display: flex; justify-content: space-between; width: 100%; font-size: 12px; margin: 1cm 1cm 0 1cm\">\n <div style=\"text-align: left; max-width: 40%;\">\n <p>CARMEL DEVELOPMENT CENTER Test<\/p>\n <p>Series of 2023<\/p>\n <\/div>\n <span class=\"logo\"><\/span>\n <\/footer>\n<\/body>\n\n<\/html>","format":"A4","waitUntil":"networkidle0","margin":{"top":"25.4mm","right":"25.4mm","bottom":"25.4mm","left":"25.4mm"},"newHeadless":true}}'" failed.
Exit Code: 127(Command not found)
Working directory: /home/lance/pledgebox/pledgebox_be/public
Output:
================
Error Output:
================
in file /home/lance/pledgebox/pledgebox_be/vendor/spatie/browsershot/src/Browsershot.php on line 953
#0 /home/lance/pledgebox/pledgebox_be/vendor/spatie/browsershot/src/Browsershot.php(646): Spatie\Browsershot\Browsershot->callBrowser()
#1 /home/lance/pledgebox/pledgebox_be/vendor/spatie/browsershot/src/Browsershot.php(572): Spatie\Browsershot\Browsershot->savePdf()
#2 /home/lance/pledgebox/pledgebox_be/app/Services/GrantProposalsService.php(1010): Spatie\Browsershot\Browsershot->save()
#3 /home/lance/pledgebox/pledgebox_be/app/Http/Controllers/API/Pdo/GrantProposalsController.php(324): App\Services\GrantProposalsService->generatePdf()
#4 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Routing/Controller.php(54): App\Http\Controllers\API\Pdo\GrantProposalsController->generatePdf()
#5 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php(43): Illuminate\Routing\Controller->callAction()
#6 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Routing/Route.php(260): Illuminate\Routing\ControllerDispatcher->dispatch()
#7 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Routing/Route.php(205): Illuminate\Routing\Route->runController()
#8 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Routing/Router.php(798): Illuminate\Routing\Route->run()
#9 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(141): Illuminate\Routing\Router->Illuminate\Routing\{closure}()
#10 /home/lance/pledgebox/pledgebox_be/app/Http/Middleware/IsPdo.php(21): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}()
#11 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(180): App\Http\Middleware\IsPdo->handle()
#12 /home/lance/pledgebox/pledgebox_be/app/Http/Middleware/SessionTimeOut.php(61): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}()
#13 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(180): App\Http\Middleware\SessionTimeOut->handle()
#14 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Routing/Middleware/SubstituteBindings.php(50): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}()
#15 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(180): Illuminate\Routing\Middleware\SubstituteBindings->handle()
#16 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Routing/Middleware/ThrottleRequests.php(126): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}()
#17 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Routing/Middleware/ThrottleRequests.php(62): Illuminate\Routing\Middleware\ThrottleRequests->handleRequest()
#18 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(180): Illuminate\Routing\Middleware\ThrottleRequests->handle()
#19 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Auth/Middleware/Authenticate.php(44): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}()
#20 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(180): Illuminate\Auth\Middleware\Authenticate->handle()
#21 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(116): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}()
#22 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Routing/Router.php(799): Illuminate\Pipeline\Pipeline->then()
#23 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Routing/Router.php(776): Illuminate\Routing\Router->runRouteWithinStack()
#24 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Routing/Router.php(740): Illuminate\Routing\Router->runRoute()
#25 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Routing/Router.php(729): Illuminate\Routing\Router->dispatchToRoute()
#26 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(190): Illuminate\Routing\Router->dispatch()
#27 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(141): Illuminate\Foundation\Http\Kernel->Illuminate\Foundation\Http\{closure}()
#28 /home/lance/pledgebox/pledgebox_be/vendor/fruitcake/laravel-cors/src/HandleCors.php(52): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}()
#29 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(180): Fruitcake\Cors\HandleCors->handle()
#30 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php(21): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}()
#31 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/ConvertEmptyStringsToNull.php(31): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle()
#32 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(180): Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull->handle()
#33 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php(21): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}()
#34 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TrimStrings.php(40): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle()
#35 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(180): Illuminate\Foundation\Http\Middleware\TrimStrings->handle()
#36 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/ValidatePostSize.php(27): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}()
#37 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(180): Illuminate\Foundation\Http\Middleware\ValidatePostSize->handle()
#38 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/PreventRequestsDuringMaintenance.php(86): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}()
#39 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(180): Illuminate\Foundation\Http\Middleware\PreventRequestsDuringMaintenance->handle()
#40 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Http/Middleware/TrustProxies.php(39): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}()
#41 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(180): Illuminate\Http\Middleware\TrustProxies->handle()
#42 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(116): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}()
#43 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(165): Illuminate\Pipeline\Pipeline->then()
#44 /home/lance/pledgebox/pledgebox_be/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(134): Illuminate\Foundation\Http\Kernel->sendRequestThroughRouter()
#45 /home/lance/pledgebox/pledgebox_be/public/index.php(55): Illuminate\Foundation\Http\Kernel->handle()
#46 /home/lance/pledgebox/pledgebox_be/server.php(21): require_once('...')
#47 {main}
Header blade view
@props(['proposal_title'])
<style>
span.left-logo { content: url("data:image/png;base64,iVBOR...");
width: 50px;
height: 50px;
}
//error if I use two logo/base64 image
span.right-logo { content: url("data:image/png;base64,iVBOR...");
width: 50px;
height: 50px;
}
</style>
<x-pdf.layout>
<header style="display: flex; justify-content: space-between; width: 100%; font-size: 19px; margin: 0 1cm">
<span class="left-logo"></span>
<div style="text-align: center">
<p style="font-weight: 500">{{ $proposal_title }}</p>
</div>
<span class="right-logo"></span>
</header>
</x-pdf.layout>
Browsershot controller
$html_part1 = view('grantproposals.pdf-part1', ['grant_proposal' => $grant_proposal])->render();
$html_part2 = view('grantproposals.pdf-part2', ['budget_info' => $grant_proposal->budget_info])->render();
$html_part3 = view('grantproposals.pdf-part3', ['grant_proposal' => $grant_proposal])->render();
$header = view('grantproposals._header', ['proposal_title' => $grant_proposal->proposal_title])->render();
$footer = view('grantproposals._footer', ['proposal_title' => $grant_proposal->proposal_title])->render();
Browsershot::html($html_part1)
->showBrowserHeaderAndFooter()
->headerHtml($header)
->footerHtml($footer)
->format('A4')
->waitUntilNetworkIdle()
->margins(25.4, 25.4, 25.4, 25.4)
->newHeadless()
->save($path . 'part1.pdf');
//part2
//part3
