Collaborate on HTML Invoice Generator for Non-profit Organizations with Ease Using airSlate SignNow

Html invoice generator for non-profit organizations

I'm building this invoicing app for my upcoming course and I want to give people the ability to actually download their invoice as a PDF now there are some built-in Solutions like being able to try to print the page and instead selecting save as PDF I can even manipulate this a little bit with CSS but it's not quite the same as having a download button that just downloads it right away for you so we're going to see how we can do this with tools like HTML pdf.js which is a JavaScript Only Solution see how we can do this in a react environment since we're in nextjs using react PDF and alternatively how we can do it with Puppeteer we're going to also see how all these stack up against each other and the pros and cons of each now you did hear that right I have an upcoming full stack nextjs course complete with authentication database management and even accepting payments so make sure you head over to space jelly. nextjs below to get more info and get exclusive access so starting off inside the app I have this invoices page where I can go to one of my specific invoices and I have this little button here that I can select and ultimately I want to be able to add a little button here where somebody can come through and they can actually just simply down download the PDF of their choice now looking at the application I we can see that I'm dynamically generating this by pulling the data using drizzle I'm quering it from Zada and everything's locked up and secure using Clerk and we're going to learn how to do that inside of my course but for this context all we need to know is that that data is coming in dynamically I'm passing it off to the actual invoicing template which is going to be client side manage because I have some interactive features there but ultimately I want to be able to add that button so that somebody can download that now let's start off with the probably simplest solution which is going to be HTML to PDF now one of the things that I like about this solution is we don't really have to manage much HTML outside of our existing HTML we can kind of just pass it along and download it as is so let's see how we can do that now there's a couple of different ways that you can get started you can even just drop this in as a script if you want but I'm going to use npm to this so I'm going to in this HTML to pdf.js package so I'm going to run npm HTML pdf.js and if we look at the usage for a second all we're really going to do is we're going to grab the element that we want to actually print and we simply pass it into this module so let's give this a try at the top of the page I'm going to import HTML PF from HTML pdf.js and the way that this is going to work as you notice we grabbed a Dom element for this so what we want to do is we want to on the client grab whatever Dom element that we want and we want to pass that along to that HTML PDF function so I went ahead and added a new button for us to be able to handle this we have an onclick Handler where right now it's not doing anything but now let's go ahead and Trigger that HTML to PDF function but now we got to actually pass an an element now just for Simplicity I'm going to go ahead and just tack on an ID to this container and let's call it invoice I'm going to say constant element is equal to document query selector or I probably could have done by ID let's call this invoice and let's pass in that element now if I head to the browser and I now open up that select menu I click download invoice we can see that that file did download and if I go ahead and open that we can see that well it mostly worked there's some issues with it for how it got rendered we can also see that we got a lot of the information and it's kind of the same layout but there's also some issues with it we can see that it's kind of getting chopped off we can see that it has some elements that we probably don't want so how can we fix these things now to start I found this GitHub issue that shows a kind of similar issue to what I was seeing things were kind of shifted down and it doesn't quite align to how you how we wanted to actually show sounds like there's some kind of issue with tailin CSS but we can see that a solution that was suggested here is that we can add this base layer style to our CSS file where if I head to my Global CSS file I just simply drop that in at the bottom where I'll be sure to link this GitHub issue inside of the description we can now head over and we can actually try to download that invoice again we get the file and if we open it we can see that the invoice looks much better now what else though I have some elements on here that I don't necessarily want to show in my generated PDF including I don't want this change status button just generally this UI showing up inside of the invoice now it doesn't seem to be in the documentation but I found this other option just kind of Surfing along through the issues where I found that if you add data html2 canvas ignore to an element it's going to hide that so I'm going to do just that I'm going to find that area of where I want to actually hide that and it looks like this is the div that has that drop down let's go ahead and add that data attribute and let's give this another try I'm going to go ahead and download the invoice open up the PDF and we can see that it's gone perfect now another thing that I think that this could have is maybe some margin and this is actually inside of the documentation so if you want to just kind of search for margin or kind of look through all the different options we can see that we can add some margin to this as well so the way that we can set that up is we can pass in our second argument we can save margin and let's say maybe 20 to start and again downloading my invoice we can open it up and I think that's looking much better we have a pretty solid invoice and you can really control it with whatever UI you want to add to that original page so that you don't really have to maintain two separate uis or you know pages in order to provide that experience now there's ways that we can optimize this to start we could probably use a ref instead of using documented query selector to kind of do this the react way right um but just for Simplicity I use the element here and plus I don't want to add forwarding refs on my container right now maybe I don't have to do that in the future but either way it's just a little bit easier for me to do this but one thing that we can do to optimize this is I don't want to necessarily load HTML to PDF every single time that page loads I only want to load it if somebody's actually trying to download the PDF so how about I dynamically import it only if somebody's clicking that button so I'm going to go ahead and comment out HTML to PDF at the top and back where I'm actually adding that I'm going to say constant HTML to PDF equals a weight where I'm going to add my require and then HTML to pdf.js so now what's happening is whenever this click is uh actually triggered it's going to download the code needed in order to run the HTML to pdf.js code that way I can then grab my element pass it in and I can download it just to make sure that it's still working as it expected I can download my invoice and open it up and we can see that it's actually working but just to kind of see how that's working inside of the network tab I'm going to go ahead and open it up and hide myself let's get rid of the console there if I go ahead and clear this out we'll refresh the page first and clear this out if I now hit download invoice we can see what's actually happening is we see that JS file that's downloaded before it actually downloads the file but we can see if we still open that up we have our perfect invoice now this generally works pretty well that was relatively easy actually but a big issue with this is this is an image that's getting rendered this isn't selectable text and one thing that's really important about PDFs especially for where you want people to be able to select the text copy the text search through the PDF to find what they're looking for you might know this for uh uploading your PDF for job RS where you want the system to be able to scan it and find all those keywords within your resume but it can't do that if it's just a static image and they don't have any kind of processing like OCR behind that so how can we try to get that in a different format so that we can actually embed real text in that so the next one that we're going to look at is react PDF but it's going to be a little bit different from the one before where before we were able to just kind of pass it an element it was able to take that HTML and download it which was really nice and simple but this one we're going to have to kind of implement in a little bit different way we're going to have to manually create a route to be able to download that from and we're going to actually have to maintain different components in order to render that UI or view rather we can even see that if we hit try it out they have a nice little repple here here where we can see exactly how these components are going to look all the different text that's going to go inside of it but now we actually have a renderable PDF and you can render this on your own if You' like but this is actually selectable and you can paste that in or you know whatever you want but basically that text is embedded which is critical so let's get started the first thing of course is we're going to the package so I'm going to copy this script I'm going to go ahead and it and if we scroll down we can kind of see what the usage is going to be like we have a simple example here that we can use to to kind of get it up and running really quickly but like I said before we're going to do this a little bit differently we don't want to Simply embed the PDF inside the page we want to create and download that PDF so what we're going to actually do is we're going to create a dynamic route Handler that's going to allow us to access that invoice at a certain path we're just going to tack on PDF at the end so that when somebody hits that we're going to generate that PDF and download it for them so let's go ahead and I'm going to add a new folder under my Dynamic invoice ID route called PDF and inside that I'm not going to add a page. TSX I'm going to add a route. TSX because we're ultimately creating a route Handler we're not creating a page now here I'm going to go ahead and Export an async function called get which is going to create our get Handler and let's for now just return an a response. Json with test equals true let me go ahead and fix that e but what we're going to do is we're going to grab the parameters out of the URL now as I mentioned before we're under a dynamic route we have this invoice ID and what we're going to want to be able to do is query that invoice information as we're generating the PDF so that that's all going to be dynamic so what we're going to do is we're going to bypass the request because we're not going to use that we still need to type it out to make typescript happy but then we're going to access the params just like we would inside of a page Handler but let's also type that out as well so we have our pams and inside of that we're going to have our invoice ID which will be a string now just to test this out to see that this is working let's go ahead and just return test pams invoice ID just to see how that works and now if I go to/ PDF at the end of this we can see that we get that response and we get that test is two which is going to be that invoice ID so we can just see that correlation there now as I said what we want to do is use that parameter in order to query the invoice data so that we can actually apply it inside of that invoice so I'm going to go ahead and open up the sidebar and head back over to my page and I'm going to skip ahead a little bit on this but I'm going to essentially copy all this different query information if you want you can abstract it into a nice function that you can pull in here but ultimately I want to copy all these details including the authentication including the organization support uh that we're going to learn in that course of course plug uh that we can use in order to query that invoice from the database so that we can dump that information into the invoice okay so back inside of my route. TSX file we can see that I still have that get I copy and pasted all that quering inside of here and now instead of that Pam let's just uh pass through this invoice or rather this invoice just to make sure that that's not working so if I refresh the page again we should see that we now have that invoice so now we dynamically have that inside of our route Handler so that we can now generate that PDF so to start I'm going to Simply copy and paste this example from the documentation and I'm going to go ahead and paste that above my get Handler because ultimately what we're going to do is we're going to render this document that we create with react PDF and then we're going to take that and respond with it now in order to actually render that document we can head over to react PDF's node API which you can find in the side bar here and we have a couple different options here where what we're going to look for is we're going to look for render to stream where if we look at this example here we can take the my document component and we can pass it to this render to stream function where that's going to be what we ultimately want to pass back in our response so I'm going to go ahead and Tack on that import from react PDF and I'm going to go back down to the bottom where I'm creating that new response and I'm going to create a new stream and let's call that where we're going to await render to stream and I'm going to pass in my document and the reason that we're able to pass this in as a react component because again we're in a route Handler we're not in a page is because we added that TSX ending so make sure when you're creating this route Handler Handler that you are adding that TSX ending or the uh extension to that file but now instead of responding with this Json here we're going to actually respond to the stream and instead of using the response uh object here we're going to actually use the next response object so I'm going to return new next response where I'm going to go ahead and pass in that stream now we need to ultimately make sure that we import that from next server and if you notice here we're getting a typescript Eric because from my understanding what the difference is we're having a difference between what the browser would be a readable stream versus a node readable stream and the expectations of what next response is trying to receive so what we want to do is we're going to cast that first as unknown and then we're going to cast it additionally as a readable stream and I'm not a huge typescript uh expert so maybe there's a better way to do this let me know in the comments is there a better way to handle this otherwise this is going to work for our purposes but now let's actually see if this is working so I'm going to go ahead and refresh my route and now we can see that we are generating that PDF we can see that let me get over to the developer tools we can see that the text is selectable and we can do all the things that we would do with a normal PDF which is working really well but of course this doesn't look like our invoice so now we need to recreate that and rather than just painstakingly writing through all these details I'm going to go ahead and copy and paste this in so what I did in instead is I now have this invoice component just renaming it properly I'm passing through all my invoice details and if I scroll back up to the top for a second we can see I have all these different styles in order to support this page I have it typed out I have my invoice component which is going to render that you or riew and we can see that I have all these different text nodes that's going to ultimately represent this new PDF or the invoice version of my of my invoice page now of course as I mentioned before this does require us maintaining it separately which is a little bit of a bit of a bummer but we do get that added text so let's just see if this works if I now refresh the page again we can see that I do get that nice rendered invoice and it's a little bit the details I must have missed something when I was pasting that in but we can see that we get all that different Dynamic information if I zoom in a little bit we can see that everything that's coming from that original invoice page is getting applied here and I can really set this up because it's a react at this point I have the different styles I can still do whatever I want to actually I must have hit back here I can still do whatever I want in order to render that page I just now have to do it in a separately maintained page and again it doesn't need to be the exact same thing if you're downloading a PDF of it it doesn't necessarily need to be the same UI but just depending on how you want to actually maintain it it might be a little bit easier if you doing it the other way but again the really important thing with this one is that you can get that selectable and readable text from the PDF which can be critical for a lot of use cases now going back to that issue that I had it looks like I accidentally added an additional text node but that's why I had that additional setion pushing everything down it's cuz I accidentally just had that text Noe but we can see that you know it's not the most beautiful invoice in the world but it's still going to give me that usability now finally as another option to generally render HTML we have Puppeteer which we can do in a couple different ways now if you follow along with my last video we spun up a web scraper API where we were able to use Puppeteer to take a screenshot of a website and then we were able to return that back and upload it to cloudinary where we can then return that resource if you haven't taken a look at that and you want to get started there be sure to check out my video above but what's Happening Here is when when we're launching a browser we're going to go ahead and we're going to take a screenshot of whatever URL that we visit we're going to upload that and then we're going to ultimately return that resource now I went ahead and set that up inside the app where we can see here that I'm making the request to the scraper I'm passing along just the homepage right now where I'm taking that resource and I'm just constantly logging out so let's see what that looks like if I now go ahead and select download invoice we can see that it might take a second it's coming but now we see that we get that resource where that's going to be that uploaded asset if I hide myself we can see that I get that URL that if we open it up in a new browser we can see that we do get that screenshot of our application now that's just grabbing a screenshot of the page and it's uploading it to Cloud Nary which technically we could use cloud to convert it to a PDF but I think we can do better to start Puppeteer has this PDF method which actually gives you the ability to generate a PDF so let's try that instead I'm going to go ahead and update that to PDF I'm going to make sure that I actually upload that PDF as my resource now if we go ahead and try that again I'm going to hit download invoice and wait a few seconds of course for that to finish we see we get this resource only this time we have a PDF instead of just an image and if I open up that secure URL again we can see that we actually do have a PDF because we're now using that PDF method instead of a screenshot which just generates an image so we naturally just have this PDF that we can now do whatever we want including returning it to our user now you might have noticed that we now automatically have a sizing that looks more closely to a legal document that you might have a normal piece of paper but the the nice thing is you can actually change this format if you prefer a different size this PDF method actually takes in an object where you can specify the format and let's start digging into the actual PDF where we can see the different options where if we find the format let's find that the format look at that paper format and keep digging in we can see that these are all the options that we have available so we can have the letter we have legal we have all the different A's hide myself we can see all the different options that we have depending on what kind of document size that we want to actually use when producing that PDF but I think I'm happy with the default for now so I'm just going to leave that as an empty object but what I do want to do is when I have this resource I now want to trigger that download similar to what HTM HTML to PDF did I want to make sure that as soon as we get that URL for the PDF we automatically download it for the person so what I did is I set up this nice little helper for downloading a URL where all it's going to do is it's going to download The Blob for that file it's going to create a virtual anchor tag it's going to set that link so that I can then virtually click that Anor tag so that it will then download that file for me it's just a little nice helper in order to make that a little bit easier but we can see that if I now Implement that let's say download URL I'm going to pass in the re the resource. secure URL but now if we try that again I'm going to click download wait a few seconds and we probably have some kind of waiting indicator here we can see that we do download that file and we can see that we have that nice PDF and we're loading it directly from the file system now now this seems to work pretty decently well but here's the problem this page that I'm on this invoices page this is an authenticated page this isn't a public page so I can't just dump this into Puppeteer and expect that Puppeteer is able to be able to navigate to that page and actually get a screenshot let's see how that works if I instead of doing Local Host I can pass in this authenticated route now if we go ahead and try that again if I go ahead and click invoice and wait a few seconds of course once I get my resource I'm going to just open up that secure URL and once I do we can see that we get redirected to the signin page now the tricky thing is there's no blanket solution for being able to just allow anybody in or Puppeteer in this case to be able to access any route that they want for any user or customer that they want that's first of all a big security hole but also it's just not as technically feasible as it might as we might want it to be now we do have some options that we can try though in the world of clerk which is what I'm using for the authentication here maybe I can generate a using their API or SDK and maybe I can build a flow where in this instance you can create this accept page where it'll automatically see that and it'll log that user in but I went ahead and gave that a try where we can see that I'm first going to grab the user ID from this session so that I can make sure that they are actually logged in again remember we're posting this from the application so we're able to get that authenticated session from within this end within this endpoint but once I do know that they are authenticated I can then create a new for that user that's going to have a short expiration in this case I'm just sting it to 5 minutes which is short could probably be even shorter than that but once I have that I'm going to navigate them to this accept page which is going to be I'll show you in a second here but we can pass through the because except we're basically going to log them in on their behalf and then we're going to take in this redirect parameter which is going to go through to that original site URL that we were passing through now I'm additionally giving this weit for Network idle just to make sure that the page is actually loaded before we try to grab the PDF and everything but we go through the same process after that and pass back the resource now again this accept page all I did was grab this from the documentation page that I just showed you the only thing that I did was this redirect to parameter so that once I knew that they are logged in and the signin process has actually been done I'm able to then redirect them to that page but as far as the application goes I can now try to give that download invoice a try again let's see what happens I can see that I get my resource and let's take a look at that if I grab the secure URL we can see that we did get that authenticated session and we were able to get that screenshot of the actual invoice page and again this isn't any kind of security hole this is based off of my existing session of my logged in instance because the website that I produced that from was grabbing from my logged in session so what that's just doing is taking an additionally vended which I have shortlived I think to five minutes here and it's just going to allow me to use it one time in order to log a different session in based on on my behalf now the nice thing about the solution is you're still going to get that embedded text where if somebody wants to copy something search through the document if we're uploading it to some kind of system that wants to read through the PDF it's still going to have that capability which you're not going to be able to do with it just an image and again this is when we're using the PDF method as opposed to the screenshot method which is going to generate just a static image but this is going to be give us a lot of flexibility in this case but this does come with some complications such as being able to manage the layout on here so maybe you're going to have to inject styles using Puppeteer uh what if you want to add stuff you're going to have to then hide it from the other layout so now we're managing two layouts within one file does it make sense to just manage the separate file with react PDF anyways so you start to have those kind of questions and on top of it Puppeteer is generally going to be pretty slow in the first place so you're just adding to that user experience for people where it's going to just be slower when they click that button where they're really trying to wait for that to generate now as another potential solution using puppeteers the set content method where I'm not going to actually show and dive into this one here but you can see that with this set content method you can pass in an HTML string so maybe there's some kind of solution where you can render a component to a string you can pass in the dynamic data as props to that when you're trying to render that so that you can then load that up and show that when you're trying to take the screenshot or PDF uh via Puppeteer now tricky thing here is how are you going to actually load up the styles to get the layout that you want how can you make sure that that's all going to work and go through that whole process chain I I mentioned before that Puppeteer is a bit slow in this case so this might not be the right solution anyways but it's still something else that you can use to play around with if you're really set on trying to use Puppeteer but that's why I think that even though you have to maintain a separate layout that re react PDF is probably going to be your best bet here as it's going to give you a lot of flexibility for how you do that that and if you do need to maintain any differences in the code for how you actually display it such as maybe adding the payment details where you don't want that on the initial invoice page maybe there's a lot of flexibility that you can have instead of trying to create some kind of mess of having all those different layouts in one single file so I think that there's a lot of benefits in using react PDF and being able to use route handlers in a way to render that is a pretty compelling way but just to kind of tie up the loose end if I now try to download that PDF instead and in this case I just need to specify the actual file name here for my particular helper here and if I now try to do that again and download the invoice we can see that I do get that file downloaded we have everything inside of that PDF it's coming from my file system and it's working beautifully but because it's behind authentication so if we try to go through it without an authenticated session we can see that we get redirected to the signin page because they're not authenticated to be able to render that PDF now if you want to learn how to build that full stack app with authentication protecting your data and accepting payments make sure you head over to space jelly. nextjs to get exclusive access and updates now building an invoicing probably means being able to communicate the status of that invoice to your customer so let's see how we can build a notification system with knock