Welcome folks today in this blog post we will be generating the pdf document from html5 template in browser using pdfkit library in javascript. All the full source code of the application is shown below.
Get Started
First of all we need to install the dependencies for this project as shown below
pip install flask
pip install pdfkit
As you can see we are importing the flask library and the pdfkit library as shown above. For the pdfkit library we need to require the wkhtmltopdf library. We need to set the path of the wkhtmltopdf executable as shown below
In order to get started you need to make an app.py file and copy paste the below code
app.py
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
from flask import Flask,request from flask import render_template from flask import make_response import pdfkit app = Flask(__name__) @app.route('/', methods =["GET", "POST"]) def gfg(): return render_template("form.html") if __name__ == "__main__": app.run(debug=True) |
As you can see in the above code we are importing the flask libary and from that we are requiring the request module to get the html5 form values from the html5 form template. And also we are importing the render_template module and make_response module. And also we are importing the pdfkit library. And also we are initializing the new Flask app. And also we are starting the flask app using the run() method.
And also we have a home route which is / and in the second argument we are checking if the method is post or get. The default method is get and for that we are rendering the template called form.html which contains the actual html5 form.
So inside the root directory we need to make the templates folder as shown below. The directory structure of the app is shown below
As you can see we need to render all the templates inside the templates folder because flask finds all the html5 files inside this templates folder by default. And now we need to write the simple form.html file which will contain the input fields for taking the first name and lastname of the user
templates/form.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PDF Invoice Generator Form</title> </head> <body> <form action="{{url_for("gfg")}}" method="post"> <label for="firstname">First Name:</label> <input type="text" id="firstname" name="fname" placeholder="firstname"> <label for="lastname">Last Name:</label> <input type="text" id="lastname" name="lname" placeholder="lastname"> <button type="submit">Login</button> </form> </body> </html> |
As you can see we are providing the action attribute to the form this can be anything and as you can see the method is post. If we submit the form this will be the simple post request to the flask server. And inside it we have two input fields for taking the user input for firstname and lastname and then we have the button to submit the form.
And now we need to write the code inside the app.py to actually process this html5 form data. For this we will be writing the actual post request inside the / route as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@app.route('/', methods =["GET", "POST"]) def gfg(): if request.method == "POST": # getting input with name = fname in HTML form first_name = request.form.get("fname") # getting input with name = lname in HTML form last_name = request.form.get("lname") html = render_template("pdf_template.html",first_name=first_name,last_name=last_name) pdf = pdfkit.from_string(html, False) response = make_response(pdf) response.headers["Content-Type"] = "application/pdf" response.headers["Content-Disposition"] = "inline; filename=output.pdf" return response return render_template("form.html") |
As you can see we are now checking in the if condition if the request method is post or not. If it’s a post request then we will getting the passed values from the html5 form using the request module from flask. And then we are using the render_template() to actually render dynamic variables to a custom html file we are providing in the first argument which is pdf_template.html Here we do need to create this html file inside the templates folder to actually render out these dynamic variables of first name and lastname. So we can render these variables like this as shown below. And also lastly we are also setting the response headers also to the content type of the pdf file and also the second response header to the filename of the output pdf file and then we are simply returning the response from this method. So the output.pdf will be automatically opened when you submit the form
templates/pdf_template.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Template</title> </head> <body> The first name is {{first_name}} The last name is {{last_name}} </body> </html> |
As you can see we are rendering out the variables in html file using the {{}} syntax double curly brackets and inside that we are putting the variable name. So now if you run the flask app in command line using the below command.
python app.py
So the above command will start the flask app in the browser at the port number 5000. So now you need to open the address in the browser which is http://localhost:5000
So Now you need to enter the firstname and lastname in input fields and submit to generate dynamic pdf document as shown below
