How to Extract Pages from a PDF and Render Them with JavaScript

PDFs are everywhere on the web. Whether you‘re downloading a bank statement, submitting a tax form, or reading a whitepaper, chances are you‘re dealing with a PDF. As a web developer, being able to work with PDFs programmatically is an incredibly valuable skill. It allows you to build all sorts of powerful document processing and automation tools.

Consider these statistics:

• There are over 2.5 trillion PDFs in circulation today
• PDFs account for over 80% of all business-to-business document sharing
• Usage of PDFs on the web grew 10x between 2019 and 2020
• 67% of all printable documents on the web are in the PDF format

(Sources: PDF Association, Adobe)

Clearly, PDFs are here to stay, and they play a major role in how businesses and individuals share documents online. As a full-stack developer, you can bring a lot of value by adding PDF capabilities to your web applications.

However, working with PDFs programmatically has historically been quite challenging. The PDF specification is vast and complex, and most server-side tools for generating and manipulating PDFs are proprietary and expensive.

Fortunately, the rise of powerful JavaScript libraries has made it possible to work with PDFs directly in the browser or in Node.js. With a few lines of code, you can now parse PDF files, extract content and data, generate new PDFs, and even render them in a web page.

In this article, we‘ll take a deep dive into client-side PDF processing with JavaScript. I‘ll walk through a real-world example of extracting pages from a PDF and displaying them in a browser. Along the way, I‘ll share my perspective on the key issues and tradeoffs in PDF manipulation based on my experience as a professional web developer.

Understanding the PDF Format

Before we get into the JavaScript side of things, let‘s take a closer look at the PDF format itself. PDF stands for "Portable Document Format", and it was developed by Adobe in the early 1990s as a way to share documents that would look the same on any device.

PDFs achieve this device independence by including all the resources needed to render the document – fonts, images, layout information, etc. – right in the file itself. This is in contrast to a format like HTML, which relies on the browser or user‘s system to provide things like fonts.

Internally, a PDF file is essentially a database of objects that describe the structure and content of the document. The main types of objects include:

• Page objects, which represent a single page in the document. Each page has a fixed size and contains references to the content, resources, and annotations that appear on that page.
• Content streams, which contain the actual text, graphics, and images that make up the visible content of a page. Content streams are written in a special mini-language that includes vector and raster drawing commands.
• Resource dictionaries, which contain reusable assets like fonts and images that are referenced by content streams.
• Annotations, which represent interactive elements like links, form fields, and comments that are separate from the main page content.

These objects are stored in the PDF file as key-value pairs in a binary format. A special index called the cross-reference table allows PDF readers to quickly look up and access objects by their ID number.

The PDF format has a lot of features that make it well-suited for document exchange, including:

• Compression: Objects in a PDF can be compressed to reduce file size. The format supports several compression algorithms including DEFLATE and JPEG.
• Security: PDFs support encryption and access control features to protect sensitive content. PDF files can be password-protected or have certain permissions disabled, like printing or copying text.
• Accessibility: PDFs can include tags and metadata that make the document more accessible to users with disabilities. For example, tags can indicate the reading order of the content or provide alternate text for images.
• Interactivity: PDFs can include form fields, buttons, and scripted behaviors that allow for user input and interactivity. PDF forms are very common for things like applications, surveys, and contracts.

However, these same features also contribute to the complexity of working with PDFs programmatically. A PDF file is not a simple document but a sophisticated container for a wide variety of content types and interactive elements. Parsing and manipulating that content requires a good understanding of the PDF specification and robust software tools.

Introducing pdf-lib

While it‘s possible to work with the raw PDF format directly, most developers will want to use a higher-level library that abstracts away some of the complexity. In the JavaScript world, there are several popular open-source libraries for PDF manipulation, including PDF.js, pdf-lib, jsPDF, and pdfkit.

For this article, we‘ll be using pdf-lib, a pure JavaScript library for parsing, manipulating, and rendering PDFs. I chose pdf-lib for a few key reasons:

• It has a modern, Promise-based API that is easy to use with async/await
• It supports both parsing existing PDFs and creating new PDFs from scratch
• It can run in the browser, Node.js, or Deno without any native dependencies
• It has strong TypeScript support, which makes it easier to catch errors and write clean code
• It has excellent documentation and a wide range of examples

Here‘s a quick example of using pdf-lib to load a PDF file and log the number of pages:

import { PDFDocument } from ‘pdf-lib‘;

async function logPDFPageCount(pdfUrl) {
  const response = await fetch(pdfUrl);
  const pdfArrayBuffer = await response.arrayBuffer();

  const pdfDoc = await PDFDocument.load(pdfArrayBuffer);
  const pageCount = pdfDoc.getPageCount();

  console.log(`PDF has ${pageCount} pages`);
}

As you can see, the pdf-lib API is quite straightforward. We start by fetching the PDF file as an ArrayBuffer. Then we load that buffer into a PDFDocument object using the PDFDocument.load method.

The PDFDocument object provides a variety of methods for inspecting and manipulating the document, like getPageCount, removePage, and copyPages. It also has methods for saving the document back out to a file or buffer.

One important thing to note is that pdf-lib does not do any actual rendering or display of PDFs. It simply provides an API for working with the document content and structure. If you want to display the PDF in a browser, you‘ll need to use another tool like PDF.js or render the pages to images yourself. We‘ll look at how to do that a bit later.

Extracting Pages from a PDF

Now let‘s walk through a more realistic example of using pdf-lib to extract specific pages from a PDF file. This is a common task for document processing workflows, like splitting up a large report into sections or pulling out a single page to share.

Here‘s the code:

import { PDFDocument } from ‘pdf-lib‘;

async function extractPagesFromPdf(file, pageNumbers) {
  const reader = new FileReader();
  reader.readAsArrayBuffer(file);

  return new Promise((resolve) => {
    reader.onload = async () => {
      const pdfDoc = await PDFDocument.load(reader.result);
      const selectedPages = await pdfDoc.extractPages(pageNumbers);

      const newPdfDoc = await PDFDocument.create();
      selectedPages.forEach(page => newPdfDoc.addPage(page));

      const pdfDataUri = await newPdfDoc.saveAsBase64({ dataUri: true });
      resolve(pdfDataUri);
    };
  });
}

Let‘s break this down step-by-step:

1. We start by creating a FileReader instance and reading the selected PDF file as an ArrayBuffer. This gives us the raw binary data of the PDF.

2. We wrap the rest of the function in a Promise so we can wait for the FileReader to finish loading the file data.

3. Once the file is loaded, we pass the ArrayBuffer to PDFDocument.load to parse it into a PDFDocument object.

4. We call the extractPages method on the PDFDocument, passing in an array of page numbers to extract. This returns a new array of Page objects representing just those pages.

5. We create a new PDFDocument using PDFDocument.create. This will be the container for our extracted pages.

6. We loop through the array of extracted Page objects and add each one to the new PDFDocument using the addPage method.

7. Finally, we save the new PDFDocument to a base64-encoded data URI using the saveAsBase64 method. We resolve the Promise with this data URI string.

The resulting data URI can be used to display the PDF in an iframe or open it in a new browser tab. For example:

<iframe id="pdf-preview"></iframe>

<script>
  const pdfFile = document.getElementById(‘pdf-input‘).files[0];
  const pageNumbers = [1, 3, 5];

  extractPagesFromPdf(pdfFile, pageNumbers).then(pdfDataUri => {
    document.getElementById(‘pdf-preview‘).src = pdfDataUri;
  });
</script>

This code assumes we have a file input element on the page with the id "pdf-input". We get the selected file from this input and pass it to our extractPagesFromPdf function along with an array of page numbers to extract (in this case, pages 1, 3, and 5).

When the function resolves, we get back a data URI representing the extracted pages as a new PDF document. We set this URI as the src attribute of an iframe element to display the PDF in the page.

Here‘s what the PDF might look like:

And that‘s it! With just a few lines of code, we‘re able to extract specific pages from a PDF and display them in a web page. Of course, there are many ways you could expand on this example, like allowing the user to select the page numbers to extract or providing options for downloading or printing the new PDF.

Performance and Security Considerations

While pdf-lib makes it easy to work with PDFs in JavaScript, there are some important performance and security considerations to keep in mind.

Performance

Parsing and manipulating PDFs can be a computationally intensive task, especially for larger documents with lots of pages, images, and fonts. If you‘re working with PDFs in a web browser, you need to be mindful of the potential impact on page load times and responsiveness.

Here are a few tips for optimizing PDF performance in JavaScript:

• Use web workers: Web workers allow you to run CPU-intensive tasks in a background thread, freeing up the main thread to respond to user interactions. You can use a worker to parse and manipulate PDFs without blocking the UI.
• Lazy-load pages: If you‘re building a PDF viewer, consider only loading and rendering the pages that are currently visible to the user. As the user scrolls, you can dynamically load additional pages. This can significantly reduce the initial load time for large documents.
• Minimize redraws: Every time you modify a PDF document, the browser may need to re-render the affected pages. To minimize the performance impact, batch your changes and only re-render when necessary.
• Optimize resources: Make sure any images, fonts, or other resources you embed in a PDF are optimized for size. Consider compressing images, subsetting fonts, and removing unused assets to reduce the overall file size.

Security

PDFs can contain a variety of interactive features like form fields, hyperlinks, and embedded JavaScript. While these features can be useful, they can also be vectors for security vulnerabilities if not handled properly.

Here are some best practices for securing PDFs in web applications:

• Validate input: If your application allows users to upload PDF files, make sure to validate and sanitize the input before processing the file. Treat PDFs as untrusted data and be careful not to execute any embedded scripts or open any hyperlinks without user consent.

• Set CORS headers: If you‘re loading PDFs from a different domain than your web application, make sure to set the appropriate Cross-Origin Resource Sharing (CORS) headers to restrict access. This can prevent malicious websites from loading your PDFs in their own pages and potentially exploiting vulnerabilities.

• Use Content Security Policy: Set a Content Security Policy (CSP) for your web application to restrict the types of content that can be loaded and executed. For example, you might want to disable inline scripts or only allow images from trusted domains.

• Keep software up to date: Make sure you‘re using the latest version of any PDF libraries or tools in your application. Security vulnerabilities are regularly discovered and patched in open-source software, so it‘s important to stay up to date.

By following these best practices and staying vigilant, you can help protect your users and your application from potential security threats related to PDFs.

Conclusion and Further Reading

In this article, we‘ve taken a deep dive into working with PDFs in JavaScript. We‘ve explored the PDF format and looked at some of the key considerations and challenges in PDF manipulation. We‘ve also walked through a hands-on example of using the pdf-lib library to extract pages from a PDF and display them in a web browser.

As a full-stack developer, I believe PDF processing is an incredibly valuable skill to have in your toolkit. PDFs are a ubiquitous format in business and government, and being able to programmatically generate, manipulate, and extract data from PDFs can open up a wide range of possibilities for automation and optimization.

Whether you‘re building a document management system, an invoicing tool, or a reporting dashboard, PDF support can be a key differentiator and value add. With modern JavaScript libraries like pdf-lib, it‘s easier than ever to work with PDFs directly in a web browser or Node.js environment.

Of course, we‘ve only scratched the surface of what‘s possible with PDF and JavaScript. Here are some additional resources you can explore to learn more:

• The PDF Association is a great resource for staying up to date on PDF standards, best practices, and industry trends. They offer a variety of whitepapers, webinars, and educational materials for developers.
• The pdf-lib documentation provides a comprehensive reference for the library‘s API and includes a variety of code samples and tutorials.
• The Mozilla PDF.js project is another popular open-source library for rendering and manipulating PDFs in the browser. It has a more extensive feature set than pdf-lib but can be more complex to use.
• For server-side PDF generation, you might want to check out libraries like Puppeteer or Playwright, which allow you to programmatically generate PDFs from web pages using a headless browser.

Ultimately, the key to working effectively with PDFs in JavaScript is to have a good understanding of the underlying format and to choose the right tools and libraries for your specific use case. Don‘t be afraid to experiment and try out different approaches until you find a workflow that meets your needs.

I hope this article has given you a solid foundation for working with PDFs in your own projects. If you have any questions or feedback, feel free to reach out on Twitter or GitHub. Happy coding!