Web Workers for generating and manipulating PDF documents

02 Oct 2023

webworkers

With the growing demand for generating and manipulating PDF documents on the web, developers are constantly looking for efficient solutions to offload these tasks from the main thread to avoid blocking the user interface and provide a smoother experience. One such solution is the use of Web Workers.

What are Web Workers?

Web Workers are a browser feature that enables running JavaScript code in the background separate from the main thread. This allows for parallel execution of scripts and enables developers to perform time-consuming tasks without blocking the user interface.

Generating PDF Documents with Web Workers

To generate PDF documents using Web Workers, you can utilize libraries like pdfmake or jsPDF. These libraries provide a convenient API that allows you to define the content, layout, and styling of your PDF documents.

To utilize Web Workers with such libraries, you need to create a dedicated worker script. This script will handle the generation of the PDF document based on your specified parameters. Here’s an example using pdfmake:

// main.js
const worker = new Worker('pdfWorker.js');

worker.onmessage = function (event) {
  // Obtain the generated PDF document from the worker
  const pdfDocument = event.data;
  
  // Process the generated PDF document (e.g., save it, display it in the browser, etc.)
  // ...
}

// Trigger PDF generation
worker.postMessage({ content: 'Hello, World!' });

// pdfWorker.js
importScripts('pdfmake.min.js');

self.onmessage = function (event) {
  // Obtain the content from the message and generate the PDF document
  const content = event.data.content;
  
  const documentDefinition = {
    content: [
      content // Set the content for the PDF document
    ]
  };
  
  // Generate the PDF document
  const pdfDocument = pdfMake.createPdf(documentDefinition);
  
  // Send the generated PDF document back to the main thread
  self.postMessage(pdfDocument);
}

Manipulating PDF Documents with Web Workers

Similar to PDF generation, you can also manipulate existing PDF documents using Web Workers. Libraries like pdf-lib provide a powerful API for reading, modifying, and saving PDF documents.

To manipulate PDF documents with Web Workers using pdf-lib, you follow a similar approach as with PDF generation. You create a dedicated worker script that handles the required operations. Here’s an example:

// main.js
const worker = new Worker('pdfWorker.js');

worker.onmessage = function (event) {
  // Obtain the modified PDF document from the worker
  const modifiedPdfDocument = event.data;
  
  // Process the modified PDF document (e.g., save it, display it in the browser, etc.)
  // ...
}

// Trigger PDF manipulation
worker.postMessage({ sourcePdf: 'example.pdf', action: 'addText', text: 'Hello, World!' });

// pdfWorker.js
import { PDFDocument, rgb } from 'pdf-lib';

self.onmessage = async function (event) {
  // Obtain the PDF and the required action from the message
  const sourcePdf = event.data.sourcePdf;
  const action = event.data.action;
  const text = event.data.text;
  
  // Read the source PDF document
  const pdfBytes = await fetch(sourcePdf).then((res) => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(pdfBytes);
  
  if (action === 'addText') {
    // Modify the PDF document by adding text
    const { width, height } = pdfDoc.getPages()[0].getSize();
    const page = pdfDoc.getPages()[0];
  
    page.drawText(text, { x: 50, y: height - 100, size: 24, color: rgb(0, 0, 0) });
  }
  
  // Save the modified PDF document as a binary array
  const modifiedPdfBytes = await pdfDoc.save();
  
  // Send the modified PDF document back to the main thread
  self.postMessage(modifiedPdfBytes);
}

By utilizing Web Workers for generating and manipulating PDF documents, you can ensure a more responsive and efficient user experience. Offloading these tasks to separate threads allows the main thread to focus on other essential operations, resulting in a smoother web application.

#pdf #webworkers