Up next in 10
Get the full source code of application here:
https://codingshiksha.com/node/node-js-puppeteer-project-to-export-svg-to-pdf-in-command-line-full-tutorial/
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/
Show More Show Less View Video Transcript
0:00
uh hello guys uh welcome to this video
0:02
so in this video I will show you a
0:04
NodeJS uh program which runs in the
0:07
command line which converts your SVG
0:10
files which is scalable vector graphics
0:12
into PDF so we have a set of uh SVG file
0:15
here so I will convert this into PDF so
0:18
I've written a simple NodeJS script
0:20
right here 38 lines of code so it is
0:23
using this third party package
0:25
puppeteer which is automation library so
0:29
as I run this
0:31
script
0:36
so so this script is there here you will
0:42
see I just execute the script node
0:45
index.js and after that I provide you
0:48
with the input file name and the output
0:51
file name so this we're calling this
0:54
script here NodeJS script providing the
0:58
input file name which is car.svg and
1:00
then the output file name so puppeteer
1:03
will will run in the background and it
1:06
will carry out this conversion so once
1:08
it is completed it will give you this
1:11
notification that PDF is converted and
1:14
it is saved so you will see that your
1:17
SVG file is successfully converted to
1:21
the PDF file
1:23
here so this was the input file and this
1:26
is your output PDF
1:29
file so if I show
1:32
you open it in the browser it looks
1:34
something like this the quality of the
1:36
SVG is also preserved so all the source
1:39
code I've given in the description so
1:40
now let's get started so first of all
1:43
you just need to install this module
1:45
which is
1:46
puppeteer
1:48
npm
1:50
pu so you just need this module so just
1:53
install this inside the command line and
2:00
just now we'll be start writing the code
2:03
here so first of all we need to import
2:05
this uh some modules here the file
2:09
system module which will be needed which
2:11
is a built-in module and also we'll need
2:14
the puppeteer module so we'll require
2:17
this and then we also need to require
2:20
the path
2:23
module and here we will provide the
2:26
input SVG which we will get in process
2:32
arg which is the arguments that you will
2:35
provide here and then the
2:37
output
2:40
PDF which we can get like this if the
2:44
output file is not given then we
2:47
will name it output PDF which is a
2:51
default
2:53
name and after
2:56
that we will just execute this function
2:59
right here asynchronous function which
3:01
will automatically
3:11
run so inside this function uh what we
3:15
will do we will check that if the SVG
3:18
file is not provided then we will simply
3:20
say to the user that please provide the
3:22
SVG file
3:23
path and then we will first of all read
3:26
the SVG file content by the file system
3:31
module by using this function read file
3:35
simple you will read it inside UTF8
3:38
encoding type and after that we will use
3:40
this puppeteer
3:43
library first of
3:46
all we will embed
3:51
everything inside this HTML tag then the
3:56
body then inside the div we will embed
3:58
everything this is your SVG content so
4:01
this is required because we will be
4:03
using puppeteer library so we need to
4:05
first of all open the
4:07
browser so this puppeteer library
4:10
contains this function launch function
4:13
so after launching the browser we will
4:15
go to this
4:17
page so for going to the page we have
4:20
this function here browser dot to open a
4:22
new page we have a function in puppet
4:24
here so we'll call this function we will
4:27
go to this page and then we will load
4:29
the content so page dot
4:32
set content right here and after that
4:36
here we need to pass the HTML content
4:38
that we got and the second argument here
4:40
is wait until network idle so this is
4:44
the basic way by which we can use
4:45
puppeteer here after this
4:49
step we will evaluate the page to get
4:52
the dimensions of the
4:54
page and store it inside this variable
4:57
so we have this function
4:59
evaluate so this function will
5:03
return the dimensions so we
5:06
will target this element query selector
5:10
will target this SVG tag that we have
5:13
declared if you see we have this SVG
5:16
content so we target this tag and then
5:20
we will simply return from this function
5:22
the actual
5:25
width of the SVG so SVG
5:30
get attribute
5:33
width and similarly we'll be getting the
5:36
height as
5:40
well so after getting both these values
5:43
so now after we will now be creating the
5:47
PDF so in puppeteer you can easily
5:50
create the PDF using this PDF function
5:53
which is available so inside this we
5:55
will pass the object the
5:57
path where we need to store then the
6:01
width which comes from dimensions width
6:05
and height dimensions height print
6:08
background to be
6:10
true so after that we just need to close
6:13
the browser using this function and then
6:16
just show a simple notification to the
6:18
user that your PDF is generated
6:20
successfully so this completes the
6:22
application and if you try to go to the
6:25
terminal and just
6:27
type node index.js js and just provide
6:30
the input file name and the
6:34
output so it will carry out this
6:36
conversions and
6:48
uh all the source code will be given in
6:51
the description
6:57
so I think I made some kind of typo
7:01
mistake right here just
7:04
wait oh sorry we will not calling this
7:07
function we need to call this function
7:09
so once again and execute this
7:13
command and you will see this
7:15
notification PDF save to car pdf so your
7:20
SVG is successfully converted to a PDF
7:23
file using this puppeteer
7:26
package so this is the basic script guys
7:30
NodeJS script you can even refer to my
7:32
blog post where I provided the full
7:34
source code and thank you very much for
7:37
watching this video and also check out
7:39
my website freemediattools.com which
7:41
contains thousands of tools regarding
7:43
audio video and image
#Online Media
#Programming
#Scripting Languages