This content originally appeared on DEV Community and was authored by Precious Kelvin Nwaogu
In this article you’ll find a fun little tutorial 🎉 of how to create a PDF file using a web form, Express 🖥️ and PDFKit. To get started it’ll use the express generator and after completing it you’ll have a simple web form that generates a PDF file 📄 if the user clicks on the button Create PDF.
📌 Setup Your Project
- Install Express Generator:
npm install -g express-generator
- Create a new Express app with Pug:
express --view=pug pdf-app
- Navigate into the project and install dependencies:
cd pdf-app
npm install
- Install the dependency PDFKit:
npm install pdfkit
You can now start your app, using:
npm start
Then go to http://localhost:3000 in your browser. You should see something like: “Welcome to Express”.
Next we’re going to add our HTML using the templating engine Pug (formerly known as Jade). Open the file views/index.pug and replace the existing code with the following:
extends layout
block content
.row
.col-md-8
h1="Create a PDF"
form.form-horizontal.well(method="post", action="/pdf")
.form-group
label.col-md-2.control-label File Name
.col-md-10
.input-group
input.form-control(type="text", name="filename", placeholder="File Name")
.input-group-addon=".pdf"
.form-group
label.col-md-2.control-label Text
.col-md-10
textarea.form-control(name="content", placeholder="Write some text for on your PDF!")
.form-group
.col-sm-offset-2.col-sm-10
input.btn.btn-default(type="submit", value="Create PDF")
We also want to add some styling using Bootstrap and a theme from Bootswatch. In views/layout.pug add the following link directly above the existing link to style.css:
doctype html
html
head
title= title
//link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/flatly/bootstrap.min.css')
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
Now if you restart your app and visit http://localhost:3000 you should see a nicely formatted HTML form. Next we’re going to add the route for creating PDF files. Create the file routes/pdf and add the following code:
const express = require('express')
const router = express.Router()
const PDFDocument = require('pdfkit')
router.post('/', (req, res) => {
const doc = new PDFDocument()
let filename = req.body.filename
// Stripping special characters
filename = encodeURIComponent(filename) + '.pdf'
// Setting response to 'attachment' (download).
// If you use 'inline' here it will automatically open the PDF
res.setHeader('Content-disposition', 'attachment; filename="' + filename + '"')
res.setHeader('Content-type', 'application/pdf')
const content = req.body.content
doc.y = 300
doc.text(content, 50, 50)
doc.pipe(res)
doc.end()
})
module.exports = router
Then open app.js and require the new pdf route file just below the existing routes and add it as a route:
...
var index = require('./routes/index');
var users = require('./routes/users');
var pdf = require('./routes/pdf'); // <-- add this line
...
app.use('/', index);
app.use('/users', users);
app.use('/pdf', pdf); // <-- add this line
...
Your PDF rendering Express application is now ready for use! Start it with:
npm start
I hope you enjoyed this tutorial 😊 and feel free to ask me any questions.
Thanks to Samer Buna for reviewing this!🙌
This content originally appeared on DEV Community and was authored by Precious Kelvin Nwaogu
Precious Kelvin Nwaogu | Sciencx (2025-02-20T11:03:59+00:00) Generating a PDF with Express & Node.js 📄🚀. Retrieved from https://www.scien.cx/2025/02/20/generating-a-pdf-with-express-node-js-%f0%9f%93%84%f0%9f%9a%80/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.