Ruby on Rails #17 Gem Wicked PDF - generate, save, and send PDFs

hello and welcome in this episode i would like to go through the process of installing and using one of my favorite ruby gems wikitpdf now this is a gem for generating pdfs out of html and now we're going to install it into ruby on rails application and see how it works so i already have a boilerplate ruby application where i just have a list of posts so i can see the list of posts and open a post and now we're going to install this charm and go through the readme step by step so first we're going to take the gem wicket pdf and add it to our gem file so going to the end of the gem file adding wicked pdf and also we will need to add this other gem we get html to pdf binary to be able to do it on our local machine so we add the second gem and we type bundle okay and next we're going to type rails generate biket pdf so rails generate wicket pdf and it created a new initializer let's have a look at it we'll go to initializers digit pdf here it is it is just an empty file in which we can add different configs okay and we also have this mime type application pdf that we need to register in initializes mime types so we're going to do it i'm going to mime types add this okay save and what do we do next let's uh go to the basic usage so we have this responded to do different formats i will go to our post controller and say that we can respond not only to html as we can by default but also to pdf so i'm going to go to our posts controller and in our show action i will say that we can respond to html and do pdf okay and let's go to our posts okay i will start the server rails so i'm going to our posts and i will open a post and say dot pdf and it says template is missing now i think it is something that this rhythm is actually missing we should also add template option so i will say pdf file name and template from which we are actually going to generate the pdf is going to be let's say posts slash show dot html dot eib okay and you see it downloaded this file it downloaded the file because event.postslash2.pdf it downloaded this file name let's have a look at it and you see we have generated a pdf from our posts show so we have a title the content the links to edit and back so it kind of works and all we did we had a pdf file name basically here we can have any name we can have the post id for example so let's say post id and we will say add post dot id and we will have it generate the template post show now let's go to both path and i shall create a separate link to view the post in pdf or to generate the pdf let's go to our posts index and here we will have another link it will be linked to pdf it will be post path at post coma format pdf so let's have a look you see we have this link to pdf and to show and if you look at the bottom of my page you will see that this goes to post slash 2 and this goes to post slash 2 dot pdf because we set format pdf so let's see if we'll get the post number eight in the pdf format i press the button and you see it downloads a pdf named post id 8 dot pdf and here we will see the contents of this file so the title the content the links to edit and back and yes it is the eighth post so it kind of works okay now let's say we want to have a separate file from which we are going to generate pdfs so we will have a file that will not have the edit link and backlink now we are generating the pdf from posts slash show.html.eib and let's create a new file let's say it will be named post.html.erb and we will generate the pdf from post.html.erb like this i will refresh oh yeah and actually i need to input some content into it so i will just open the show page i will add the content without the edit and backlinks i will add something like uh pdf generation date and it will be equals time dot zone dot now and we will also add the post id close dot id okay and let's uh see if it works so again what are we going to do we are going to generate the pdf of a post from not the post.show but from the posts post view they don't have their links and we have some additional pdf related data so i'm going to press pdf and we are downloading a new pdf file let's have a look at it and you see we have this contents so we managed to generate a pdf for our post show from another file and now let's actually try to generate a pdf for the whole list of posts that we have in the application so let's just go to the post controller and we're going to add this respond to the format in our index action like this so we have the html by default and in pdf we're going to run the posts account but not post id just post and it will be at post dot account and the template is going to be post slash index dot html dot erb okay and let's see if it works i will go to posts dot pdf and you see it downloaded a file let's open it and we have the whole list of posts so looks kind of nice we can also add a new link in our post view to display the posts as pdf not just one single post as pdf let's go to our index page and here we will add a new link equals link to posts pdf posts path format pdf ok save and refresh and we have both pdf i press the button and it generates a pdf of all the posts so this is the basic usage of wikipedia now let's keep reading the readme for more advanced usage so we can create a separate layout for our pdf files at the moment it inherits from our general application layout and we can create a separate layout for it so let's say we will go to our readme we will copy this and create a separate pdf layout in our application i will go here new file pdf.html add this file and i will say generate pdf from this file so we want to use this layout not the application layout we can also see it in the settings so here are all the options for managing our pdfs we can say layout equals pdf i will go to our post controller and also say that layout equals pdf like this okay let's see if it works i'll go to posts pdf and let's have a look at what was generated so yeah we have the pose and it doesn't seem uh really much different from what we had before but here is something interesting now pdfhtml.erb we added a link to wikidpdf stylesheets link tag so we can create some stylesheets that would be working only with our pdfs let's do it we're going to go to our assets stylesheets and add a document named pdf.scss we create this page and let's add some settings for our pdf so what are we going to add we will add something like this so table and we will add borders to our table and width hundred percent to our table now let's see if our server is running yes it is running i refresh and you see it is uh automatically working for the whole application now we don't want this pdf and css layout to work for the whole application that's why we will go to stylesheets application.css and remove required tree so that there are the files in the stylesheets folder do not go for the whole application okay i refresh and you see the pdf.css does not work with the application layout so let's try to generate our pdf once again and as we are using a separate layout for our pdfs that uses the stylesheet link tag for pdf we should actually have these styles visible only in our pdf so i open the pdf of our posts and you see it has this styling so looks nice this way we can add the specific styling that would work only for our pdfs and make them more beautiful okay and let's go to the next step here it actually is so we can add different advanced options to make our pdf generation more beautiful for example we can make page size or orientation or whatever let's try adding an orientation now by default it is portrait let's make it landscape i will go to our posts controller and say orientation landscape okay i will refresh i will press post.pdf and open the posts and it should be in a landscape view so it should be not like this but like this and you see it has updated we can also make some settings as uh page size so let's also try adding page size page size let it be avon so a really big page i made it i saved it i'm going to post pdf and let's have a look at this really big pdf now okay and you see it is a really big page now but all our posts are full width because we set this in our css so looks nice and actually you don't have to add all these settings for each of your pdf generations here you can do it just in the initializer so let's say i will move some of this logic into the initializer all our pdfs are going to have layout pdf i'm going to have orientation landscape and page size a four okay let's be portrait and a4 okay so i'm just going to move these settings into our wiki pdf config file as you see we already have some of them as a prompt here and i'm going to restart the server because we have edited an initializer and after editing and initialize it we need to restart the server so basically what are the expectations the expectations either the files will be a pdf portrait and page size will be a4 okay and let's download the post pdf fonts again works nice so there are quite a lot of different settings that you would like possibly to go deeper into based on your use case and this is how you can use basically the gem let's save our changes and then we will go even deeper so i will go to git status git add all git commit main gem wicked pdf okay and now what else would you like to do for example what if we want to add a pdf as an attachment in an email well that's also quite easy if we go to the super advanced usage okay so let's say that we have a mailer to send the pdf of a specific post to a specific user let's try creating a mailer we will go to rails generate mailer posts mailer and it will be a mail like new post ok and let's go to this mailers folder in our application and go to posts mailer and here we have this new post method we can actually open it in our preview let's go to our rail server and in the rail server we'll go to slash rails mailers and here we have our post mailer and new post okay if we open new post you see it automatically goes from from at example.com to to at example.org because we set it in our posts mailer the subject is new post by default the name of the action and here is the content that we have in our views and here we also want to add an attachment and the attachment should be the first post for example or the second post so we are going to say something like post equals post dot first and also add post equals pose.first and go into wikipdf settings we will want to create a pdf from string so i will take this setting and we will say pdf equals wicked pdf new pdf from string now we are not going to use any footer just like this so we have our layout it's going to be just pdf.html.erb and here we're going to have the template posts slash post dot html dot erb okay and we're going to say that this pdf is going to be their attachment for our mailer now to set an attachment in our mailer i don't remember how to type it uh here actually yeah i've also written a whole blog post where you'll be able to see all the settings for this video so that you can copy paste easily and you can also see it in a text format so here we are going to take attachments equals and basically with this setting we are saying that we are going to have an attachment named post and the post id.pdf and it equals this pdf so with this big pdf option we generate a pdf and store it and if we add it to our attachments now let's see if this works i will refresh and you see in our attachments we have post one dot pdf let's say not post first but post dot second okay i will refresh and we should have post to for example we have those two so let's open it we'll open the pdf it saves i open it and here we have the pdf for the second post so works really well let's save our changes uh i'll go and stop the server get status git add all get commit main uh send pdf as attachment okay and also you would definitely want to deploy this to production now there can be quite a lot of issues with deploying to production but i found a really nice way to make it work with heroku specifically so you would first need to add the gem html to pdf heroku in group production and actually html to pdf binary should be in the group development so we're going to our gem file and we are replacing this with gem html to pdf binary for development and heroku for production it is the first step and second step will be uh in our pdf dot erb dot rb initializer we're also going to make some changes so it's going to work slightly differently basically we're going to have wicked pf config like this and inside the merge command we're going to set all our settings with the layout orientation page size and so on so now i'll just remove the part that we are not using and with these settings for heruku it should work so that's basically it and i'll save the changes get status kit add all git commit main pdf for heruku so i hope you liked the video and find it useful and please comment like and subscribe and have a great day

Channel: SupeRails

Views: 2,769

Keywords: ruby, rails, ruby on rails, tutorial, programming

Id: tFvtwEmW-GE

Length: 20min 11sec (1211 seconds)

Published: Sun Apr 25 2021