Generate PDFs in Laravel: A Deep Dive into Laravel PDF Export with Spatie/Browsershot

hey there wonderful viewers it's a fantastic to reconnect with you all after what feels like a mini forever I know it's been a while since our last video and for that I genuinely apologize life decided to throw a bunch of businesses my way but hey we are here now and that's what really matters so let's dive back into the world of coding with a big smile [Music] [Music] welcome back fellow developers today we have got something special lined up one of my popular video is generating PDF using laravel Snappy package if you have not watched that video I will put the link of it in the video description you should watch that video also it is a fantastic package but I have seen many comments on that video you have faced issues with generating PDF using that laravel Snappy maybe due to device compatibility or other hiccups I totally get it those Tech glitches can be frustrating so today we are going to explore a more reliable package that is generating PDF using browser short in laravel before we begin let's understand what browser shot is all about browser short is a convenient laravel package that uses the Headless Chrome browser to render HTML pages and generate PDFs it simplifies the process of creating printable content from your application the main reason to use laravel Snappy package was it allows to execute JavaScript so we can print different kinds of charts for example pie chart extra in Period we can do same thing with the browser short package as well in this video we will try this out as well so now let's try this so first let's go to terminal and let's create a fresh laravel application so here I'll say Lara well new so let's say our laravel application name is laravel PDF tutorial now let's go to cdnurable PDF tutorial and let's open this in the editor now initialize it and get add git commit initial so now PSP Artisan cell and let's open this in the browser this is done this is our flashlight level application our next step is to install this browser short package so let's go to its documentation from this link let's go to this requirements first here we need to install this for PTI package so let's copy this npm command and and here I'll run npm installed puppeteer it is installed now let's see our next step next we are going to install the browser short package so let's go to this installation and setup link and let's copy this composer require command and run this here on this terminal our installation is complete now it's time to generate PDF files so let's run PHP at sensor and in the editor let's open the routes web.php and here let's generate PDF files so let's go to the documentation and here is the link for creating PDFs it allow us to take screenshots of the websites so let's try this and paste it here and make sure to import this browser short class this one and the save method we will pass the path where it is going to save this PDF file by default it is going to save this in the public directory right here so let's try this so in the browser here refresh and here we get error the npm and node node this error is because by default it is going to look for npm and node in the user local bin directory because I am using NVM so the path of npm and node is not matching here with user local bin directory so if in the terminal I run which load it has given this installation path of node similarly if I run which npm it will give us this path for the npm so how we can fix this issue so to fix this let's go to the documentation and here in the requirements here we have two methods to specify the node and npm binary or we can use this method to specify this part so let's try this I am going to copy this and paste this here and now let's copy this part and replace it right here now save and strike and of course we need to run PHP at sensor command now let's refresh and here we go it's done and now let's see if it is downloaded and here we have example PDF let's open this containing folder and here we have example PDF this is the screenshot of the example.com similarly let's take a screenshot of laravel.com and this is a method save the screenshot in the PDF by detecting this extension if we say extension PNG or jpg it will print that screenshot in the PNG format let's see that also so refresh and in the public directory here we have example PNG image or instead of this save method we can explicitly call save video let's name this laravel PDF let's go to browser refresh is done now in the public folder we have laravel PDF file here we go it has printed the entire web page in the 13 Pages now this path is hard coded so we should specify this part in the environment file so let's open the dot EnV file here let's say browser short include path is equal to this value now in the config services in the end here I'll add a new configuration for browser short include path which is going to be dollar path this one and then concat with EnV this EnV configuration like this and now here we can say config Services dot browser short include PA so now let's try this one if it works for first let's delete the studio files and now in the browser refresh itself and now here we have PDF file right now we are taking a screenshot of the website using this URL method instead of this we can also pass HTML to print in the PDF so here we can call HTML and then we will pass a HTML Mark so let's say in the H1 tag laravel PDF tutorial now let's save this and let's run this in the browser and then they probably pull that here we have PDF file that prints laravel PDF tutorial right now what we are doing we are saving this generated PDF file in this specified path right but sometime you may not want that instead you want to download this or display this in the browser so how we can do that for that first instead of the same method people call PDF it will give us the base64 decoded string instead of saving on disk and now here we can return new response and make sure to import this class and next here we will pass dollar PDF this one and the status code is going to be 200 and in the third parameter we will pass headers here header is going to be content type is application PDF and content disposition is attachment and next we will pass the file name let's say if I name is example.pdo and finally we will pass content length and for that here we will call helper method scr length and we will pass the PDF variable is done let's test this in the browser refresh and now you can see it has downloaded the PDF file example.pdf let's open this laravel PDF tutorial similarly we can also stream this in the browser so for that what here we can do let's comment this and again return new response and here also we will pass dollar PDF status is going to be 200 and in the third parameter the editors are going to be content type application ADF and content disposition is and here we will pass in line file name example dot PDF now let's try this one refresh and now we can see the PDF in the browser now in this code the difference is right here here we pass the content disposition attachment and here we have passed inline and here it needs a Content length as well now in this code you can see we have passed the HTML markup in this HTML method but most of the time what we want we create a view file and the HTML of that view file should be printed in the PDF so how we can Implement that so for that let's create a view file so for that let's go to resources views and here we will create a new directory let's say PDFs and here we will create a example dot blade dot PHP foreign and here let's say in the H1 tag laravel PDF and now here we want to pass this HTML right here for that what we can do let's say here HTML is equal to view and then here view path it's a PDFs dot example and then we will call render method it will return the HTML for this view file and now we can pass this HTML variable here let's save this and try refresh here we go we have now laravel PDF from The View if your application has a requirements to export multiple kinds of PDF files then you can create a common layout for them let's see this here in the views we will create a directory components and here we will create a layout file PDF layout Dot blade.php and here let's copy this entire HTML markup and paste it here in this PDF layout file now now here we can remove this next in the Sprint B slot in this layout file we can create a common header photo for each PDF file export for example let's say here we want to display our logo so here I can say and in this step I have image tag for now let's print the placeholder HTTP Place old dot it and let's say it's width and height is 100 and text logo that I want to display it in the center so start this time with 100 percent display lags and align items Center this is going to be the common in every PDF file so now in the example PDF here we can see X PDF F1 layout this name and then here we can print our PDF content let's add some lorem text now let's go to browser and refresh here we go it has printed the image and Lauren text this image is not in the center maybe I have made some mistake in The Styling here the weight hundred percent display Place align item Center so mistake is here when we provide the display Flex by default Netflix direction is Row in that case align it and Center here it should be justified content Center refresh and this Diabetes Center if we say Flex Direction column and now in that case here we need to provide the align items Center and now it will also display the image in Center here we go this browser short breakage provide us many helper methods let's see this in the documentation so in the creating PDFs here we can provide the paper site let's see this paper size let's call the size 100 comma under and here we can see it has seen the paper size similarly it provides the apartment by default A4 size here it is and and here it has provided the various options like we can say a three size paper now it is a three size paper next we can provide the margin go first let's see A4 size paper and provide the margin e crash and here we go you can notice the margin from the all sides next it also allow us to add common header photos for each page of the PDF files so before showing this I want to show you how you can create different pages so in the layout file I'll add a new style it is going to be page hyphen break page break after always and now in the example PDF let's add Dave and its class is page break here I will say in H1 tag H1 and right here it's page two now let's see refresh and here you can see this is page one and next here we have page two so whenever you need a new page you can add this tip with the page break class and it will insert a new page and now if you want to show common header and footer for each page in that case we can use these three methods let's try this so for that let's create a header encoder view file so in the views PDF let's add a partial header dot blade dot PHP and another partial underscore quota dot play dot PHP and now in the header LED fine let's say you want to display a logo so logo and style font size 14px similarly let's copy this in the equator delete file and let's say here folder content and now in the controller web.php router in our case so here I'll say dollar dollar header HTML is equal to view PDFs underscore header blender similarly knoller older HTML is equal to uo PDFs footer render it next we need to pass these two right here so here let's go to documentation and we will copy these three methods and paste it here so it will enable the header putter in the PDF and next here we need to pass the header HTML so that's all this variable and here we need to pass footer HTML and let's start this estimate now let's go to browser and refresh and here we go you can see here we have logo from the header View and here we have portal content and in the next page also you can see that display the logo from the header View and this is the footer content maybe in the footer you may want to display the page number and total pages so let's see this how we can do this so the photo blade file here let's add a new div and here style is phone size let's say 10px and color let's say line nine nine let's add margin as well so margin 15 Peaks and 486 clear both in case our signing has load and next here I'll display page and in the span tag class each number here this class will automatically inject the current page of the PDF file and next here we will say of span and here the class is total pages so this class will inject the current page number and this total page class will inject the total pages of the PDF file see here in the logo from The Hidden View file and if we see in the folder this is the page one or page 2 it has total two pages and here page two of two pages here you may say seven more issue so here you can see it has printed the logo image in this section but if you want to display this image in the header section it will not work let's see so from the layout this one let's copy it from here and paste that in this hidden partial let's go to browser and refresh you can see here the image is not printed the reason for it is that the header HTML and the photo HTML only accepts plain text the header and footer htmls will not accept any external resources so here this link will not work so here what we can do let's copy this image tag and then we will say data image PNG and next base 64 comma and then paint base 64 in code and file cat contents from this URL now the image content of this URL is encoded in the base64 now it should print the image so refresh here we go it has displayed the image from the header so let's reduce its height width let's say style width let's say 30px and height is also 30px and in the web.php right here let's add the margin top 20 picks and write let's say 15 now the crash here we get the logo for each Pages it is too small let's increase little tied now it's better now one of the most asked question is that how we can change the font size and phone family of this PDF file the answer is easy one the CSS so let's do this let's say in the PDF layout file here in this time we can add let's say body and here we will say specify the own size let's say 1.2 Ram now go to browser refresh now here you can notice the account size is increased similarly if you want to change the code quality let's go to Google phones and here let's try this cursible let's select this one and copy this and in the layout file paste it right here next here I'll add a one more class let's say class name is cursive and here we will specify the quad family this one next in the example blade file let's add the another paragraph and its class is cursive and one more thing here we are using external links so here we should add one more method wait until Network idle this one so it should wait until the every extender links are loaded so now in the browser let's refresh now here you can see we have successfully changed the upon family of this paragraph next in the web.php I almost forget to mention that here we can pass the variables that we want to print in the PDF documents for example let's say title and NSA Titan is example and now we can print that title let's say Here download Titan a flash here in this example I know this is basic but I think in let's mention it because maybe some of the developers are watching those are new in laravel favor now here you can notice that here we are doing loads of things first render the SQL file for View and then we have rendered the SQL file for header and Footers then we have called this browser short to generate PDF and then we downloaded it in the PDF format here we are doing too many thing so to make it simpler let's wrap this in the PDF wrapper class so first let's close all of these open files and next in the app here we will create a new folder you can name it anything or no let's name IT services Services directory I'll create a class PDF wrapper dot PHP legendary new class and this class going to have a concept method here we will initialize the browser short class so we can say dollar this tdf generator is equal to new browser short so here we will say protected browser short dollar PDF generator and next we also need rotected string dollar HTML and next for adder and footer vegetables let's declare variable for them also so protected saying donor header HTML and put that HTML next in this construct method let's add the default values for header HTML inputer so we can say under this Adder HTML is equal to this view file and for footer it is going to be underscore putter played file to render the content of the PDF here I'll create a new method let's say method load View and it is going to accept a string dollar blade boiled and it may accept area of data so Dollar Days sg1 is equal to view bowler blade file and dollars data and and it is going to return developes so we can chain methods for this PDF wrapper and here also we will specify it will be going to return cell sometimes we may need to pass ht1 directly so let's add another method to load as table so so here we will see HTML and in that case we do not need this data and we will say this HTML is equal to Dollar HTML next this is this part is done and this part is also done next we want to generate PDF so let's create a new method generate and here we will return with all that this PDF generator and then we will call all these methods so let's copy all of these and paste it right here in this actual we will pass dollar this HTML and in the header Festival we will say dollar this Adder HTML next dollar this quarter HTML instead next method is the PDF we will not call this right here because we may need to see this generated PDF in the specified path so instead of this we will create a new method save and it is going to accept the string path and then we will say dollar test generate and save area dollar path and it is going to return y and this generate method is going to return browser short next we may want to download the generated files so we will create a method download and it is going to accept the file name and then in the web.php copied is and paste it here and command this then import this modification right here file name and this so dollar PDF is equal to or like this generate media and next this file name replaced here like this and next we may also need to see this in the browser so let's create a method for this also method stream saying dollar file name and then copy this and paste it here now in this variable here we will say download this generate PDF and this file name is going to be passed here now this class is ready Let's test this and let's remove everything from here and we will going to say later new PDF referral and then load View enable pass the view path let's see PDF Dot example and this pedia for example this title variable shown as pass the data Titan let's say PDF wrapper Plus so first let's test the method save we want to save it as PDF Apple dot PDF now let's go to browser refresh here view note found the error is the attracted name is PDFs not PDF now let's go to browser again be fresh so we see blank page so it should have downloaded it here we have PDF wrapper PDF file and here we have the rendered content now let's try the download method The Flash and here and go he says the PDF tracker file is downloaded and finally our next method is stream e plus and it has displayed this PDF in the browser similarly if we do not want to pass view fine instead we want direct estimate we can call load HTML and we can pass direct estimate like H1 HTML data refresh and here we have HTML data now you may want to override the header and footer content so let's create a method for them also so in the PDF wrapper after this load HTML let's create a new method load HTML and it is going to accept saying dollar header HTML and dollar paste adder HTML is equal to dollar error testing and it's going to return download this type end serve similarly you will create method code load router HTML and here don't let this what our HTML is equal to rotor estimate and now here we can override the folder and header HTML so load Adder HTML let's say H1 adder load Hotel paragraph tag footer yes and here it has printed the header but font size is too small that it is almost invisible that mean Zoom little will to show you n is maximum Zone but still I'll need as well let me add four size to it Style called size let's say one and similarly either set to order as well refresh it is still hardly visible unless said quote in picks instead of RAM refresh nowadays invisible so we have successfully override the existing footer and adder and if you want to add this simply pass empty tag let's say paragraph tag now you can see the header and Order not pastify and if we see the browser short class and look for the height Adder now here you can see that the browser short is also hiding the header and footer by passing empty tag similar like we did here now it is looking much cleaner now finally let's try to export the Google charts in the PDF as we did with the lateral Snappy packet so let's go to browser search for Google charts s open this link let's try this pie chart so here so here we can copy all of this script create a new charts file chart stored plate dot PHP paste it here and in the web.php here we will pass load view it is going to be PDFs Dot charts now let's copy browser and refresh and here it has printed the chart if I compare this with the laravel snappy package in the snappy package we have modified the JS files we have noted the different versions so it was little complicated in the snappy packet but if we see this in the browser shot we just drop in and it just worked this is all in this video I hope you enjoyed it thank you for joining me on this coding Adventure today if you found this video helpful don't forget to give it a thumbs up and share it with others who might benefit and remember we are back on the coding wagon aiming to bring you weekly videos until next time happy coding [Music]

Channel: QiroLab

Views: 3,398

Keywords: How to generate PDF in Laravel, Laravel browser-shot, Laravel dompdf, Laravel snappy, pdf generation, pdf export, download pdf, HTML to PDF, generate pdf in Laravel using dompdf, Laravel pdf invoice, Best Laravel PDF package, dompdf vs snappy vs browser-shot, generate pdf from blade template, download pdf with custom header, pdf security options, send a PDF email attachment

Id: 320vwRDqi9w

Length: 44min 23sec (2663 seconds)

Published: Thu Jan 11 2024