In the digital age, sharing information is easier than ever, but sometimes you just need to convert a web page into a portable document format (PDF) for offline access, distribution, or printing.
We got this request from a new client, and initially the ask seemed simple enough - but it never is, right? A few curve balls were thrown here and there while finding and implementing a solution for the task at hand, and luckily, there's a versatile JavaScript library called jsPDF that allows you to generate PDF documents directly from your web page, it is a very straightforward and efficient library. While your mileage may vary, in this article we'll guide you through the basics of using jsPDF to create a your shiny PDF from your web page…
What is jsPDF?
jsPDF is a popular JavaScript library that empowers developers to generate PDF files on the client side, directly in the web browser. It's an open-source library and can be easily integrated into your web applications. With jsPDF, you can create PDFs containing text, images, and other HTML elements, making it a versatile tool for a wide range of applications.
Getting Started
To start generating PDFs with jsPDF, you'll need to include the library in your web page. You can do this by either installing the library via npm and adding it to your project or using a content delivery network (CDN).
HTML
<!DOCTYPE html>
<html>
<head>
<title>Create PDF with jsPDF</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
</head>
<body>
<!-- Your web page content here -->
</body>
</html>
Once you have included jsPDF in your project, you're ready to start creating PDFs.
Creating a Basic PDF
Here's a simple example to create a basic PDF document using jsPDF:
javascript
// Create a new jsPDF instance
const doc = new jsPDF();
// Add content to the PDF
doc.text("Hello, World!", 10, 10);
// Save or download the PDF
doc.save("my_document.pdf");
In the code above, we:
1. Create a new jsPDF instance.
2. Add text to the PDF at coordinates (10, 10).
3. Save or download the PDF with the name "my_document.pdf".
This is a straightforward example, but jsPDF offers a wide range of capabilities for creating more complex PDFs, including the ability to add images, tables, and custom styling.
Adding Images and HTML Elements
You can also include images and HTML elements in your PDFs. For instance, if you want to add an image to your PDF, you can use the addImage method:
javascript
const doc = new jsPDF();
// Add an image to the PDF
doc.addImage("image.jpg", "JPEG", 10, 10, 100, 75);
doc.save("my_image_document.pdf");
To add HTML elements, you can use the fromHTML method:
javascript
const doc = new jsPDF();
// Add HTML content to the PDF
const source = '<h1>This is an HTML title</h1><p>And here is a paragraph with <strong>bold text</strong>.</p>';
doc.fromHTML(source, 15, 15);
doc.save("my_html_document.pdf");
Considerations
As mentioned earlier, your mileage may vary regarding what do you want to achieve for the output PDF. Most cases will require some kind of manipulation of the content so the PDF has a different format than the source page. In order to do that, we cloned our original content and made the modifications that the client requested. In our case one of the things we needed to do was to print the contents of a pop-up overlay, and we wanted to add the company's logo to the top of the PDF. In order to do that we duplicated the popup container, then retrieved the logo reference located on the navigation bar and inserted it at the top of the cloned content. For this example we used jQuery, but it could also easily be done using vanilla JavaScript.
jQuery
var navLogo = $('.navbar-brand.logo').html();
...
$('.cloned-pdf').find('.cloned-header').prepend('<div class="cloned-pdf-logo">'+navLogo+'</div>');
...
So, as you can see you can manipulate your content as you would in other scenarios and then use the new cloned content to generate your PDF.
Conclusion
Creating a PDF from a web page using jsPDF is a powerful and flexible solution for a variety of web development projects. Whether you need to generate invoices, reports, or simply want to make your web content more accessible offline, jsPDF can help you achieve your goals. With this library, you have the ability to create dynamic and interactive PDFs that can be tailored to your specific needs. Start exploring jsPDF, experiment with its features, and see how it can enhance your web applications by enabling PDF generation directly in the browser.