Up next in 10
Node.js Puppeteer Tutorial to Take Screenshot of HTML & CSS Template & Export it as PDF Document
0 views
Jun 7, 2025
Get the full source code of application here: https://codingshiksha.com/node/node-js-puppeteer-tutorial-to-export-html-css-template-to-pdf-document-download-it-in-terminal/ Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions https://youtu.be/Bon8Pm1gbX8 Hi Join the official discord server to resolve doubts here: https://discord.gg/cRnjhk6nzW Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/
View Video Transcript
0:00
uh hello guys uh welcome to this video
0:03
uh so in this video I will show you how
0:05
to export
0:07
uh HTML and CSS template into PDF
0:10
document using uh NodeJS and we for this
0:13
we'll be using a automation library
0:15
called as Puppeteer this is actually a
0:18
simple template here you will see this
0:21
is actually a simple website a static
0:23
website which contains HTML and CSS code
0:26
we have this heading we have the menu we
0:28
have the uh paragraph we also have the
0:31
table so it's a single page website
0:34
which is constructed using HTML and CSS
0:38
what I need to do here we need to
0:39
convert this into PDF document and for
0:42
this we have written this uh NodeJS
0:45
script here so if I just execute the
0:48
script here you will see on the left
0:50
hand side it will convert this HTML
0:55
template so this template is there you
0:58
can see template
1:00
HTML so now as I execute the script here
1:03
you will see it will convert this HTML
1:06
file to
1:07
PDF so all this HTML code here this is
1:11
your template is converted into PDF so
1:13
if I try to open this PDF file here you
1:16
will see all your HTML template with CSS
1:20
code is converted to this PDF document
1:23
and you can just see the preciseness of
1:26
this conversion it simply
1:32
uh exported all that HTML plus CSS
1:35
template and all you can see the
1:38
paragraph which is in the green
1:40
background color we also see the menu we
1:43
also see the table the paragraph all the
1:46
elements are successfully exported to
1:48
PDF document so in this tutorial we'll
1:52
look at how to do this so first of all
1:55
for this you need to install this module
1:57
which is puppeteer which is automation
2:00
library in NodeJS so it's a very popular
2:03
module so first of all you just need to
2:05
install this by executing this command
2:07
npm
2:09
puppeteer i've already installed it so
2:12
if you need the full source code guys
2:13
the link is given in the description so
2:16
now I will show you step by step how to
2:19
do this so just create a simple index.js
2:23
file and start writing the code here
2:26
so so the very first thing you need to
2:29
do you need to simply require the
2:31
necessary
2:35
packages which is a file system
2:41
module which is a built-in module and
2:43
then we need to
2:46
in require the puppeteer module
3:01
after that we also need to require
3:05
the path
3:10
module and after that we just need to
3:13
mention which file we are converting so
3:17
in this case here we need to specify all
3:20
the files
3:23
here so the HTML
3:27
file so the file needs to be present in
3:30
the same directory so here we are taking
3:32
simply this index html
3:36
file and then we will be declaring this
3:40
uh PDF output file so again in the same
3:44
directory we will create this file here
3:46
the output file which will be index.pdf
3:51
PDF and for this uh carrying out the
3:55
conversion we'll be creating a simple
3:58
function which will be HTML to PDF and
4:03
we will be passing these two arguments
4:06
here your HTML file and
4:10
the PDF
4:12
output so now we just need to construct
4:15
this
4:16
function which will be responsible for
4:30
converting so here we'll be making this
4:39
function so this will be an async
4:41
function
4:54
so inside this function here you can see
4:56
now we just need to open the puppet air
4:59
browser for opening this you simply use
5:02
this await and then we use this launch
5:07
function so here you can pass the option
5:09
headless to false so this means that you
5:13
will see the browser open as you execute
5:17
the script you can even put true here so
5:19
this means that the browser will open in
5:21
the background so here you
5:23
can do that and then we open the page
5:27
for opening the page we call this
5:29
function here which is new
5:32
page so now it will open the page here
5:35
by using this and for this we just need
5:39
to go to the
5:42
location where this template is located
5:45
for this we will be using the file
5:46
system module and this contains this
5:49
read file
5:51
synchronize method and here we'll be
5:54
locating this file
5:55
here so this argument is passed here
5:58
html
5:59
file so we'll go to this
6:04
location and open this in UTF8 encoding
6:10
type and then after that we need to set
6:14
this content so await page dot set
6:21
content and simply we'll be passing this
6:24
HTML content and then the second
6:27
argument here we need to pass is wait
6:32
until this needs to be DOM content
6:36
loaded so this means that each every
6:38
every element is loaded in the HTML file
6:41
then
6:42
only do that this is meant by that and
6:45
then puppeteer contains this function
6:48
here which is page dot PDF so it will
6:53
take the
6:55
screenshot of this HTML template and
6:59
here we need to specify where to save it
7:02
so we actually need to save it this
7:05
location that we
7:08
provided and here we can even specify
7:11
the format here A4
7:15
size and if you also want the background
7:18
you can put print background
7:21
true so after taking the screenshot then
7:24
we can close the browser automatically
7:26
so it contains a function browser close
7:28
it will close the browser and then we
7:31
can simply console log a statement that
7:33
your PDF generated successfully so this
7:36
is actually the overall script here so
7:40
if I go to
7:43
the terminal just execute this you will
7:46
see it will open the browser
7:47
automatically it will take the
7:49
screenshot and
7:54
then your PDF file is generated
8:04
so this needs to be template html sorry
8:08
I gave wrong name here so this needs to
8:10
be template so whatever is your file
8:13
name you just need to give and just open
8:16
this you will see it will open the and
8:18
then your PDF generated successfully you
8:21
will get this message and
8:24
uh so you can take any
8:27
HTML template which is constructed using
8:31
HTML and CSS code and then it will
8:33
actually take the screenshot and then it
8:36
will generate this as a PDF document so
8:38
using Puppeteer library you can easily
8:41
carry out the conversion so thank you
8:44
very much for watching this video and
8:46
also check out my website
8:49
freemediattools.com
8:51
uh which contains uh thousands of tools