Creating PDF files is something that most developers have to do eventually. Whether it’s invoices, reports or downloadable documents, PDFs are still one of the most used formats.
A typical approach involves back-end services. You send data to the server, create a file there, and return it to the user. This works, but it adds complexity, latency, and maintenance overhead.
Modern browsers make this very easy.
In this tutorial, you’ll learn how to create PDF files directly in the browser using JavaScript. There’s no server involved, no file uploads, and everything happens instantly on the client side.
To make things practical, we’ll create a simple invoice-style PDF generator so you can see how it works in a real-world scenario.
Table of Contents
How does PDF generation work in the browser?
A PDF is basically a structured document that defines how text and elements are positioned on a page.
Instead of creating this structure manually, we use a JavaScript library that handles it for us. You transfer content to the library, and it generates a downloadable file.
The main advantage here is that everything runs locally. This makes the process faster and avoids sending any data to the server.
Project setup
This project is intentionally simple.
All you need is one HTML file and one JavaScript file. There is no backend, no API, and no database involved. It focuses on understanding how PDF generation works within the browser.
Which library are we using?
We will use jsPDFa lightweight library that allows you to create PDF files directly in JavaScript.
Add it using a CDN:
Creating an HTML structure
We'll start with a simple interface where users can enter invoice data and generate a PDF.
It creates a basic input flow where users can provide the title and content for the PDF.
In real-world applications, this input may include more structured data such as customer details, item lists, and pricing. But for this tutorial, we'll keep things simple and focus on how PDF generation works.
Adding JavaScript to generate PDFs
Now we connect the input to the PDF logic.
function generatePDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const title = document.getElementById("title").value;
const content = document.getElementById("content").value;
if (!title.trim() && !content.trim()) {
alert("Please enter valid content before generating the PDF.");
return;
}
const margin = 10;
let y = 20;
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const maxWidth = pageWidth - margin * 2;
doc.setFontSize(18);
// ✅ Wrap title
const titleLines = doc.splitTextToSize(title, maxWidth);
doc.text(titleLines, margin, y);
const titleLineHeight = doc.getLineHeight() / doc.internal.scaleFactor;
y += titleLines.length * titleLineHeight + 5;
doc.setFontSize(12);
// ✅ Wrap content
const lines = doc.splitTextToSize(content, maxWidth);
const lineHeight = doc.getLineHeight() / doc.internal.scaleFactor;
lines.forEach((line) => {
// ✅ Page break
if (y > pageHeight - margin) {
doc.addPage();
y = margin;
}
doc.text(line, margin, y);
y += lineHeight;
});
doc.save("invoice.pdf");
}
It creates PDFs directly in the browser. It handles long text, maintains proper spacing, and automatically adds new pages if the content exceeds the page height.
How to create a PDF
When you start jsPDF, it creates an empty document.
Every single one text() Call the material at a specified coordinate. This gives you complete control over the layout, but it also means you need to manage spacing carefully.
Finally, making the call save() Converts everything to a downloadable file.
Handling dynamic content (important)
In real-world use cases like invoices, content length is rarely fixed. If a user enters multiple lines or long text, it may overflow or exit the page.
To handle this, you should wrap the text based on the page width instead of using fixed values.
const pageWidth = doc.internal.pageSize.getWidth();
const margin = 10;
const maxWidth = pageWidth - margin * 2;
const lines = doc.splitTextToSize(content, maxWidth);
doc.text(lines, margin, 40);
This ensures that your content wraps properly and fits within the page.
If the content is long, you should also dynamically update the spacing:
const lineHeight = doc.getLineHeight() / doc.internal.scaleFactor;
let y = 40;
lines.forEach((line) => {
doc.text(line, margin, y);
y += lineHeight;
});
This keeps the layout readable and prevents overlapping when working with dynamic input.
Optimizing layout and spacing
Good layout makes a big difference to the look and feel of your PDF.
Instead of keeping everything in a fixed position, you can incrementally adjust the Y position as the content grows. This helps prevent overlapping and visually organizes the document.
For example, instead of hardcoding positions, you could do something like:
const margin = 10;
let y = 20;
const pageWidth = doc.internal.pageSize.getWidth();
const maxWidth = pageWidth - margin * 2;
doc.setFontSize(18);
// Wrap title
const titleLines = doc.splitTextToSize(title, maxWidth);
doc.text(titleLines, margin, y);
const lineHeight = doc.getLineHeight() / doc.internal.scaleFactor;
y += titleLines.length * lineHeight + 5;
doc.setFontSize(12);
// Wrap content
const lines = doc.splitTextToSize(content, maxWidth);
doc.text(lines, margin, y);
y += lines.length * lineHeight;
Here, the y The value is incremented based on the height of the original content rather than a fixed spacing. This ensures consistent spacing between elements and avoids overlapping.
Another important issue is handling long text. If the content is too long, it may go beyond the width of the page or overlap with other elements. Instead of using fixed values, you should always calculate the width dynamically:
const pageWidth = doc.internal.pageSize.getWidth();
const maxWidth = pageWidth - margin * 2;
const lines = doc.splitTextToSize(content, maxWidth);
doc.text(lines, margin, y);
It automatically breaks the text into multiple lines so that it fits properly within the page.
Using dynamic spacing and text wrapping together ensures that your layout remains clean and readable, even if the content is resized. This becomes especially important when creating documents such as invoices, where multiple parts require constant alignment.
How to download PDF
The download process is handled using save() Method:
doc.save("invoice.pdf");
This tells the browser to generate the PDF and download it immediately.
You can also dynamically customize the filename based on user input:
const fileName = (title || "document").trim() + ".pdf";
doc.save(fileName);
This makes the downloaded file more meaningful than always using a fixed name.
Since everything runs in the browser, there is no server involved and no data is uploaded. It speeds up the process and keeps user data private.
Important notes from real-world usage
When building tools like invoice generators, layout control becomes more important than the logic itself.
In a browser, layouts are flexible. But in PDF, everything is fixed. This means you need to carefully control spacing, positioning, and readability.
For example, if you add multiple sections without adjusting the spacing, the content can easily overlap. Instead of using fixed positions, it's better to dynamically update the Y position as the content grows:
let y = 20;
doc.text("Invoice Title", 10, y);
y += 10;
doc.text("Customer Name", 10, y);
y += 10;
This ensures that each section appears below the previous section without overlapping.
Another common problem is long content. If the text is too long, it won't wrap automatically like it does in HTML. You need to handle this manually using dynamic width:
const pageWidth = doc.internal.pageSize.getWidth();
const margin = 10;
const maxWidth = pageWidth - margin * 2;
const lines = doc.splitTextToSize(content, maxWidth);
doc.text(lines, margin, y);
const lineHeight = doc.getLineHeight() / doc.internal.scaleFactor;
y += lines.length * lineHeight;
This keeps the text readable and ensures that it fits within the page.
You also need to think about how screen input translates into a fixed-size document. For example, a long description in Textaria may look good on screen, but in PDF it requires proper spacing, wrapping, and sometimes even pagination.
Improving the performance of PDF generation
Efficiency is another important factor. Creating large PDFs with lots of content can slow rendering in the browser.
A simple way is to limit the input size:
if (content.length > 2000) {
alert("Content is too large. Consider splitting it into multiple sections.");
return;
}
Another approach is to split the content across multiple pages instead of forcing everything onto one page:
const pageHeight = doc.internal.pageSize.getHeight();
const lineHeight = doc.getLineHeight() / doc.internal.scaleFactor;
lines.forEach((line) => {
if (y > pageHeight - margin) {
doc.addPage();
y = margin;
}
doc.text(line, margin, y);
y += lineHeight;
});
This ensures that large content is handled efficiently without compromising layout or performance.
In real-world tools, small decisions like spacing, wrapping, pagination, and content limits make a big difference in how usable and professional the PDFs you produce feel.
Common mistakes to avoid
A common problem is skipping authentication. If users generate a PDF with empty fields, the result will not be useful.
To avoid this, always validate input correctly and handle whitespace:
if (!title.trim() && !content.trim()) {
alert("Please enter valid content before generating the PDF.");
return;
}
This ensures that users do not download blank or broken PDFs.
Another mistake is ignoring text overflow. In the browser, the text wraps automatically, but not in the PDF. Without handling this, long content can overlap or run off the page.
You can fix this by using dynamic text wrapping:
const pageWidth = doc.internal.pageSize.getWidth();
const margin = 10;
const maxWidth = pageWidth - margin * 2;
const lines = doc.splitTextToSize(content, maxWidth);
doc.text(lines, margin, 40);
This keeps the content within the page and improves readability.
A related problem is overlapping content due to fixed positioning. If you place everything at static coordinates, parts can stack on top of each other.
Instead, update the positions dynamically:
let y = 20;
doc.text(title, 10, y);
y += 10;
const lines = doc.splitTextToSize(content, maxWidth);
doc.text(lines, 10, y);
const lineHeight = doc.getLineHeight() / doc.internal.scaleFactor;
y += lines.length * lineHeight;
This keeps the spacing consistent and prevents layout problems.
Finally, forgetting to properly load the jsPDF library will break the entire feature. If the script is missing or invalid, the PDF will not be generated at all.
Always make sure the CDN is properly included:
In practice, most of the issues come down to proper validation, dynamic spacing, and handling content sizes correctly. Fixing them early makes your PDF generator more reliable.
Demo: How the PDF Generator Works
For this example, we'll create a simple invoice PDF to demonstrate how it works in a real-world scenario.
Step 1: Enter company details.
Start by entering your company details such as name, address, contact information, and other identifiers. This data will appear at the top of the generated invoice.
Step 2: Add customer information.
Next, fill in the customer details, including billing and shipping addresses. This ensures that the invoice is assigned correctly.
Step 3: Enter the invoice details.
Provide details related to the invoice such as invoice numbers, dates, and any additional notes. These values ​​help structure the document correctly.
Step 4: Add the items to the invoice.
Include the goods or services included in the invoice. Each item can include quantity, pricing, taxes and discounts, which are automatically calculated.
Step 5: Set up payment and terms.
Specify payment instructions, terms, and any additional terms. This section ensures that the receipt is complete and ready for actual use.
Step 6: Review the generated invoice.
The interface provides a live preview of the invoice so you can review everything before creating a PDF.
Step 7: Create and Download PDF
Finally, click the Generate button to generate and download the PDF instantly. The file is generated directly in the browser without any server interaction.
The result
In this tutorial, you've created a PDF generator using JavaScript that runs entirely in the browser.
More importantly, you learned how to think about building real tools using client-side capabilities. This approach reduces complexity, improves performance, and keeps user data private.
Once you understand this pattern, you can extend it to build more advanced tools such as invoice systems, report generators, and document exporters.
And this is where things start to get really interesting.