PDF is one of the common documents used in our everyday life. Portable Document Format is used to display documents in an electronic form independent of the software, hardware, or operating system they are viewed on. The main objective of PDF is to share documents between different operating systems and devices. PDFs are generally used everywhere some of they are Invoices, eBooks, application form, etc. In today’s post, we are going to see 2 ways for PDF generation in Node js.
1. Using Puppeteer.
2. PDF Make package
Puppeteer:
Puppeteer is a Node library that provides a high-level API to control Chrome or Chromium over the DevTools Protocol. It runs headless by default but can be configured to run full (non-headless) Chrome or Chromium. Using a puppeteer you can render the document and then generate PDF File from it.
1: Install puppeteer using npm or yarn
npm i puppeteer
or
yarn add puppeteerPuppeteer comes with lot’s of dependencies. so make sure it is compatible with your node version.
2: Import puppeteer
const puppeteer = require('puppeteer');3: Launch the browser
const browser = await puppeteer.launch({
headless: true
})headless options specify boolean value that whether puppeteer launches Chromium in headless mode or not. There are many options that you pass while launching puppeteer, you can read them here. You can turn off headless mode while development, which lets you see what’s happening behind the scene.
4: create a new browser page
const page = await browser.newPage();This is similar to opening a new tab in the browser where you can render your HTML.
5: set the content to page
const html = '<p>Hey</p>'
await page.setContent(html)A set content method is used to set the rendered HTML content. You can use hbs files to render the dynamic HTML content. Read m ore about hbs files here.
6: generate pdf & close the page
await page.pdf({
path: 'sample-pdf.pdf',
format: 'A4',
displayHeaderFooter: false,
});
await page.close()Page.pdf method takes multiple options like
i. path that specifies the output path of a pdf file.
ii. format specifies the Paper format.
iii. displayHeaderFooter specifies a boolean value that indicates whether to include header & footer.
you can learn more about options here.
7: close the browser
await browser.close()It is necessary to close the browser once a pdf is generated to avoid memory leaks as chrome is quite heavy.
PDFMake:
PDF make is a lightweight pure javascript library used to generate pdf.
1: install a package via npm
npm i pdfmake2: Import package
const PdfPrinter = require('pdfmake')3: Create a new instance of pdfmake with fonts
const printer = new PdfPrinter(fonts)4: Set the content of a document in the docDefinition object
const docDefinition = {
content: [
'This is a standard paragraph, using default style',
{ text: 'This paragraph will have a bigger font', fontSize: 15 }, { text: [ 'This paragraph is defined as an array of elements to make it possible to ', { text: 'restyle part of it and make it bigger ', fontSize: 15 }, 'than the rest.' ] }
]
};“docDefinition” contains an object of an array that specifies the content to be displayed on a pdf file. you can read more about it in the official documentation.
5: Create pdf by calling method
const pdfDoc = printer.createPdfKitDocument(docDefinition)CreatePdfKitDocument method takes document definitions & buffer options as arguments and generates a document from it in the form of buffer pages.
6: pipe the pdf content
pdfDoc.pipe(fs.createWriteStream('document.pdf'));pipe() method is used to attach a Writable stream of pdf content to the printer stream so that it consequently switches into flowing mode and then pushes all the data that it has to the attached Writable.
7: end the pdf instance
pdfDoc.end()
Which one to choose between puppeteer & pdfmake:
1. puppeteer generates pdf by using HTML templates which lets a developer write HTML templates once and generate pdf dynamically. Whereas pdfmake uses its own structure of object array, which makes it difficult to create multipage pdf with lots of tables & content.
2. To create a PDF, you need to start Puppeteer every time, which creates some overhead. It is slow. whereas pdfmake is faster as it does not open any browser.
3. You can use any font when using puppeteer. Pdfmake might encounter issues when you try to embed custom fonts while using Webpack.
4. If you are using docker to deploy your node application, puppeteer installations requires additional steps where as pdfmake can be installed via your package.json.
So depending upon your criteria you can choose any of the packages. Personally, I use puppeteer, because it gives more flexibility over rendering as compared to pdfmake.
Thank you for reading. If you have any questions or would like to know more about any of the technologies or methods, feel free to leave a comment!
Dear noob2geek.in administrator, Great content!
Dear noob2geek.in webmaster, Thanks for the well-organized post!
Hello noob2geek.in owner, Your posts are always well-formatted and easy to read.
Dear noob2geek.in owner, Your posts are always thought-provoking and inspiring.
Hi noob2geek.in webmaster, Thanks for the informative post!
I have read your article carefully and I agree with you very much. So, do you allow me to do this? I want to share your article link to my website: Log in
Hi noob2geek.in owner, Your posts are always well-written and easy to understand.
Hello noob2geek.in administrator, Your posts are always insightful and valuable.
Hello noob2geek.in owner, Your posts are always well researched and well written.
To the noob2geek.in admin, Your posts are always on point.
Hi noob2geek.in administrator, Your posts are always well researched.
Hi noob2geek.in administrator, Your posts are always a great source of knowledge.
To the noob2geek.in administrator, Well done!
To the noob2geek.in webmaster, Your posts are always a great read.
Hi noob2geek.in owner, Nice post!
Hello noob2geek.in webmaster, You always provide clear explanations and step-by-step instructions.
Dear noob2geek.in administrator, Your posts are always well written.
Hi noob2geek.in webmaster, Your posts are always a great source of information.
To the noob2geek.in webmaster, Your posts are always well-written and easy to understand.
Dear noob2geek.in administrator, You always provide key takeaways and summaries.
Hi noob2geek.in admin, You always provide great examples and real-world applications, thank you for your valuable contributions.
Hi noob2geek.in owner, Your posts are always well organized and easy to understand.
Nice article.