Transform PDFs to Images Client-Side – PDF Converter

This is a simple JavaScript-powered PDF Converter that converts PDF into a collection of images, each representing a single page of the original document.

These images can then be bundled and offered to the user for download as a ZIP file. All processes and conversions operate entirely on the client side, without the need for server-side processing and data transfer.

The PDF converter relies on PDExtension-js for PDF rendering, PDF.js for reading PDF content, and JSZip.js for creating compressed files.

How it works:

• Load necessary dependencies like PDF.js and JSZip.js.
• The converter creates a loading UI to show progress.
• Use PDF.js to read and render PDF pages.
• Each page is converted to an image using HTML canvas.
• The images are stored in memory.
• When downloading, JSZip creates a ZIP file containing all images.
• The ZIP file is then offered for download through a temporary link.

How to use it:

1. Importing the necessary PDExtension-js library from a CDN.

<script src="https://cdn.jsdelivr.net/gh/pardnchiu/PDExtension-js/js/PDExtension.min.js"></script>

2. Download and import the PDF Converter’s script:

import { PDFConverter } from "./js/PDFConverter.min.js";

3. Create a new PDF Converter instance, specify the PDF file, desired zoom factor, and image type:

const converter = new PDFConverter({
      // get the PDF file you upload through a file input
      file: [file],   
      // zoom factor
      scale: 1.5,     
      // "jpg" or "png"
      type: "png",
});

4. Read the PDF data and convert it into images:

converter.loading().then(images = {
  // do something
});

5. Download images as a ZIP file:

converter.download();