Published June 14, 2023
How to Create PDF Files in JavaScript
Introduction
In the realm of document sharing, the Portable Document Format (PDF), pioneered by Adobe, plays a crucial role in preserving the integrity of text-rich and visually appealing content. Accessing a PDF file online typically requires a dedicated program. In today's digital landscape, PDF files have become indispensable for various important publications. Many businesses rely on PDF files for creating professional documents and invoices. Moreover, developers often leverage PDF creation libraries to fulfill specific client requirements. The process to generate PDFs has been streamlined with the advent of modern libraries. When selecting the most suitable library for a project that involves PDF generation, it is essential to consider factors such as build, read, and conversion capabilities, ensuring seamless integration and optimal performance.
JavaScript Libraries
Consider, for example, the scenario where we want the customer to be able to download and print a copy of our PDF invoice effortlessly. Additionally, it is crucial for us to maintain the invoice's precise layout and ensure flawless printing quality.
In this section, we will delve into an array of highly regarded JavaScript libraries that excel in converting and creating HTML to PDF documents, providing us with versatile tools for efficient and accurate document generation and conversion.
1. PDFKit
PDFKit was a PDF library that was one of the first to be launched into the vast JavaScript library ecosystem. It has grown significantly in popularity since its initial release in 2012, and as of 2021, it is still getting regular upgrades.
Using Webpack, PDFKit provides support for both Node library and web browsers, custom fonts and image embedding are supported.
However, as we will see in the comparison, some PDF libraries are effectively just PDFKit wrappers and perhaps a little easier to use than PDFKit.
There is no high-level API available for PDFKit. Documentation is frequently difficult as well. It takes some getting used to, as you might expect, and you might find that producing PDFs using JavaScript is not always the easiest chore.
// including the file system module
const fs = require('fs');
// create a document the same way as above
const Page = new PDFDocument;
// add your content to the document here, as usual
Page.text('Hello world!');
// get a blob when you're done
Page.pipe(fs.createWriteStream('Demo.pdf'));
Page.end();2. pdfmake
Unlike PDFKit which uses the conventional imperative method to generate something, pdfmake uses a declarative approach. As a result, using the pdfmake library makes it simpler to concentrate on the intended functionality of the PDF production rather than wasting time teaching the library how to accomplish a certain result.
It is crucial to bear in mind that although certain solutions may appear promising, they might not be flawless. One such example is the integration of custom fonts with pdfmake when utilizing Webpack, which can potentially lead to issues. Regrettably, there is limited online documentation available regarding this specific problem. However, if you are not utilizing Webpack, you can easily clone the Git repository and execute the font embedding script to overcome any potential hurdles associated with custom font integration.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
<script type="text/javascript">
function CreatePdf() {
var doc = {
content: [
{text:"Hello world"}
],
defaultStyle: {
}
};
pdfMake.createPdf(doc).print();
}
</script>
<button onclick="CreatePdf()">Print pdf</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
<script type="text/javascript">
function CreatePdf() {
var doc = {
content: [
{text:"Hello world"}
],
defaultStyle: {
}
};
pdfMake.createPdf(doc).print();
}
</script>
<button onclick="CreatePdf()">Print pdf</button>
</body>
</html>
3. IronPDF
IronPDF was created to make it easier for developers to create, browse, and edit PDF documents. It functions as a potent PDF converter and offers a base API for creating, editing and processing PDF files.
The IronPDF .NET package works with a variety of web components, including Xamarin, Blazor, Unity, HoloLens apps, Windows Forms, HTML, ASPX, Razor HTML, .NET Core, ASP.NET, and WPF. It also uses the Chrome engine to convert HTML to PDF. It works with Microsoft .NET and .NET Core to run both conventional Windows applications and online ASP.NET apps. IronPDF supports HTML5, JavaScript, CSS, and pictures and enables the generation of visually beautiful PDFs with titles and footers.
The IronPDF library has a wide range of features, including the ability to split and combine pages in new or existing PDF documents, read and edit existing PDF files, extract images from PDF files, add text, graphics, bookmarks, watermarks, headers, and footers to PDF files, all without the need for Acrobat Reader. From CSS and CSS media files, PDF documents can be produced. IronPDF allows users to create, upload, and update both new and pre-existing PDF forms.
- From a variety of sources, such as HTML, HTML 5, ASPX, and Razor/MVC View, IronPDF may create a PDF file. It can transform photos and HTML pages into PDF files.
- Creating interactive PDFs, filling out and submitting interactive forms, merging and splitting PDF files, extracting text and images from PDF files, searching text within PDF files, rasterizing PDFs to images, changing font size, and converting PDF files are all available tools for working with interactive PDFs through IronPDF.
- HTML login forms can be validated using user agents, proxies, cookies, HTTP headers, and form variables thanks to IronPDF's support for these capabilities.
- Access to secured documents is made possible by IronPDF by way of usernames and passwords.
HTML strings can be quickly converted into PDF files using the IronPDF library. The offered sample code shows how to turn HTML strings into documents by creating a PDF file from either the whole HTML file or a single HTML element.
The below HTML code is to be entered on Index.cshtml. Do design the HTML page for client integration.
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<a href="@Url.Page("Index", "ExportData")">Download</a>
</div>@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<a href="@Url.Page("Index", "ExportData")">Download</a>
</div>page model ReadOnly Property () As IndexModel
ViewData("Title") = "Home page"
End Property
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<div class="text-center"> <h1 class="display-4"> Welcome</h1> <a href="@Url.Page("Index", "ExportData")"> Download</a> </div>Then the code below needs to be entered in Index.cshtml.cs, which will run the service on the client side.
public FileResult OnGetExportData()
{
string fileName = "Demo.pdf";
var Renderer = new IronPdf.ChromePdfRenderer();
var pdf = Renderer.RenderHtmlAsPdf("Hello World");
return File(pdf.Stream, "applicaiton/pdf",fileName);
}public FileResult OnGetExportData()
{
string fileName = "Demo.pdf";
var Renderer = new IronPdf.ChromePdfRenderer();
var pdf = Renderer.RenderHtmlAsPdf("Hello World");
return File(pdf.Stream, "applicaiton/pdf",fileName);
}Public Function OnGetExportData() As FileResult
Dim fileName As String = "Demo.pdf"
Dim Renderer = New IronPdf.ChromePdfRenderer()
Dim pdf = Renderer.RenderHtmlAsPdf("Hello World")
Return File(pdf.Stream, "applicaiton/pdf",fileName)
End FunctionThe sample code that follows shows how to use RenderHtmlAsPdf to turn HTML content into a PDF file. To convert web pages into a string, the method accepts several HTML codes. Once we have the string representation. This speeds up the PDF generation process by downloading the page source in chunks and turning it into PDF papers. If necessary, we may also use the method SaveAs to save the created file in the server's local storage. Here we are returning the file to the server side which allows the client to download the created PDF document.
When we click the download button, it will download the PDF file like it shows on the PDF page of the above image. The created PDF file will be like the one below.
More detailed tutorials can be found here.
Conclusion
It should be mentioned that when used by others, the JavaScript code shown above has the potential for misuse and security issues. It's critical to consider the hazards like unauthorized access and data security vulnerabilities while placing such code on a web page or website. In addition, it is also important to take into account the need to support out-of-date browsers that might not have all the necessary features and compatibility issues with various systems and browsers.
The IronPDF library offers enhanced security measures, ensuring robust protection against potential threats. It operates independently of any particular browser and works seamlessly with all major browsers. With just a few lines of code, developers can effortlessly generate and parse PDF files using IronPDF. To accommodate various developer demands, the library provides a variety of licensing options, including a free developer license and extra developer licenses that are available for purchase. The $749 Lite package comes with a permanent license, a 30-day money-back guarantee, a year of software support, and upgrade options. There are no further expenses beyond the initial purchase. These licenses can be used in development, staging, and production environments. IronPDF also offers free licenses with time and redistribution restrictions. For a complete list of IronPDF costs and licensing details, please click here.
