And how I used it to make a resume! Backstory I was looking for a free resume builder. Though I was using Novoresume free scheme before, it was not enough as I couldn’t customize most of the things. Also, their paid schemes are pretty expensive. So, as a web developer, I just coded my own resume builder with HTML + CSS 🎉 Now, as I wanted to print the resume as PDF I faced a challenge. Using Google Chrome’s default print command on any web page generated not so high-quality pdf as the dpi is low. Searching through pdf generators in JS I couldn’t find any good source which could generate accurate pdf to my HTML with links, images, styling, etc. Puppeteer came to the rescue. It can take a snapshot or generate the exact pdf output of any webpage !!! Let's make a webpage This is a sample resume I made with HTML + CSS which I used ReactJS to build as it gives me more power to use js for repeating patterns and component architecture. But, a plain file is also fine for the purpose. .html If we use the chrome print command (`CTRL+P`) to print this page and save as pdf, we’ll see that the pdf is not high quality! It’s because of Chrome's default resolution and 72dpi setup for printing. Using Puppeteer We need NodeJS installed on our machine. Let’s see both react and non-react version ReactJS Suppose our resume page is running on port and available at . 3000 [http://localhost:3000](http://localhost:3000) Now, as we’re already inside a react project and we have a file in our project, let’s just install first with the command below - package.json puppeteer npm install --save puppeteer : We’re loading puppeteer. Line 1 : Initializing a browser (we can think this as opening a new chrome window). Line 4 : Opening a new page (we can think this as opening a new chrome tab). Line 5 : Setting the viewport’s and . is by default , we’re doubling it so that the quality of the output gets better. Line 6 width height deviceScaleFactor 1 : Visit , wait until everything is loaded properly with Line 7 localhost:3000 networkidle2 : Generate a file named with paper size in the current directory. Set to to print background colors and styling. makes sure we’re getting only the first page (we could avoid it if we had a multipage resume). Line 8–13 .pdf resume.pdf A4 printBackground true pageRanges : Closing the browser as the work has been finished. Line 15 Now, let’s create a file named with the code above, in our project’s root folder and run the command below - generatePDF.js node generatePDF.js This will generate a file in the same directory. Now if we open up the pdf file with a pdf viewer, we can see that the pdf is better in quality than the directly printed one from the browser ( ). resume.pdf ctrl+p Using Plain HTML file We need to change only Line 7 from the ReactJS version await page.goto("file://practice/resumeapp/resume.html",{ waitUntil: "networkidle2" }); But, as we have no node/react project setup for this plain HTML version let’s just create one. mkdir resumeappcd resumeapp This will create a directory named and take you into the directory. resumeapp npm init --yes This will initialize a file in your directory. Now let’s install puppeteer - package.json npm install --save puppeteer Now let’s create a file named with the code below - generatePDF.js Make sure your file’s path is correct. Now, run the command below in the same shell/directory. resume.html node generatePDF.js This will generate a file in the same directory. Now if we open up the pdf file with a pdf viewer, we can see that the pdf is better in quality than the directly printed one from the browser ( ). resume.pdf ctrl+p This pdf generation trick can be pretty handy as using puppeteer enables us to use chrome’s awesome features in the backend. We can take screenshots, make books from crawled data, and what not! The possibilities are endless and that’s for you to explore. Good Luck 🙂
![10 Tech Products Ideas [September 2017]](https://hackernoon.imgix.net/hn-images/1*uzXo9jk_IMsYbUmoJ58JCg.jpeg?auto=format&fit=max&w=3840)
