Up next in 10
Build a Vue.js HTML2PDF.js Example to Create PDF From Template and Render it Using vue-html2pdf
Jan 17, 2025
Get the full source code of application here:
https://codingshiksha.com/vue/build-a-vue-js-html2pdf-js-example-to-create-pdf-from-template-and-render-it-using-vue-html2pdf/
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 welcome to this video so
0:02
in this video I will show you a package
0:04
inside
0:06
vuejs uh which allows you to create PDF
0:09
document from a template uh you can see
0:11
the demo on the screen we have a simple
0:14
application where you need to provide a
0:16
title and then inside this text area uh
0:19
you can paste any
0:22
text which you need to convert into PDF
0:25
so I will just take a simple Wikipedia
0:28
paragraph and I will
0:31
paste all this
0:35
text just copy this and simply paste
0:39
inside this text area and also there is
0:41
a functionality where you can add images
0:43
as well so there is a choose file button
0:46
so here you can select your images so I
0:48
selected this PNG and as soon as I click
0:51
the generate PDF button you will see all
0:53
this PDF will be generated alongside
0:55
with the image as well so it is using
0:57
HTML 2 PDF is library in the background
1:01
it also shows you the live preview of
1:03
the PDF document and it downloads the
1:05
PDF document right in the browser itself
1:08
so you can see all your text that you
1:10
pasted is splitted across multiple pages
1:13
and also your image is also added so I
1:16
will show you this package it is
1:19
available on npmjs.com and you just need
1:23
to search for this package view html2
1:27
PDF
1:30
so this is actually the package
1:33
here which we are using for this and
1:36
it's almost got
1:38
11,000 weekly download so this is
1:40
actually the command I've already
1:42
installed it so just execute this
1:44
command and install this module so now
1:47
to get started you just need to make a
1:50
simple vuejs project I've given all the
1:53
source code in the description of this
1:54
video so just go to your app. view file
1:58
and you we need to edit this file
2:02
and first of all we will write all the
2:06
HTML code in the template tag and then
2:08
the typescript code in the script
2:11
tag so right here the very first thing
2:14
we need to do we need to import this
2:16
package so simply we'll use the import
2:20
statement and we'll simply import this
2:22
package view
2:24
HTML
2:26
2 PDF and it will be coming from this
2:32
package view html2 PDF so once you in uh
2:36
import this package we simply need to
2:38
register it so export
2:42
default and here you'll be declaring
2:44
some variables which will be needed for
2:46
this application first of all what title
2:48
that you will
2:53
give this will be empty and then the
2:56
actual content which you will paste the
2:59
text which will be inserted and also the
3:01
image so we have these three
3:05
variables the title the description and
3:08
the image which will be there in the PDF
3:11
document and
3:15
uh lastly we also need to first of all
3:20
register this component so now in the
3:21
components array we simply pass the
3:24
component that we imported which is this
3:27
view HTML to PDF
3:30
so now we can go to the template here
3:33
and we can directly use this first of
3:36
all we will have a simple form where we
3:39
will have these three input
3:42
fields and
3:44
uh let me just paste it you will you can
3:47
get all the source code in the
3:48
description so this is just a valid HTML
3:51
code that's why I'm just not writing
3:53
this it will waste the time so here what
3:57
is happening right here if you see we
4:00
have this three input Fields inside this
4:03
we
4:04
have the first of all this input field
4:06
where we allow the user to write the
4:08
title we have given V model directive so
4:13
directly we are binding it to these
4:14
three variables that we declare title
4:16
content and the selected image the
4:18
second input field is for the content
4:21
that you will paste in the text area
4:23
this is actually a text area and lastly
4:26
we have the input file where we allow
4:28
the user to select image file from their
4:31
computer and then they can insert this
4:33
image in the PDF document so if you just
4:36
refresh your uh application just go to
4:39
Local Host
4:42
5173 so you will see these three input
4:45
fields which will be there so
4:48
now as soon as the image changes we are
4:51
binding this on image change function so
4:54
as soon as you select a image file so
4:57
just inside the method section we need
4:59
need to Define this callback function
5:02
so we will say on image
5:08
change so this function will execute as
5:11
soon as you select your
5:16
image on image
5:20
change so here we need to first of
5:26
all read the file so you need to get
5:30
access to the file here so we will use
5:32
the E parameter e Target do files so
5:36
after getting access to the file that is
5:38
selected by the user we will check in
5:41
the if condition that if the file is
5:42
valid then we will read this image file
5:45
using uh the file reader API so file
5:49
reader
5:52
API and then it contains this onload
5:56
function so whenever the image is
5:59
successfully loaded we will simply s
6:01
store this image in the selected image
6:03
variable e. target.
6:08
result and uh lastly we just need to
6:11
call a function here which will simply
6:13
read the base 64 code read as data URL
6:17
and then pass the file so that's all
6:19
that we need to do inside this function
6:22
so now we can write the actual component
6:25
which is responsible for this so just
6:28
after this form right here
6:31
we can actually directly embed this
6:34
component so view html2 PDF and it
6:39
actually takes some directives so the
6:42
first one let me just P some of this
6:48
so and then explain to you so these are
6:51
the first four directives show layout if
6:54
you want to show the layout of the PDF
6:56
document you will put true or false
6:59
float layout true enable download button
7:02
if you want the download button to
7:04
appear you will put true here preview
7:06
model so if you want to show a live
7:08
preview window to the user as soon as
7:10
the you paste the content then you will
7:12
put true
7:14
here and then we have some more
7:18
parameters we which we can set I will
7:22
show you one by one what it meant by
7:24
this let me just paste it so it's a
7:27
complete module here you can see it all
7:29
supp supps all these options so paginate
7:31
Elements by height so here you can
7:33
control the height of the PDF document
7:35
and then you can give it a file name
7:37
control it by giving passing it a custom
7:39
file name and then you can control the
7:41
quality of the PDF document so I'm just
7:44
providing two here and then manual
7:47
pagination PDF format you can even
7:49
control A4 size PDF orientation which is
7:53
landscape and the PDF content width
7:56
which is 800 pixels so all these
7:58
parameters you can control and then we
8:01
have some call back functions right here
8:04
so first one is the progress so this
8:07
means as soon as you paste the
8:11
content this function will execute so
8:15
inside this function you pass the event
8:18
then we have the another one which is
8:22
start pag ination has paginated before
8:25
download has downloaded
8:29
so what I will do I will paste
8:32
everything right here so these are all
8:34
the call back functions which this
8:37
Library supports so we have binded these
8:40
custom functions that we will Define it
8:41
in the method section and we are just
8:43
given at last reference to this element
8:46
HTML to
8:47
PDF
8:49
so now we need to go to
8:53
the method section and uh Define all
8:57
these methods all these custom methods
9:00
so just
9:02
wait so at the bottom side we have this
9:05
method
9:07
section if you see we have one method
9:10
available on image change and similarly
9:13
we will Define all these
9:16
methods the main method is this one
9:19
which is uh if you
9:23
see I think we have
9:28
a gen rate report
9:34
function yeah so after this directive we
9:37
will simply have a button
9:41
where as soon as you click the button we
9:44
will generate the PDF document so
9:46
generate PDF and we just find an on
9:48
click listener to this so as soon as you
9:50
click the button we will execute a
9:52
function generate report
9:55
so now we just need to make this
9:57
function generate report
10:01
so inside the method section so right
10:04
here generate
10:08
report so inside this function uh you
10:11
will need to make first of all the
10:13
reference here this dot
10:15
reference and uh this is your html2 PDF
10:19
reference so after getting this
10:24
reference we have this function here
10:26
generate PDF so it will convert all this
10:30
template that you define in the HTML and
10:33
convert this into a PDF document so this
10:35
contains this function generate PDF
10:40
so that's all that we need to do and
10:43
apart from
10:45
that we will Define all these functions
10:48
as well so I will just paste this all
10:50
this CSS code is also involved so better
10:54
you can go to the description link to
10:56
follow along with this video so to get
10:58
all the source codes so we find all
10:59
these custom functions that we defined
11:01
in the HTML and if you just refresh
11:06
now and paste give it a image click on
11:11
generate PDF you see this model window
11:14
appearing as a live
11:16
preview and here this is can also click
11:19
the download button from here also and
11:21
download this but it automatically
11:23
downloads the PDF document so here this
11:26
is the title description and this is
11:28
your image so in this way you can use
11:31
this package in VJs to generate Dynamic
11:35
PDF documents which contains both images
11:38
and text so thank you very much guys for
11:41
watching this video and do check out my
11:44
website as well free mediat tools.com uh
11:48
which contains thousands of tools
11:50
regarding audio video and image and I
11:53
will be seeing you guys in the next
11:54
video