pdf - freeCodeCamp.org

How to Build a Browser-Based PDF Blur Tool Using JavaScript

Bhavin Sheth — Fri, 24 Jul 2026 20:44:56 +0000

Many PDF documents contain information that shouldn't be shared publicly. Personal details, financial figures, signatures, addresses, account numbers, employee information, or confidential business data often need to be hidden before a file is sent to someone else.

A PDF Blur Tool makes this process simple. Instead of permanently removing content, it places a blur effect over selected areas of a PDF so sensitive information becomes difficult to read while the rest of the document remains unchanged.

In this tutorial, you'll build a browser-based PDF Blur Tool using JavaScript. Users will be able to upload a PDF, preview every page, draw blur boxes over sensitive content, adjust the blur intensity, apply the blur to selected pages, preview the final result, and download the processed PDF, all without uploading files to a server.

We'll use PDF.js to render PDF pages inside the browser, HTML Canvas to create and manage blur regions, and PDF-lib to generate the final blurred PDF.

By the end of this tutorial, you'll have a fully functional client-side PDF editing tool similar to the one available on my site, AllInOneTools.

What This PDF Blur Tool Does and How It Works
Project Setup
Creating the HTML Layout
Uploading and Previewing PDFs
Creating Blur Regions
Applying Blur to Pages
Generating the Final PDF
Previewing the Result
Renaming and Downloading
Demo: How the PDF Blur Tool Works
Performance Tips
Common Mistakes
Conclusion

What This PDF Blur Tool Does and How It Works

A PDF Blur Tool helps protect sensitive information before a document is shared. Instead of editing or deleting the original content, it applies a visual blur effect over selected areas so confidential information becomes unreadable while the rest of the document remains unchanged.

This approach is useful for hiding personal details, financial information, account numbers, signatures, addresses, faces, or any other private content that shouldn't be visible in the final document.

In this project, users can upload a PDF directly from their browser, preview every page, and draw one or more blur regions over the areas they want to hide. The tool also allows users to adjust the blur intensity, blur either selected areas or entire pages, apply the effect to the current page, all pages, or specific page ranges, preview the completed document, rename the output file, and download the final PDF.

Because everything runs inside the browser, no files are uploaded to a server, helping maintain document privacy.

Behind the scenes, the application first renders each PDF page onto an HTML canvas using PDF.js. Rather than modifying the original PDF immediately, it records the position, size, page number, and blur intensity for every blur region that the user creates.

When the user clicks Apply & Finalize, those stored regions are converted from browser coordinates into actual PDF page coordinates. The selected blur effect is then applied to the rendered page, and PDF-lib generates a new PDF containing the blurred content while preserving the rest of the document.

This workflow provides an interactive editing experience while keeping the original PDF unchanged until the final document is generated.

For example, each blur region can be represented as an object like this:

const blurRegion = {

    page: 2,

    x: 180,

    y: 240,

    width: 260,

    height: 90,

    intensity: 6

};

Each object stores all the information required to recreate the blur effect during the final PDF generation process.

Project Setup

Before writing any code, let's create a simple project structure for our PDF Blur Tool.

We'll use plain HTML, CSS, and JavaScript, along with two libraries:

PDF.js for rendering PDF pages inside the browser.
PDF-lib for generating the final blurred PDF.

Our project structure looks like this:

pdf-blur-tool/

│── index.html
│── style.css
│── script.js
│── pdf.worker.min.js
│── assets/

Keeping the project simple makes it easier to understand how each part works.

Add PDF.js and PDF-lib before loading your own JavaScript.

Configure the PDF worker.

pdfjsLib.GlobalWorkerOptions.workerSrc =
    "pdf.worker.min.js";

The worker processes PDF rendering in a background thread, helping keep the interface responsive while pages are rendered.

Creating the HTML Layout

The application consists of four main sections:

Upload area
PDF preview
Blur settings panel
Final download section

Create the basic layout:

Initially, only the upload section is visible.

After a PDF is selected, the editor becomes visible.

Selecting DOM Elements

Create references to the elements used throughout the application.

const uploadSection =
    document.getElementById(
        "uploadSection"
    );

const editorSection =
    document.getElementById(
        "editorSection"
    );

const resultSection =
    document.getElementById(
        "resultSection"
    );

const fileInput =
    document.getElementById(
        "pdfInput"
    );

const pdfCanvas =
    document.getElementById(
        "pdfCanvas"
    );

const canvasContext =
    pdfCanvas.getContext("2d");

These references allow the application to switch between the upload, editing, and download stages.

Uploading and Previewing PDFs

The upload section accepts both drag-and-drop and traditional file selection.

When a PDF is chosen, verify that it's actually a PDF before continuing.

async function handlePdfUpload(
    file
) {

    if (
        !file ||
        file.type !==
        "application/pdf"
    ) {

        alert(
            "Please select a PDF file."
        );

        return;

    }

    await loadPdf(file);

}

If validation succeeds, the document is loaded into memory.

Reading the PDF

Use the File API to convert the uploaded file into an ArrayBuffer.

async function loadPdf(
    file
) {

    const bytes =
        await file.arrayBuffer();

    pdfDocument =
        await pdfjsLib
            .getDocument({
                data: bytes
            })
            .promise;

    currentPage = 1;

    await renderPage(
        currentPage
    );

}

The uploaded bytes will also be reused later when generating the blurred PDF.

Rendering the First Page

PDF.js renders each page onto an HTML canvas.

Start by retrieving the requested page.

async function renderPage(
    pageNumber
) {

    const page =
        await pdfDocument
            .getPage(
                pageNumber
            );

    const viewport =
        page.getViewport({
            scale: 1.5
        });

Resize the canvas to match the page dimensions.

pdfCanvas.width =
    viewport.width;

pdfCanvas.height =
    viewport.height;

Render the page.

await page.render({

    canvasContext,

    viewport

}).promise;

After rendering finishes, the PDF page becomes visible inside the editor.

Most PDF documents contain multiple pages.

Allow users to move between pages using Previous and Next buttons.

let currentPage = 1;

let pdfDocument = null;

Move to the previous page.

previousButton
.addEventListener(
    "click",
    async () => {

        if (
            currentPage === 1
        ) {

            return;

        }

        currentPage--;

        await renderPage(
            currentPage
        );

    }
);

Move to the next page.

nextButton
.addEventListener(
    "click",
    async () => {

        if (
            currentPage ===
            pdfDocument.numPages
        ) {

            return;

        }

        currentPage++;

        await renderPage(
            currentPage
        );

    }
);

Update the page counter whenever the current page changes.

pageIndicator.textContent =
    `Page ${currentPage} of ${pdfDocument.numPages}`;

This provides users with clear feedback while navigating large PDF documents.

Preparing for Blur Editing

Once the current page is rendered, the application prepares a transparent layer above the PDF canvas.

This overlay captures mouse interactions without modifying the original page preview.

Create the overlay.

Match its size to the PDF preview.

overlayCanvas.width =
    pdfCanvas.width;

overlayCanvas.height =
    pdfCanvas.height;

Later in the tutorial, this overlay will allow users to draw blur regions while keeping the underlying PDF page untouched.

Showing the Editor

After the first page finishes rendering, switch from the upload screen to the editor interface.

uploadSection.hidden =
    true;

editorSection.hidden =
    false;

Users can now preview the document, navigate between pages, and begin selecting areas that should be blurred.

Creating Blur Regions

Now that the PDF preview is working, we can build the most important feature of the application: allowing users to blur sensitive information.

Instead of editing the PDF immediately, users first draw one or more blur regions over the page preview.

Each region stores its own position, size, and blur intensity. These regions are later converted into actual PDF coordinates during final processing.

Creating the Blur Area Object

Every blur region is represented as a JavaScript object.

For example:

const blurArea = {

    page: currentPage,

    x: 0,

    y: 0,

    width: 0,

    height: 0,

    intensity: 6

};

Rather than modifying the PDF immediately, the application simply keeps track of these objects until the user clicks Apply & Finalize.

Storing Multiple Blur Regions

Users often need to hide more than one piece of information.

Store all blur areas inside an array.

const blurAreas = [];

Whenever a new blur box is created, push it into the array.

blurAreas.push({

    page: currentPage,

    x,

    y,

    width,

    height,

    intensity:
        blurIntensity

});

This makes it easy to redraw, edit, or remove individual blur regions later.

Starting a Blur Selection

The transparent overlay canvas captures mouse interactions.

When the user presses the mouse button, record the starting position.

let isDrawing = false;

let startX = 0;

let startY = 0;

overlayCanvas
.addEventListener(
    "mousedown",
    event => {

        isDrawing = true;

        startX = event.offsetX;

        startY = event.offsetY;

    }
);

The blur rectangle begins at this point.

Drawing the Blur Rectangle

As the mouse moves, update the rectangle dimensions.

overlayCanvas
.addEventListener(
    "mousemove",
    event => {

        if (
            !isDrawing
        ) {

            return;

        }

        drawPreviewBox(

            startX,

            startY,

            event.offsetX,

            event.offsetY

        );

    }
);

The preview updates continuously while the user drags the mouse.

Finishing the Selection

When the mouse button is released, save the completed blur region.

overlayCanvas
.addEventListener(
    "mouseup",
    event => {

        isDrawing = false;

        blurAreas.push({

            page:
                currentPage,

            x:
                startX,

            y:
                startY,

            width:
                event.offsetX -
                startX,

            height:
                event.offsetY -
                startY,

            intensity:
                blurIntensity

        });

        redrawBlurAreas();

        updateBlurList();

    }
);

Each blur region becomes part of the current editing session.

Drawing Existing Blur Areas

Whenever the page changes or a blur region is added, redraw every blur box.

function redrawBlurAreas() {

    overlayContext.clearRect(

        0,

        0,

        overlayCanvas.width,

        overlayCanvas.height

    );

    blurAreas

        .filter(

            area =>

                area.page ===
                currentPage

        )

        .forEach(

            drawBlurArea

        );

}

This ensures that previously created blur regions remain visible while editing.

Displaying Blur Boxes

Render every stored region with a dashed outline.

function drawBlurArea(
    area
) {

    overlayContext
        .setLineDash([6, 4]);

    overlayContext
        .strokeStyle =
        "#4f6cff";

    overlayContext
        .strokeRect(

            area.x,

            area.y,

            area.width,

            area.height

        );

}

The outline acts as a guide and doesn't become part of the final PDF.

Blur Options

Users can choose how the blur should be applied.

The tool supports two modes:

Blur selected areas
Blur entire page(s)

The selected option controls the editing behavior.

const blurMode =
document.querySelector(

    'input[name="blurMode"]:checked'

).value;

If Blur selected areas is chosen, users draw blur rectangles manually.

If Blur entire page(s) is selected, the application skips manual selection and prepares to blur the entire page during final processing.

Adjusting Blur Intensity

Different documents require different levels of blur.

A slider lets users control the blur strength before applying the effect.

const blurSlider =
document.getElementById(
    "blurIntensity"
);

let blurIntensity = 6;

blurSlider
.addEventListener(
    "input",
    event => {

        blurIntensity =
        Number(
            event.target.value
        );

    }
);

The selected value is stored with every newly created blur region.

blurArea.intensity =
blurIntensity;

Higher values produce a stronger blur effect.

Managing Multiple Blur Areas

Many documents contain several pieces of confidential information.

Instead of limiting users to a single blur rectangle, the application displays every saved region.

For example:

Blur Area #1

Blur Area #2

Blur Area #3

Each entry includes a remove button.

function removeBlurArea(
    index
) {

    blurAreas.splice(
        index,
        1
    );

    redrawBlurAreas();

    updateBlurList();

}

This allows users to delete only the blur region they no longer need.

To remove all blur regions from the current page:

function clearCurrentPage() {

    const remaining =

    blurAreas.filter(

        area =>

            area.page !==
            currentPage

    );

    blurAreas.length = 0;

    blurAreas.push(
        ...remaining
    );

    redrawBlurAreas();

}

Applying Blur to Pages

Users may want to blur only one page or several pages within a document.

The editor provides three options:

Current page only
All pages
Specific pages

const pageOption =
document.querySelector(

'input[name="pageOption"]:checked'

).value;

If the user selects Specific pages, they can enter values such as:

1, 3-5, 8

These values will later be converted into an array of page numbers before the final PDF is generated.

Applying the Blur Effect

So far, users have uploaded a PDF, selected one or more blur regions, adjusted the blur intensity, and chosen which pages should be processed.

The final step is converting those blur regions into actual blurred content inside the generated PDF.

Rather than modifying the original document directly, the application creates a new PDF while preserving the original file.

Loading the Original PDF

Start by loading the uploaded PDF into PDF-lib.

async function applyBlur() {

    const pdfDoc =

        await PDFLib.PDFDocument.load(
            originalPdfBytes.slice()
        );

    const pages =
        pdfDoc.getPages();

}

Using a copy of the original bytes ensures that the uploaded document remains unchanged.

Processing the Selected Pages

Determine which pages should receive the blur effect.

const selectedPages =

parsePageSelection(

    pageSelection,

    pdfDoc.getPageCount()

);

For example:

Current Page

↓

[2]


All Pages

↓

[1,2,3,4]


Specific Pages

↓

[1,3,5]

Only these pages will be modified during processing.

Rendering Each Page as an Image

Since blur is a pixel-based effect, each selected PDF page is rendered into an off-screen canvas.

const page =

await pdfDocument.getPage(
    pageNumber
);

const viewport =
page.getViewport({

    scale: 2

});

const canvas =
document.createElement(
    "canvas"
);

canvas.width =
viewport.width;

canvas.height =
viewport.height;

Render the page.

await page.render({

    canvasContext:
    canvas.getContext("2d"),

    viewport

}).promise;

The canvas now contains a bitmap version of the PDF page that can be edited.

Applying Blur to Selected Regions

Retrieve all blur regions that belong to the current page.

const pageRegions =

blurAreas.filter(

    area =>

        area.page === pageNumber

);

Loop through every blur region.

pageRegions.forEach(

    area => {

        blurCanvasRegion(

            canvas,

            area

        );

    }

);

Each region is blurred independently.

Blurring the Canvas Region

The browser's Canvas API allows filters to be applied while drawing.

Set the blur filter based on the selected intensity.

context.filter =

`blur(${area.intensity}px)`;

Redraw only the selected region.

context.drawImage(

    canvas,

    area.x,

    area.y,

    area.width,

    area.height,

    area.x,

    area.y,

    area.width,

    area.height

);

After drawing, reset the filter.

context.filter = "none";

Only the selected rectangle becomes blurred while the rest of the page remains unchanged.

Blurring an Entire Page

If the user chooses Blur entire page(s), the process is much simpler.

Apply the filter to the full canvas.

context.filter =

`blur(${blurIntensity}px)`;

context.drawImage(

    canvas,

    0,

    0

);

context.filter =
"none";

The entire rendered page receives the selected blur effect.

Converting the Canvas Back into a PDF Image

After editing the canvas, convert it into an image.

const imageData =

canvas.toDataURL(
    "image/png"
);

Convert the image into bytes.

const bytes =

await fetch(imageData)

.then(

response =>

response.arrayBuffer()

);

Embed the image inside PDF-lib.

const image =

await pdfDoc.embedPng(
    bytes
);

Replace the page contents.

const pdfPage =

pages[
pageNumber - 1
];

const size =
pdfPage.getSize();

pdfPage.drawImage(

    image,

    {

        x: 0,

        y: 0,

        width:
        size.width,

        height:
        size.height

    }

);

Repeat the same process for every selected page.

Showing the Processing State

Generating large PDF files may take a few seconds.

Display a loading state while processing.

applyButton.disabled =
true;

applyButton.textContent =
"Applying...";

After processing finishes:

applyButton.disabled =
false;

applyButton.textContent =
"Apply & Finalize";

This gives users clear feedback that the application is working.

During processing:

Generating the Final PDF

After every page has been processed, save the completed document.

const pdfBytes =

await pdfDoc.save();

const outputBlob =
new Blob(

[pdfBytes],

{

type:
"application/pdf"

}

);

Store the result so it can be previewed and downloaded later.

generatedPdfBlob =
outputBlob;

At this point, the blurred PDF has been successfully generated.

Previewing the Result

Hide the editing interface and display the completed document.

editorSection.hidden =
true;

resultSection.hidden =
false;

The result screen displays:

Final PDF preview
Editable filename
Total pages
File size
Download button

The user can review the processed document before downloading it.

Renaming and Downloading

Before downloading, users may want to rename the generated file.

Create a filename field.

Validate the filename.

function getFilename() {

    let filename =
    outputFilename.value.trim();

    if (!filename) {

        filename =
        "blurred-document.pdf";

    }

    if (
        !filename
        .toLowerCase()
        .endsWith(".pdf")
    ) {

        filename += ".pdf";

    }

    return filename;

}

Display additional file information.

pageCount.textContent =

`Pages:
${finalPdfDocument.numPages}`;

fileSize.textContent =

formatFileSize(
generatedPdfBlob.size
);

Download the processed document.

downloadButton
.addEventListener(

"click",

() => {

    const url =

    URL.createObjectURL(
        generatedPdfBlob
    );

    const link =
    document.createElement(
        "a"
    );

    link.href = url;

    link.download =
    getFilename();

    link.click();

    URL.revokeObjectURL(
        url
    );

});

The browser downloads the completed PDF without sending any files to a remote server.

Demo: How the PDF Blur Tool Works

Let's walk through the complete workflow.

Step 1: Upload the PDF

Users upload a PDF using drag-and-drop or the Select PDF button.

The browser validates the file and prepares it for rendering.

Step 2: Preview the Document

The uploaded PDF appears inside the preview window.

Users can move through the document using the page navigation controls.

Step 3: Configure Blur Settings

Users choose whether to blur selected areas or entire pages.

They can also configure the blur intensity before creating any blur regions.

Step 4: Draw Blur Areas

Users click and drag directly on the PDF preview to create blur rectangles over sensitive content.

Multiple blur regions can be created on the same page.

Step 5: Adjust Blur Intensity

The blur intensity slider controls how strong the blur effect should appear.

Higher values produce a stronger blur.

Step 6: Manage Blur Regions

Individual blur areas can be removed, or all blur regions on the current page can be cleared.

This makes editing much easier before generating the final PDF.

Step 7: Choose the Pages

Users decide whether the blur should be applied to:

Current page
All pages
Specific pages

For example:

1,3-5,8

Step 8: Apply the Blur

After reviewing the settings, users click Apply & Finalize.

The application generates a new PDF containing the selected blur effects.

Step 9: Review the Final Document

The completed PDF appears in the preview window.

Users can verify every blurred region before downloading.

Step 10: Rename and Download

Finally, users rename the output file if needed and click Download.

The browser saves the completed PDF locally.

Performance Tips

Large PDF files can take longer to render and process, but a few simple optimizations can keep the editor responsive.

Render only the page the user is currently viewing instead of loading the entire document.

await renderPage(
    currentPage
);

Reuse the same canvas and redraw only the blur regions when changes are made.

overlayContext.clearRect(
    0,
    0,
    overlayCanvas.width,
    overlayCanvas.height
);

redrawBlurAreas();

During final processing, generate only the pages selected by the user.

for (const page of selectedPages) {

    await processPage(page);

}

Finally, release temporary resources after the download completes.

URL.revokeObjectURL(
    downloadUrl
);

These optimizations reduce memory usage and help the PDF Blur Tool perform smoothly, even with large multi-page documents.

Common Mistakes

One common issue is storing blur coordinates before accounting for the current zoom level.

Always convert preview coordinates into the PDF's coordinate system before generating the final document.

const scaleX =

pdfWidth /
canvas.width;

const scaleY =

pdfHeight /
canvas.height;

Another mistake is allowing blur regions to extend beyond the page boundaries.

Clamp the values before processing.

blurArea.x = Math.max(
0,
blurArea.x
);

blurArea.y = Math.max(
0,
blurArea.y
);

Users should also verify the final preview before downloading, especially when multiple blur regions exist across different pages.

Finally, remember that this project applies a visual blur effect to the rendered PDF pages. If your application requires permanent removal of sensitive content rather than visual obscuring, additional document-redaction techniques are needed.

Conclusion

In this tutorial, you built a browser-based PDF Blur Tool using JavaScript.

You learned how to upload and preview PDF documents, navigate between pages, create and manage multiple blur regions, adjust blur intensity, apply blur to selected pages, generate a new PDF with PDF-lib, preview the processed document, and download the final file – all without uploading data to a server.

By combining PDF.js, the HTML Canvas API, and PDF-lib, you created a privacy-focused PDF editing tool that runs entirely inside the browser.

You can explore the complete workflow using the PDF Blur Tool.

From here, you could extend the project with features such as movable and resizable blur regions, undo and redo support, reusable blur presets, keyboard shortcuts, touch-device editing, or additional annotation tools for even more advanced browser-based PDF editing.

How to Build a Browser-Based PDF Signature Tool Using JavaScript

Bhavin Sheth — Mon, 20 Jul 2026 20:47:13 +0000

PDF documents are commonly used for agreements, forms, approvals, invoices, reports, applications, and other documents that may need a signature or additional text before they are shared.

A traditional workflow often involves printing the document, signing it by hand, scanning it again, and sending the new file. For a simple electronic signature, that process adds unnecessary steps.

In this tutorial, you'll build a browser-based PDF Signature Tool using JavaScript. Users will be able to upload a PDF, preview and navigate its pages, and add content directly to the document.

The application will support two main element types: Signature and Text/Stamp.

For signatures, users can draw directly in the browser, type their name and choose a signature style, or upload an existing signature image. For text-based elements, they can enter custom text or use preset stamps such as APPROVED, CONFIDENTIAL, DRAFT, and PAID.

After creating an element, users can position it on the PDF preview and adjust properties such as scale, rotation, opacity, font size, and color. The element can then be applied to the current page, every page, or a specific set of pages.

Once processing is complete, the application generates a new PDF for review. Users can preview the result, rename the output file, check its page count and file size, and download it directly from the browser.

The project uses PDF.js for document rendering and PDF-lib for modifying and generating the final PDF.

By the end of this tutorial, you'll understand how to build an interactive PDF editing workflow that combines canvas-based input, image embedding, text placement, coordinate conversion, page selection, and client-side file generation.

What We'll Cover:

What This PDF Signature Tool Can Do
Electronic Signatures vs Digital Signatures
How the Browser-Based Workflow Works
Project Setup
What Libraries Are We Using?
Uploading and Previewing the PDF
Choosing an Element to Add
Creating a Signature
Drawing a Signature
Typing a Signature
Uploading a Signature Image
Adding Text and Preset Stamps
Positioning and Styling the Element
Applying the Element to Selected Pages
Applying and Finalizing the PDF
Generating the Signed PDF
Previewing the Final PDF
Renaming and Downloading the Final PDF
Demo: How the PDF Signature Tool Works
Handling Signature Transparency
Important Notes and Common Mistakes
Conclusion

What This PDF Signature Tool Can Do

The application provides a single editing workflow for adding signatures, text, and common document stamps to PDF pages.

When Signature is selected, users can create the signature in three different ways.

The Draw option provides a canvas where the user can write a signature using a mouse, trackpad, stylus, or touch input.
The Type option converts entered text into a signature-style element. Users can type their name, adjust the size, and choose from the available signature styles.
The Upload option accepts an existing signature image. This is useful for someone who already has a transparent PNG or another supported image of their handwritten signature.

The second element type is Text/Stamp. Users can enter custom text such as:

Signed on: 08-09-2025

They can also quickly choose a predefined stamp:

APPROVED
CONFIDENTIAL
DRAFT
PAID

After an element has been created, the application provides controls for its placement and appearance. Users can move it to the required location and adjust its scale, rotation, opacity, and position.

Text and stamp elements can additionally use configurable font sizes and colors.

The page controls determine where the selected element will be applied. A signature may belong only on the final page of a contract, while a CONFIDENTIAL stamp may need to appear on every page.

The application therefore supports:

Current page only
All pages
Specific pages

The goal is to provide one consistent workflow for several common PDF editing tasks without requiring separate tools for each element type.

Electronic Signatures vs Digital Signatures

Before building the application, it's important to distinguish between an electronic signature and a digital signature.

The tool in this tutorial creates an electronic signature workflow.

A drawn signature, typed signature, or uploaded signature image is placed visually onto the PDF page. This is similar to signing a document by hand and inserting a visible representation of that signature into the file.

For example, a user might draw a signature on a canvas:

const signatureImage =
    signatureCanvas.toDataURL("image/png");

The generated image can then be embedded into the PDF.

A digital signature is technically different.

Certificate-based digital signatures use cryptographic methods to help verify document integrity and the identity associated with a signing certificate. They may involve digital certificates, private keys, signature validation, and trust chains.

Simply placing a handwritten signature image on a PDF doesn't create that type of cryptographic verification.

This distinction matters because the terms are sometimes used interchangeably in everyday conversation even though the underlying technologies are different.

The project we're building focuses on visual electronic signatures and document elements. It doesn't create certificate-based cryptographic digital signatures.

Keeping that distinction clear makes it easier to understand exactly what the application does and what would require a more advanced signing system.

How the Browser-Based Workflow Works

The process begins when a user selects a PDF file.

PDF.js loads the document and renders the current page into a browser canvas. Previous and next buttons allow the user to navigate through the PDF before choosing where to place an element.

The user then selects one of two element types:

Signature
Text/Stamp

If Signature is selected, the application provides three creation methods:

Draw
Type
Upload

The selected signature is converted into an element that can be displayed over the PDF preview.

If Text/Stamp is selected, the application instead creates a text element using either custom content or one of the predefined stamp values.

The complete workflow looks like this:

Upload PDF
    ↓
Render and Navigate Pages
    ↓
Choose Signature or Text/Stamp
    ↓
Create the Element
    ↓
Position and Style It
    ↓
Choose Target Pages
    ↓
Apply & Finalize
    ↓
Generate the New PDF
    ↓
Preview the Result
    ↓
Rename and Download

During editing, the element displayed over the PDF preview is only a browser-side representation. Its position must later be translated into coordinates that match the actual PDF page.

For example, the application may store an element like this:

const element = {
    type: "signature",
    x: 622,
    y: 496,
    scale: 1.14,
    rotation: 0,
    opacity: 1
};

When the user clicks Apply & Finalize, those values are used to calculate the final placement inside the PDF.

This separation between the interactive preview and the final PDF generation is the foundation of the project. It allows users to visually prepare the document first and create the modified PDF only after the placement is ready.

Project Setup

To keep the project easy to understand, we'll use three main files:

pdf-signature-tool/
│
├── index.html
├── style.css
└── script.js

The HTML file contains the upload interface, PDF preview, editing controls, final preview, and download section.

The CSS file handles the layout and visual states.

The JavaScript file manages PDF loading, page rendering, signature creation, text and stamp elements, positioning, final PDF generation, and downloading.

Start with the basic HTML structure:





    

    

    PDF Signature Tool

    





    

        

            PDF Signature Tool

            
                Upload your PDF to add your
                electronic signature.
            

            

                Drag & Drop PDF Here

                Or click to browse file

                

                

            

        

        

            

                

                    

                    

                

                

                    

                    
                        Page 1 of 1

The previewContainer is especially important.

It contains two layers:

PDF Canvas
    +
Interactive Element Layer

The PDF page is rendered onto the canvas, while signatures, text, and stamps are displayed in a separate overlay.

This allows users to move and style an element without modifying the original PDF every time they make a small adjustment.

The overlay should match the dimensions and position of the PDF canvas.

#previewContainer {
    position: relative;
    display: inline-block;
}

#pdfCanvas {
    display: block;
}

#elementLayer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

Individual signature and text elements can later enable their own pointer interactions.

.pdf-element {
    position: absolute;
    cursor: move;
    pointer-events: auto;
    transform-origin: center;
}

This layered structure becomes the foundation of the interactive editor.

What Libraries Are We Using?

This project uses two JavaScript libraries for different parts of the PDF workflow.

PDF.js for Rendering and Previewing

PDF.js is responsible for reading the uploaded document and rendering its pages inside the browser.

A page can be loaded like this:

const page =
    await pdfDocument.getPage(
        currentPage
    );

The page is then rendered to a canvas:

const viewport =
    page.getViewport({
        scale: 1.5
    });

const context =
    pdfCanvas.getContext("2d");

pdfCanvas.width =
    viewport.width;

pdfCanvas.height =
    viewport.height;

await page.render({

    canvasContext: context,

    viewport

}).promise;

PDF.js handles the visual preview.

PDF-lib for Modifying the PDF

PDF-lib is used later when the user clicks Apply & Finalize.

It allows us to load the original PDF bytes and add content to its pages.

For example:

const pdfDoc =
    await PDFLib.PDFDocument.load(
        originalPdfBytes
    );

An uploaded PNG signature can then be embedded:

const signatureImage =
    await pdfDoc.embedPng(
        signatureBytes
    );

Text can also be drawn directly onto a PDF page:

page.drawText(
    "APPROVED",
    {
        x: 100,
        y: 100,
        size: 18
    }
);

The two libraries therefore have separate responsibilities:

PDF.js
→ Load and visually render PDF pages

PDF-lib
→ Modify pages and generate the final PDF

Separating these responsibilities keeps the editor easier to manage.

Include both libraries in the project before script.js.

Configure the PDF.js worker as well:

pdfjsLib.GlobalWorkerOptions.workerSrc =
    "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";

For a production project, pin and test the exact library versions you use rather than automatically loading an unspecified latest release.

Uploading and Previewing the PDF

The first interactive step is accepting the user's PDF.

Get references to the required elements:

const pdfInput =
    document.getElementById(
        "pdfInput"
    );

const selectPdfButton =
    document.getElementById(
        "selectPdfButton"
    );

const dropZone =
    document.getElementById(
        "dropZone"
    );

const uploadSection =
    document.getElementById(
        "uploadSection"
    );

const editorSection =
    document.getElementById(
        "editorSection"
    );

const pdfCanvas =
    document.getElementById(
        "pdfCanvas"
    );

We also need a few variables to store the current document state.

let pdfDocument = null;

let originalPdfBytes = null;

let currentPage = 1;

let totalPages = 0;

Clicking the custom button opens the hidden file input.

selectPdfButton.addEventListener(
    "click",
    () => {

        pdfInput.click();

    }
);

When a file is selected, pass it to the PDF loading function.

pdfInput.addEventListener(
    "change",
    event => {

        const file =
            event.target.files[0];

        if (file) {

            loadPdf(file);

        }

    }
);

Before processing the file, validate its type.

async function loadPdf(file) {

    if (
        file.type !==
        "application/pdf"
    ) {

        alert(
            "Please select a valid PDF file."
        );

        return;

    }

}

Read the file as an ArrayBuffer.

const arrayBuffer =
    await file.arrayBuffer();

Keep a copy of the original bytes because PDF.js and PDF-lib will use the document at different stages.

originalPdfBytes =
    new Uint8Array(
        arrayBuffer
    );

Now load the document with PDF.js.

pdfDocument =
    await pdfjsLib
        .getDocument({
            data:
                originalPdfBytes.slice()
        })
        .promise;

Store the number of pages.

totalPages =
    pdfDocument.numPages;

currentPage = 1;

Switch from the upload interface to the editor.

uploadSection.hidden = true;

editorSection.hidden = false;

Finally, render the first page.

await renderPage(currentPage);

The complete loading function becomes:

async function loadPdf(file) {

    if (
        file.type !==
        "application/pdf"
    ) {

        alert(
            "Please select a valid PDF file."
        );

        return;

    }

    const arrayBuffer =
        await file.arrayBuffer();

    originalPdfBytes =
        new Uint8Array(
            arrayBuffer
        );

    pdfDocument =
        await pdfjsLib
            .getDocument({
                data:
                    originalPdfBytes.slice()
            })
            .promise;

    totalPages =
        pdfDocument.numPages;

    currentPage = 1;

    uploadSection.hidden = true;

    editorSection.hidden = false;

    await renderPage(currentPage);

}

For drag-and-drop support, prevent the browser's default behavior.

dropZone.addEventListener(
    "dragover",
    event => {

        event.preventDefault();

        dropZone.classList.add(
            "drag-active"
        );

    }
);

Remove the active state when the file leaves the drop area.

dropZone.addEventListener(
    "dragleave",
    () => {

        dropZone.classList.remove(
            "drag-active"
        );

    }
);

Handle the dropped file:

dropZone.addEventListener(
    "drop",
    event => {

        event.preventDefault();

        dropZone.classList.remove(
            "drag-active"
        );

        const file =
            event.dataTransfer.files[0];

        if (file) {

            loadPdf(file);

        }

    }
);

Rendering the Current PDF Page

The renderPage() function loads one page from the PDF and displays it on the canvas.

async function renderPage(
    pageNumber
) {

    const page =
        await pdfDocument.getPage(
            pageNumber
        );

    const viewport =
        page.getViewport({
            scale: 1.5
        });

    const context =
        pdfCanvas.getContext("2d");

    pdfCanvas.width =
        viewport.width;

    pdfCanvas.height =
        viewport.height;

    await page.render({

        canvasContext: context,

        viewport

    }).promise;

    updatePageInfo();

}

Because the interactive element layer sits above the canvas, it must use the same dimensions.

const elementLayer =
    document.getElementById(
        "elementLayer"
    );

elementLayer.style.width =
    `${viewport.width}px`;

elementLayer.style.height =
    `${viewport.height}px`;

Add those lines inside renderPage() after setting the canvas dimensions.

The page information can then be updated:

function updatePageInfo() {

    pageInfo.textContent =
        `Page ${currentPage} of ${totalPages}`;

}

At this point, the uploaded PDF page is visible, but users still need a way to move through multi-page documents.

Get the navigation controls:

const previousPage =
    document.getElementById(
        "previousPage"
    );

const nextPage =
    document.getElementById(
        "nextPage"
    );

const pageInfo =
    document.getElementById(
        "pageInfo"
    );

The previous button decreases the page number.

previousPage.addEventListener(
    "click",
    async () => {

        if (currentPage <= 1) {
            return;
        }

        currentPage--;

        await renderPage(
            currentPage
        );

    }
);

The next button moves forward.

nextPage.addEventListener(
    "click",
    async () => {

        if (
            currentPage >=
            totalPages
        ) {
            return;
        }

        currentPage++;

        await renderPage(
            currentPage
        );

    }
);

The boundary checks prevent navigation outside the document.

For a 12-page PDF, the interface may display:

Page 12 of 12

The previous button remains available, while the next action can be disabled because the user is already on the final page.

function updateNavigationState() {

    previousPage.disabled =
        currentPage === 1;

    nextPage.disabled =
        currentPage ===
        totalPages;

}

Call this function whenever a new page is rendered.

function updatePageInfo() {

    pageInfo.textContent =
        `Page ${currentPage} of ${totalPages}`;

    updateNavigationState();

}

The user can now upload a PDF, preview its pages, and navigate to the exact page where a signature, custom text, or document stamp needs to be placed.

Choosing an Element to Add

Once the PDF is loaded and the correct page is visible, the user can choose what type of element to place on the document.

The editor provides two options:

Signature
Text/Stamp

Create the element selector:



    1. Choose Element

    
        
        Signature
    

    
        
        Text/Stamp

Get the controls in JavaScript:

const elementTypeInputs =
    document.querySelectorAll(
        'input[name="elementType"]'
    );

const signatureControls =
    document.getElementById(
        "signatureControls"
    );

const textControls =
    document.getElementById(
        "textControls"
    );

Listen for changes:

elementTypeInputs.forEach(
    input => {

        input.addEventListener(
            "change",
            event => {

                const type =
                    event.target.value;

                if (
                    type ===
                    "signature"
                ) {

                    signatureControls.hidden =
                        false;

                    textControls.hidden =
                        true;

                } else {

                    signatureControls.hidden =
                        true;

                    textControls.hidden =
                        false;

                }

            }
        );

    }
);

This keeps the interface focused. Signature-specific controls appear only when the user is creating a signature, while text and stamp controls appear when that element type is selected.

Creating a Signature

The signature workflow supports three methods:

Draw
Type
Upload

Create the method selector:



    2. Create Signature

Track the currently selected method:

let signatureMethod =
    "draw";

Switch between the three panels:

const signatureTabs =
    document.querySelectorAll(
        ".signature-tabs button"
    );

signatureTabs.forEach(
    button => {

        button.addEventListener(
            "click",
            () => {

                signatureMethod =
                    button.dataset.method;

                showSignatureMethod(
                    signatureMethod
                );

            }
        );

    }
);

The panel switching function can hide the inactive methods:

function showSignatureMethod(
    method
) {

    drawPanel.hidden =
        method !== "draw";

    typePanel.hidden =
        method !== "type";

    uploadPanel.hidden =
        method !== "upload";

}

Each method creates the same type of final element (a signature) but the source of that signature is different.

Drawing a Signature

The Draw option allows users to create a handwritten signature directly in the browser.

Add a canvas to the Draw panel:

Get the drawing context:

const signatureCanvas =
    document.getElementById(
        "signatureCanvas"
    );

const signatureContext =
    signatureCanvas.getContext(
        "2d"
    );

let isDrawing = false;

Begin drawing when the pointer touches the canvas:

signatureCanvas.addEventListener(
    "pointerdown",
    event => {

        isDrawing = true;

        const rect =
            signatureCanvas
                .getBoundingClientRect();

        signatureContext.beginPath();

        signatureContext.moveTo(

            event.clientX -
                rect.left,

            event.clientY -
                rect.top

        );

    }
);

Continue the line while the pointer moves:

signatureCanvas.addEventListener(
    "pointermove",
    event => {

        if (!isDrawing) {
            return;
        }

        const rect =
            signatureCanvas
                .getBoundingClientRect();

        signatureContext.lineTo(

            event.clientX -
                rect.left,

            event.clientY -
                rect.top

        );

        signatureContext.stroke();

    }
);

Stop drawing when the pointer is released:

signatureCanvas.addEventListener(
    "pointerup",
    () => {

        isDrawing = false;

    }
);

signatureCanvas.addEventListener(
    "pointerleave",
    () => {

        isDrawing = false;

    }
);

Set a few drawing properties:

signatureContext.lineWidth = 2;

signatureContext.lineCap =
    "round";

signatureContext.lineJoin =
    "round";

For touch devices, prevent the browser from interpreting drawing gestures as page scrolling:

#signatureCanvas {
    touch-action: none;
    cursor: crosshair;
}

The Clear button resets the drawing canvas:

clearSignature.addEventListener(
    "click",
    () => {

        signatureContext.clearRect(

            0,
            0,

            signatureCanvas.width,
            signatureCanvas.height

        );

    }
);

Once the signature is ready, convert the canvas into a PNG data URL:

const drawnSignature =
    signatureCanvas.toDataURL(
        "image/png"
    );

Because the canvas can preserve transparency, the resulting signature can be placed over the PDF without adding an unwanted rectangular background.

The generated image can now be displayed inside the interactive element layer.

function useDrawnSignature() {

    const image =
        new Image();

    image.src =
        signatureCanvas.toDataURL(
            "image/png"
        );

    image.onload =
        () => {

            createSignatureElement(
                image.src
            );

        };

}

This gives the user a visual signature element that can later be positioned over the PDF page.

Typing a Signature

Not every user has a touchscreen, stylus, or existing signature image.

The Type option allows users to enter their name and choose a signature-style appearance.

Add the input controls:



    

    
        Font Size

Listen for text changes:

typedSignature.addEventListener(
    "input",
    updateTypedSignatures
);

Create several style previews:

const signatureFonts = [

    "cursive",

    "'Brush Script MT', cursive",

    "'Segoe Script', cursive"

];

Render the available options:

function updateTypedSignatures() {

    const value =
        typedSignature.value.trim();

    signatureStyles.innerHTML = "";

    if (!value) {
        return;
    }

    signatureFonts.forEach(
        font => {

            const option =
                document.createElement(
                    "button"
                );

            option.textContent =
                value;

            option.style.fontFamily =
                font;

            option.style.fontSize =
                `${signatureFontSize.value}px`;

            option.addEventListener(
                "click",
                () => {

                    createTypedSignature(
                        value,
                        font
                    );

                }
            );

            signatureStyles.appendChild(
                option
            );

        }
    );

}

A typed signature can be converted to an image using another canvas.

function createTypedSignature(
    text,
    fontFamily
) {

    const canvas =
        document.createElement(
            "canvas"
        );

    const context =
        canvas.getContext("2d");

    const fontSize =
        Number(
            signatureFontSize.value
        );

    context.font =
        `${fontSize}px ${fontFamily}`;

    const width =
        context.measureText(
            text
        ).width;

    canvas.width =
        Math.ceil(width + 40);

    canvas.height =
        Math.ceil(fontSize * 2);

    context.font =
        `${fontSize}px ${fontFamily}`;

    context.textBaseline =
        "middle";

    context.fillText(
        text,
        20,
        canvas.height / 2
    );

    const imageUrl =
        canvas.toDataURL(
            "image/png"
        );

    createSignatureElement(
        imageUrl
    );

}

The typed signature is now treated like the drawn signature: it becomes an image element that can be positioned and later embedded into the PDF.

Uploading a Signature Image

The third option allows users to upload an existing signature image.

Add a file input:



    

    
        No file chosen

Listen for file selection:

signatureUpload.addEventListener(
    "change",
    event => {

        const file =
            event.target.files[0];

        if (!file) {
            return;
        }

        loadSignatureImage(file);

    }
);

Validate the image:

function loadSignatureImage(
    file
) {

    const allowedTypes = [

        "image/png",

        "image/jpeg"

    ];

    if (
        !allowedTypes.includes(
            file.type
        )
    ) {

        alert(
            "Please upload a PNG or JPEG image."
        );

        return;

    }

}

Read the selected image:

const reader =
    new FileReader();

reader.onload =
    event => {

        createSignatureElement(
            event.target.result
        );

};

reader.readAsDataURL(file);

Display the selected filename:

selectedSignatureFile.textContent =
    `Selected: ${file.name}`;

The complete function becomes:

function loadSignatureImage(
    file
) {

    const allowedTypes = [

        "image/png",

        "image/jpeg"

    ];

    if (
        !allowedTypes.includes(
            file.type
        )
    ) {

        alert(
            "Please upload a PNG or JPEG image."
        );

        return;

    }

    selectedSignatureFile.textContent =
        `Selected: ${file.name}`;

    const reader =
        new FileReader();

    reader.onload =
        event => {

            createSignatureElement(
                event.target.result
            );

        };

    reader.readAsDataURL(file);

}

A transparent PNG usually works particularly well because only the signature strokes remain visible over the document.

Creating the Signature Preview Element

All three signature methods eventually call the same function:

createSignatureElement(imageUrl);

This means the rest of the editor doesn't need separate positioning logic for drawn, typed, and uploaded signatures.

Create the preview element:

let activeElement = null;

function createSignatureElement(
    imageUrl
) {

    elementLayer.innerHTML = "";

    const image =
        document.createElement(
            "img"
        );

    image.src =
        imageUrl;

    image.className =
        "pdf-element signature-element";

    image.style.left =
        "100px";

    image.style.top =
        "100px";

    image.style.width =
        "180px";

    elementLayer.appendChild(
        image
    );

    activeElement = {

        type: "signature",

        source: imageUrl,

        element: image,

        x: 100,

        y: 100,

        scale: 1,

        rotation: 0,

        opacity: 1

    };

}

The preview now represents the signature that will eventually be written into the PDF.

The same state object can later be updated when the user changes the signature's position, scale, rotation, or opacity.

Adding Text and Preset Stamps

The second main element type is Text/Stamp.

This mode is useful when a document needs a short label, status, date, or other text rather than a handwritten signature.

Create the controls:



    2. Add Text or Stamp

    

    

        

        

        

        

    

    
        Size

        
    

    
        Color

Custom text can be displayed as the user types:

customText.addEventListener(
    "input",
    () => {

        createTextElement(
            customText.value
        );

    }
);

Preset stamps can update the same text input:

const stampButtons =
    document.querySelectorAll(
        "[data-stamp]"
    );

stampButtons.forEach(
    button => {

        button.addEventListener(
            "click",
            () => {

                const stamp =
                    button.dataset.stamp;

                customText.value =
                    stamp;

                createTextElement(
                    stamp
                );

            }
        );

    }
);

Create the text preview:

function createTextElement(
    text
) {

    if (!text.trim()) {

        elementLayer.innerHTML = "";

        activeElement = null;

        return;

    }

    elementLayer.innerHTML = "";

    const textElement =
        document.createElement(
            "div"
        );

    textElement.className =
        "pdf-element text-element";

    textElement.textContent =
        text;

    textElement.style.left =
        "100px";

    textElement.style.top =
        "100px";

    textElement.style.fontSize =
        `${textSize.value}px`;

    textElement.style.color =
        textColor.value;

    elementLayer.appendChild(
        textElement
    );

    activeElement = {

        type: "text",

        text,

        element:
            textElement,

        x: 100,

        y: 100,

        fontSize:
            Number(
                textSize.value
            ),

        color:
            textColor.value,

        rotation: 0,

        opacity: 1

    };

}

When the size changes, update the current element:

textSize.addEventListener(
    "input",
    () => {

        if (
            activeElement?.type !==
            "text"
        ) {
            return;
        }

        activeElement.fontSize =
            Number(
                textSize.value
            );

        activeElement
            .element
            .style
            .fontSize =
                `${textSize.value}px`;

    }
);

Do the same for the color:

textColor.addEventListener(
    "input",
    () => {

        if (
            activeElement?.type !==
            "text"
        ) {
            return;
        }

        activeElement.color =
            textColor.value;

        activeElement
            .element
            .style
            .color =
                textColor.value;

    }
);

The user can now enter custom content such as:

Signed on: 08-09-2025

or quickly select a predefined document stamp.

At this point, the application can create content using all of the available input methods: a drawn signature, typed signature, uploaded signature image, custom text, or preset document stamp.

Positioning and Styling the Element

After creating a signature, text label, or preset stamp, the next step is positioning it correctly on the PDF page.

The preview element sits inside the elementLayer created earlier. Because this layer matches the PDF canvas dimensions, users can move the element visually before anything is written into the final PDF.

The editor also provides controls for:

Scale
Rotation
Opacity
X position
Y position

The exact controls can vary depending on the active element. For example, scale is particularly useful for signatures, while text size and color are handled by the Text/Stamp controls from the previous section.

Create the placement controls:



    3. Placement & Style

    
        Rotation (°)

        
    

    
        Opacity

        
    

    
        X Position

        
    

    
        Y Position

For signature elements, add a scale control:


    Scale (100%)

Get the controls in JavaScript:

const scaleInput =
    document.getElementById(
        "scaleInput"
    );

const scaleValue =
    document.getElementById(
        "scaleValue"
    );

const rotationInput =
    document.getElementById(
        "rotationInput"
    );

const opacityInput =
    document.getElementById(
        "opacityInput"
    );

const xPosition =
    document.getElementById(
        "xPosition"
    );

const yPosition =
    document.getElementById(
        "yPosition"
    );

We'll use a single function to update the visual transformation.

function updateElementTransform() {

    if (!activeElement) {
        return;
    }

    activeElement.element.style.transform =
        `
            scale(${activeElement.scale})
            rotate(${activeElement.rotation}deg)
        `;

    activeElement.element.style.opacity =
        activeElement.opacity;

}

For text elements, initialize scale as 1 so the same transformation function can still be used.

activeElement = {

    type: "text",

    text,

    element: textElement,

    x: 100,

    y: 100,

    scale: 1,

    rotation: 0,

    opacity: 1

};

Changing the Element Scale

When the user moves the scale slider, convert the percentage into a decimal value.

scaleInput.addEventListener(
    "input",
    () => {

        if (!activeElement) {
            return;
        }

        const percentage =
            Number(
                scaleInput.value
            );

        activeElement.scale =
            percentage / 100;

        scaleValue.textContent =
            `${percentage}%`;

        updateElementTransform();

    }
);

A value of 100% represents the original preview size.

50%  → 0.5
100% → 1
114% → 1.14
200% → 2

This makes it easy to enlarge or reduce an uploaded, drawn, or typed signature without creating a new image.

Rotating the Element

The rotation input stores the angle in degrees.

rotationInput.addEventListener(
    "input",
    () => {

        if (!activeElement) {
            return;
        }

        activeElement.rotation =
            Number(
                rotationInput.value
            );

        updateElementTransform();

    }
);

A rotation of 0 keeps the element horizontal, while positive or negative values rotate it around its center.

Adjusting Opacity

Opacity can be useful for stamps, watermarks, and other document labels.

Convert the percentage slider to a value between 0 and 1.

opacityInput.addEventListener(
    "input",
    () => {

        if (!activeElement) {
            return;
        }

        activeElement.opacity =
            Number(
                opacityInput.value
            ) / 100;

        updateElementTransform();

    }
);

For example:

100% → 1
75%  → 0.75
50%  → 0.5

The same opacity value will later be used when generating the final PDF.

Dragging an Element Across the PDF Preview

Typing X and Y coordinates manually is useful for precise adjustments, but most users will prefer to drag the element directly to the required location.

Track the dragging state:

let isDragging = false;

let dragOffsetX = 0;

let dragOffsetY = 0;

When a signature or text element is created, attach the dragging behavior.

function enableDragging(
    element
) {

    element.addEventListener(
        "pointerdown",
        event => {

            isDragging = true;

            const elementRect =
                element
                    .getBoundingClientRect();

            dragOffsetX =
                event.clientX -
                elementRect.left;

            dragOffsetY =
                event.clientY -
                elementRect.top;

            element.setPointerCapture(
                event.pointerId
            );

        }
    );

}

Call this function when creating an element.

enableDragging(image);

or:

enableDragging(textElement);

Next, listen for pointer movement.

elementLayer.addEventListener(
    "pointermove",
    event => {

        if (
            !isDragging ||
            !activeElement
        ) {
            return;
        }

        const layerRect =
            elementLayer
                .getBoundingClientRect();

        const x =
            event.clientX -
            layerRect.left -
            dragOffsetX;

        const y =
            event.clientY -
            layerRect.top -
            dragOffsetY;

        moveActiveElement(
            x,
            y
        );

    }
);

Create a reusable movement function:

function moveActiveElement(
    x,
    y
) {

    if (!activeElement) {
        return;
    }

    activeElement.x = x;

    activeElement.y = y;

    activeElement.element.style.left =
        `${x}px`;

    activeElement.element.style.top =
        `${y}px`;

    xPosition.value =
        Math.round(x);

    yPosition.value =
        Math.round(y);

}

Stop dragging when the pointer is released.

elementLayer.addEventListener(
    "pointerup",
    () => {

        isDragging = false;

    }
);

elementLayer.addEventListener(
    "pointercancel",
    () => {

        isDragging = false;

    }
);

Now the signature or text element can be moved directly over the document.

For example, an uploaded signature may be positioned near the bottom-right corner of the final page.

Updating the Position Manually

The X and Y fields provide another way to position the element.

Listen for changes to the X coordinate:

xPosition.addEventListener(
    "input",
    () => {

        if (!activeElement) {
            return;
        }

        const x =
            Number(
                xPosition.value
            );

        moveActiveElement(
            x,
            activeElement.y
        );

    }
);

Do the same for Y:

yPosition.addEventListener(
    "input",
    () => {

        if (!activeElement) {
            return;
        }

        const y =
            Number(
                yPosition.value
            );

        moveActiveElement(
            activeElement.x,
            y
        );

    }
);

Dragging and manual coordinate entry remain synchronized. Moving the element updates the fields, while changing the fields moves the preview element.

Keeping the Element Inside the Page

Without boundaries, users could accidentally drag an element completely outside the PDF preview.

We can limit the position before saving it.

function clampPosition(
    x,
    y
) {

    const element =
        activeElement.element;

    const maxX =
        elementLayer.clientWidth -
        element.offsetWidth;

    const maxY =
        elementLayer.clientHeight -
        element.offsetHeight;

    return {

        x:
            Math.max(
                0,
                Math.min(x, maxX)
            ),

        y:
            Math.max(
                0,
                Math.min(y, maxY)
            )

    };

}

Use it inside moveActiveElement():

const position =
    clampPosition(
        x,
        y
    );

activeElement.x =
    position.x;

activeElement.y =
    position.y;

When scale or rotation is applied, the element's transformed visual bounds can extend beyond its original box. A production editor can use getBoundingClientRect() for more precise transformed-boundary calculations.

The basic clamp shown here is sufficient to demonstrate the positioning workflow.

Applying the Element to Selected Pages

After positioning the element, the user decides which PDF pages should receive it.

The interface provides three options:

Current page only
All pages
Specific pages

Create the controls:



    4. Apply to Pages

    
        
        Current page only
    

    
        
        All pages
    

    
        
        Specific pages

Read the selected mode:

function getTargetPages() {

    const mode =
        document.querySelector(
            'input[name="applyMode"]:checked'
        ).value;

    if (
        mode ===
        "current"
    ) {

        return [
            currentPage
        ];

    }

    if (
        mode ===
        "all"
    ) {

        return Array.from(

            {
                length:
                    totalPages
            },

            (_, index) =>
                index + 1

        );

    }

    return parsePageRange(
        specificPages.value
    );

}

Parse custom values such as:

1, 3-5, 10

with:

function parsePageRange(
    value
) {

    const pages =
        new Set();

    value
        .split(",")
        .forEach(part => {

            const item =
                part.trim();

            if (!item) {
                return;
            }

            if (
                item.includes("-")
            ) {

                const [
                    start,
                    end
                ] =
                    item
                        .split("-")
                        .map(Number);

                for (
                    let page = start;
                    page <= end;
                    page++
                ) {

                    if (
                        page >= 1 &&
                        page <= totalPages
                    ) {

                        pages.add(page);

                    }

                }

            } else {

                const page =
                    Number(item);

                if (
                    page >= 1 &&
                    page <= totalPages
                ) {

                    pages.add(page);

                }

            }

        });

    return [...pages];

}

The result becomes:

This allows a signature or stamp to be placed once and then applied to multiple target pages.

Just keep in mind that page dimensions may differ within the same PDF. Applying the same coordinates across pages works best when those pages use a consistent size and layout.

Applying and Finalizing the PDF

Once the element is created, positioned, styled, and assigned to the correct pages, the user can click Apply & Finalize.

Create the action buttons:

Get the buttons:

const applyButton =
    document.getElementById(
        "applyButton"
    );

const startOverButton =
    document.getElementById(
        "startOverButton"
    );

Before generating the final PDF, make sure an element exists.

applyButton.addEventListener(
    "click",
    async () => {

        if (!activeElement) {

            alert(
                "Please add a signature, text, or stamp first."
            );

            return;

        }

        const targetPages =
            getTargetPages();

        if (
            targetPages.length === 0
        ) {

            alert(
                "Please select at least one valid page."
            );

            return;

        }

        await generateFinalPdf(
            targetPages
        );

    }
);

The generateFinalPdf() function will handle the actual PDF modification in the next section.

The Start Over button clears the current document and resets the application.

startOverButton.addEventListener(
    "click",
    resetTool
);

Create the reset function:

function resetTool() {

    pdfDocument = null;

    originalPdfBytes = null;

    currentPage = 1;

    totalPages = 0;

    activeElement = null;

    pdfInput.value = "";

    elementLayer.innerHTML = "";

    editorSection.hidden = true;

    resultSection.hidden = true;

    uploadSection.hidden = false;

}

This returns the application to its original upload state.

The interactive editing stage is now complete. Users can create a signature or text element, position it directly over the PDF, adjust its appearance, choose the target pages, and prepare the document for final processing.

Generating the Signed PDF

The element shown over the browser preview hasn't yet been added to the actual PDF. When users click Apply & Finalize, the application loads the original document with PDF-lib and writes the selected signature, text, or stamp onto the target pages.

Start by loading the original PDF bytes:

async function generateFinalPdf(
    targetPages
) {

    const pdfDoc =
        await PDFLib.PDFDocument.load(
            originalPdfBytes.slice()
        );

    const pages =
        pdfDoc.getPages();

}

Before placing the element, we need to convert its browser coordinates into PDF coordinates.

The preview canvas may be displayed at a different size from the actual PDF page. The coordinate systems also use different Y-axis origins.

For each target page, calculate the scale:

const {
    width: pdfWidth,
    height: pdfHeight
} = page.getSize();

const scaleX =
    pdfWidth /
    pdfCanvas.width;

const scaleY =
    pdfHeight /
    pdfCanvas.height;

Convert the preview position:

const pdfX =
    activeElement.x *
    scaleX;

const pdfY =
    pdfHeight -
    (
        activeElement.y +
        activeElement.element.offsetHeight
    ) * scaleY;

This conversion maps the element from the browser's top-left coordinate system to the PDF page's coordinate system.

Embedding a Signature

Drawn, typed, and uploaded signatures are all represented as images by the time they reach the final processing stage.

Convert the signature data URL into bytes:

async function dataUrlToBytes(
    dataUrl
) {

    const response =
        await fetch(dataUrl);

    return await response.arrayBuffer();

}

Embed the signature image:

const signatureBytes =
    await dataUrlToBytes(
        activeElement.source
    );

const signatureImage =
    await pdfDoc.embedPng(
        signatureBytes
    );

If uploaded JPEG signatures are supported, the application should preserve the original image format and use embedJpg() when appropriate.

Calculate the final dimensions:

const previewWidth =
    activeElement
        .element
        .offsetWidth *
    activeElement.scale;

const previewHeight =
    activeElement
        .element
        .offsetHeight *
    activeElement.scale;

const finalWidth =
    previewWidth *
    scaleX;

const finalHeight =
    previewHeight *
    scaleY;

Then draw the signature:

page.drawImage(
    signatureImage,
    {
        x: pdfX,

        y:
            pdfHeight -
            (
                activeElement.y *
                scaleY
            ) -
            finalHeight,

        width:
            finalWidth,

        height:
            finalHeight,

        rotate:
            PDFLib.degrees(
                activeElement.rotation
            ),

        opacity:
            activeElement.opacity
    }
);

The same processing logic works whether the signature was drawn, typed, or uploaded because all three methods produce an image element before finalization.

Adding Text or a Stamp

Text and preset stamps are written directly onto the PDF page.

First, convert the selected color from hexadecimal to RGB values.

function hexToRgb(
    hex
) {

    const value =
        hex.replace(
            "#",
            ""
        );

    return {

        r:
            parseInt(
                value.substring(0, 2),
                16
            ) / 255,

        g:
            parseInt(
                value.substring(2, 4),
                16
            ) / 255,

        b:
            parseInt(
                value.substring(4, 6),
                16
            ) / 255

    };

}

Apply the text:

const color =
    hexToRgb(
        activeElement.color
    );

page.drawText(
    activeElement.text,
    {
        x:
            activeElement.x *
            scaleX,

        y:
            pdfHeight -
            (
                activeElement.y *
                scaleY
            ) -
            activeElement.fontSize,

        size:
            activeElement.fontSize *
            scaleY,

        color:
            PDFLib.rgb(
                color.r,
                color.g,
                color.b
            ),

        rotate:
            PDFLib.degrees(
                activeElement.rotation
            ),

        opacity:
            activeElement.opacity
    }
);

After processing every target page, save the modified document:

const finalPdfBytes =
    await pdfDoc.save();

const finalPdfBlob =
    new Blob(
        [finalPdfBytes],
        {
            type:
                "application/pdf"
        }
    );

await showFinalPreview(
    finalPdfBlob
);

At this point, the selected signature, text, or stamp has been added to the generated PDF.

Previewing the Final PDF

Before downloading the document, the application displays the completed PDF in a separate preview area.

This allows users to confirm that the element appears on the correct page and in the expected position.

Load the generated file with PDF.js:

let finalPdfDocument = null;

let finalPage = 1;

async function showFinalPreview(
    blob
) {

    const bytes =
        await blob.arrayBuffer();

    finalPdfDocument =
        await pdfjsLib
            .getDocument({
                data: bytes
            })
            .promise;

    finalPage = 1;

    editorSection.hidden =
        true;

    resultSection.hidden =
        false;

    await renderFinalPage(
        finalPage
    );

}

Render the current result page:

async function renderFinalPage(
    pageNumber
) {

    const page =
        await finalPdfDocument
            .getPage(
                pageNumber
            );

    const viewport =
        page.getViewport({
            scale: 1.4
        });

    finalCanvas.width =
        viewport.width;

    finalCanvas.height =
        viewport.height;

    await page.render({

        canvasContext:
            finalCanvas
                .getContext("2d"),

        viewport

    }).promise;

    finalPageInfo.textContent =
        `Page ${pageNumber} of ${finalPdfDocument.numPages}`;

}

Previous and next controls can use the same navigation pattern as the original PDF preview.

Renaming and Downloading the Final PDF

After reviewing the processed document, users can rename the file before downloading it.

For example:

document_signed.pdf

Create the filename input:

Make sure the filename has the correct extension:

function getOutputFilename() {

    let filename =
        outputFilename
            .value
            .trim();

    if (!filename) {

        filename =
            "document_signed.pdf";

    }

    if (
        !filename
            .toLowerCase()
            .endsWith(".pdf")
    ) {

        filename += ".pdf";

    }

    return filename;

}

The result section can also display the total page count and generated file size.

function formatFileSize(
    bytes
) {

    if (
        bytes <
        1024 * 1024
    ) {

        return (
            bytes / 1024
        ).toFixed(2) + " KB";

    }

    return (
        bytes /
        1024 /
        1024
    ).toFixed(2) + " MB";

}

Update the file information:

filePageCount.textContent =
    `Total Pages: ${finalPdfDocument.numPages}`;

fileSize.textContent =
    `File Size: ${
        formatFileSize(
            finalPdfBlob.size
        )
    }`;

Download the file using a temporary object URL:

downloadButton.addEventListener(
    "click",
    () => {

        const url =
            URL.createObjectURL(
                finalPdfBlob
            );

        const link =
            document.createElement(
                "a"
            );

        link.href =
            url;

        link.download =
            getOutputFilename();

        link.click();

        URL.revokeObjectURL(
            url
        );

    }
);

After downloading, the Start Over button resets the application so another PDF can be processed.

Demo: How the PDF Signature Tool Works

Let's walk through the complete workflow from upload to download.

Step 1: Upload the PDF

Users begin by dragging a PDF into the upload area or clicking Select PDF.

The browser reads the document and prepares it for local processing.

Step 2: Preview and Navigate the Document

After upload, the current page appears in the PDF preview.

Previous and next controls allow users to navigate through multi-page documents and find the page where an element needs to be added.

Step 3: Choose What to Add

The user chooses between Signature and Text/Stamp.

This determines which creation controls appear in the editor.

Step 4: Create the Signature

If Signature is selected, users can choose Draw, Type, or Upload.

Drawing works directly inside the signature canvas. The Type option creates a signature-style element from entered text, while Upload accepts an existing signature image.

Step 5: Add Custom Text or a Preset Stamp

Instead of a signature, users can select Text/Stamp.

They can enter custom content or choose a preset such as APPROVED, CONFIDENTIAL, DRAFT, or PAID.

Step 6: Position and Style the Element

The created element appears over the PDF preview.

Users can drag it to the required position and adjust properties such as scale, rotation, opacity, X position, and Y position.

Text elements also support configurable font size and color.

Step 7: Choose the Target Pages

The element can be applied to the current page, every page, or a specific page selection.

For example:

1, 3-5, 10

This is useful when the same stamp or document label needs to appear on several pages.

Step 8: Apply and Finalize

After checking the element and target pages, users click Apply & Finalize.

The browser converts the preview position into PDF coordinates and generates the modified document.

Step 9: Preview the Completed PDF

The generated document appears in a final preview.

Users can navigate through the pages and verify that the signature, text, or stamp appears correctly before downloading.

Step 10: Rename and Download

The final section allows users to change the output filename and review the total number of pages and file size.

Clicking Download saves the generated PDF locally.

Afterward, Start Over clears the session and returns to the upload interface.

Handling Signature Transparency

Uploaded signatures often look best when the background is transparent.

A transparent PNG contains only the visible signature strokes, allowing the original PDF content to remain visible around the signature.

A JPEG image, by comparison, usually includes a solid background. If the image was scanned from white paper, placing it on a colored PDF area may create a visible white rectangle.

For uploaded signatures, transparent PNG files are therefore usually the better option.

The same principle applies to drawn and typed signatures. When converting a canvas to PNG, avoid filling the canvas with a background color unless that background is intentionally required.

const signatureImage =
    signatureCanvas.toDataURL(
        "image/png"
    );

The transparent canvas can then be embedded directly into the PDF.

Important Notes and Common Mistakes

One common mistake is assuming that the browser preview and the actual PDF use identical coordinates.

Always calculate the relationship between the canvas dimensions and the target PDF page before placing the final element.

const scaleX =
    pdfWidth /
    pdfCanvas.width;

const scaleY =
    pdfHeight /
    pdfCanvas.height;

Another issue occurs when the same element is applied to pages with different dimensions. A position that looks correct on an A4 page may not appear in the same visual location on a landscape or differently sized page.

Uploaded signature images should also be validated before processing.

const allowedTypes = [
    "image/png",
    "image/jpeg"
];

if (
    !allowedTypes.includes(
        file.type
    )
) {

    alert(
        "Please upload a PNG or JPEG image."
    );

    return;

}

Very large image files should be resized before embedding to avoid unnecessarily increasing the final PDF size.

Users should also review the completed document before downloading it. Rotation, scaling, or coordinate conversion errors are much easier to identify in the final preview than after the file has already been shared.

Finally, remember that this project adds a visual electronic signature to a PDF. It does not create a certificate-based cryptographic digital signature or provide automatic identity verification.

Conclusion

In this tutorial, you built a browser-based PDF Signature Tool using JavaScript.

You learned how to upload and preview PDF documents, navigate between pages, create signatures by drawing, typing, or uploading an image, add custom text and preset stamps, position elements directly over a PDF preview, adjust their appearance, choose target pages, and generate the completed document with PDF-lib.

You also learned how browser coordinates are converted into PDF coordinates and why signature transparency matters when embedding images into a document.

The final workflow allows users to preview the completed PDF, rename the output file, review its page count and size, and download it directly from the browser.

You can explore the complete workflow using the PDF Signature Tool.

The project can be extended further with multiple elements per page, reusable signature profiles, date fields, initials, custom fonts, signature removal before finalization, or certificate-based digital signing through a dedicated signing infrastructure.

How to Build a Browser-Based PDF Redaction Tool Using JavaScript

Bhavin Sheth — Fri, 17 Jul 2026 20:33:11 +0000

PDF documents are frequently used to share invoices, contracts, reports, legal records, customer documents, financial statements, and internal business files. But before these documents are shared, they may contain information that shouldn't be visible to the recipient.

An invoice might include an account number. A customer document may contain a home address or phone number. A legal file could reveal confidential case information, while an internal report may contain names, references, or business data intended only for employees.

This is where PDF redaction becomes useful.

Redaction allows users to select sensitive areas of a document and permanently cover those areas before creating a new PDF. A practical redaction tool should also support multiple redaction areas, page selection, document preview, and final output verification.

In this tutorial, you'll build a browser-based PDF Redaction Tool using JavaScript. Users will upload a PDF, navigate through its pages, draw redaction boxes directly on the document preview, manage multiple redactions, apply them to selected pages, preview the processed document, rename the final file, and download the redacted PDF.

The entire workflow runs inside the browser. This is particularly useful for privacy-focused document tools because PDF processing can happen locally without requiring a backend server.

By the end of this tutorial, you'll understand not only how to draw redaction areas but also how to translate browser coordinates into PDF coordinates and apply those selections to the actual document.

Redaction Is Not the Same as Drawing a Black Box
How Browser-Based PDF Redaction Works
Understanding PDF and Canvas Coordinates
Project Setup
What Libraries Are We Using?
Creating the PDF Upload Interface
Previewing Uploaded PDF Pages
Drawing Redaction Areas on the PDF
Storing and Managing Redactions
Applying Redactions to Selected Pages
Generating the Redacted PDF
Previewing and Renaming the Final PDF
Downloading the Final PDF
Demo: How the PDF Redaction Tool Works
How to Verify the Redacted PDF
Performance Optimization Tips
Important Notes and Common Mistakes
Conclusion

Redaction Is Not the Same as Drawing a Black Box

A common mistake is assuming that placing a black rectangle over text automatically makes the information secure.

Visually, the document may look redacted. But depending on how the PDF is modified, the original text or image content may still exist underneath the rectangle.

For example, imagine adding a black box as a new annotation layer above an account number. The number is no longer visible on the page, but the underlying PDF content may still be present.

In some poorly redacted documents, users may be able to select, copy, search, or recover the hidden content.

This is why redaction must be treated differently from simple visual decoration.

In our browser-based workflow, the selected areas are applied while generating the processed PDF. The final document should then be reviewed carefully before it's shared.

Never assume that a black rectangle alone guarantees secure removal of underlying PDF content. For high-security or legally sensitive documents, the final file should be validated with a dedicated redaction verification process.

How Browser-Based PDF Redaction Works

The redaction workflow can be divided into a few clear stages.

First, the browser reads the uploaded PDF and renders a page preview. The preview gives users a visual surface where they can identify sensitive information.

Next, users click and drag over the preview to create redaction rectangles.

Each rectangle is stored as a set of coordinates.

const redaction = {
    page: 7,
    x: 420,
    y: 35,
    width: 310,
    height: 220
};

The application can store multiple rectangles for the same page.

redactions.push(redaction);

When users click Apply & Finalize, the application determines which pages should receive the selected redactions.

The redaction coordinates are then converted from preview coordinates to actual PDF page coordinates. Finally, the application modifies the PDF and generates a new document for preview and download.

The overall workflow looks like this:

Upload PDF
    ↓
Render Page Preview
    ↓
Draw Redaction Areas
    ↓
Store Coordinates
    ↓
Select Target Pages
    ↓
Apply Redactions
    ↓
Generate New PDF
    ↓
Preview and Download

Separating the interface from the PDF processing logic makes the application easier to manage and debug.

Understanding PDF and Canvas Coordinates

One of the most important technical parts of this project is coordinate conversion.

The PDF page shown inside the browser is usually scaled to fit the available screen space. A PDF page may have an actual width of 842 points, while the browser preview is displayed at only 600 pixels wide.

This means a rectangle drawn at x = 300 on the preview can't simply be placed at x = 300 in the PDF.

We'll first calculate the scale difference.

const scaleX =
    pdfPageWidth / canvasWidth;

const scaleY =
    pdfPageHeight / canvasHeight;

The selected rectangle can then be converted.

const pdfX =
    redaction.x * scaleX;

const pdfWidth =
    redaction.width * scaleX;

const pdfHeight =
    redaction.height * scaleY;

The Y coordinate requires extra attention because browser canvases and PDF pages commonly use different coordinate origins.

Canvas coordinates generally begin at the top-left corner. PDF coordinates commonly work from the bottom-left.

The Y position can therefore be converted like this:

const pdfY =
    pdfPageHeight -
    ((redaction.y + redaction.height) * scaleY);

This small calculation is critical.

Without correct coordinate conversion, a redaction box drawn over a phone number might appear several centimeters away from that number in the generated PDF.

Accurate coordinate mapping ensures that the redaction users draw in the browser matches the same area in the final document.

Project Setup

We'll keep the project structure simple because the redaction workflow runs entirely inside the browser.

Create a new project folder with three files:

pdf-redaction-tool/
│
├── index.html
├── style.css
└── script.js

The index.html file contains the upload interface, PDF preview, redaction controls, and final download section.

The style.css file handles the page layout and redaction overlay styling.

The script.js file contains the PDF loading, rendering, coordinate tracking, redaction management, and final PDF generation logic.

Start with a basic HTML structure.





    

    

    PDF Redaction Tool

Separating the upload, editor, and result sections makes it easier to show and hide different parts of the interface as users move through the redaction workflow.

What Libraries Are We Using?

We'll use PDF.js and PDF-lib for this project.

PDF.js handles PDF loading and page rendering. It allows us to display an uploaded PDF page inside a canvas so users can visually select the areas they want to redact.

PDF-lib handles the final document modification. After the user creates redaction areas, PDF-lib opens the original PDF, accesses the selected pages, and applies the redaction rectangles before generating a new file.

Add both libraries before your main JavaScript file.

Configure the PDF.js worker.

pdfjsLib.GlobalWorkerOptions.workerSrc =
    "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";

We'll also create a few variables for storing the active document and redaction data.

let pdfDocument = null;

let pdfBytes = null;

let currentPage = 1;

let redactions = {};

Instead of storing every redaction in one flat array, we can organize them by page number.

redactions = {
    1: [],
    2: [],
    7: []
};

This structure makes page navigation and per-page redaction management much easier.

Creating the PDF Upload Interface

The first screen users see is the PDF upload area.

Users can drag a document onto the upload box or click the Select PDF button to open the browser's file picker.

Create the upload interface.



    PDF Redaction Tool

    
        Upload your PDF to permanently black out
        sensitive information.
    

    

        ☁

        Drag & Drop PDF Here

        Or click to browse file

Connect the button to the hidden file input.

const pdfInput =
    document.getElementById("pdfInput");

const selectPdfButton =
    document.getElementById("selectPdfButton");

selectPdfButton.addEventListener("click", () => {

    pdfInput.click();

});

Next, listen for file selection.

pdfInput.addEventListener("change", async event => {

    const file = event.target.files[0];

    if (!file) {
        return;
    }

    await loadPdfFile(file);

});

Before loading the document, validate the selected file.

async function loadPdfFile(file) {

    if (file.type !== "application/pdf") {

        alert("Please select a valid PDF file.");

        return;

    }

    pdfBytes =
        await file.arrayBuffer();

}

We can also support drag-and-drop uploads.

dropZone.addEventListener("dragover", event => {

    event.preventDefault();

    dropZone.classList.add("dragging");

});

dropZone.addEventListener("dragleave", () => {

    dropZone.classList.remove("dragging");

});

dropZone.addEventListener("drop", async event => {

    event.preventDefault();

    dropZone.classList.remove("dragging");

    const file =
        event.dataTransfer.files[0];

    if (file) {

        await loadPdfFile(file);

    }

});

After reading the file, load it with PDF.js.

pdfDocument =
    await pdfjsLib
        .getDocument({
            data: pdfBytes.slice(0)
        })
        .promise;

currentPage = 1;

await renderPage(currentPage);

At this point, the document is ready for preview and redaction.

Previewing Uploaded PDF Pages

Once the PDF has loaded, the application displays the current page inside a canvas.

The canvas serves two purposes. First, it gives users an accurate preview of the document. Second, it becomes the visual surface where redaction rectangles will be drawn.

Create the editor preview.



    

        

            

            

        

        

            

            
                Page 1 of 1

The pdfCanvas displays the PDF page.

The redactionLayer sits above the canvas and contains the selection boxes created by the user.

Render the active page using PDF.js.

async function renderPage(pageNumber) {

    const page =
        await pdfDocument.getPage(pageNumber);

    const viewport =
        page.getViewport({
            scale: 1.4
        });

    const canvas =
        document.getElementById("pdfCanvas");

    const context =
        canvas.getContext("2d");

    canvas.width =
        viewport.width;

    canvas.height =
        viewport.height;

    await page.render({

        canvasContext: context,

        viewport: viewport

    }).promise;

    updatePageInformation();

    renderSavedRedactions();

}

Update the page navigation information.

function updatePageInformation() {

    document
        .getElementById("pageInfo")
        .textContent =
        `Page ${currentPage} of ${pdfDocument.numPages}`;

}

Users can move to the previous page.

previousPage.addEventListener("click", async () => {

    if (currentPage <= 1) {
        return;
    }

    currentPage--;

    await renderPage(currentPage);

});

The next-page button works in the same way.

nextPage.addEventListener("click", async () => {

    if (
        currentPage >= pdfDocument.numPages
    ) {
        return;
    }

    currentPage++;

    await renderPage(currentPage);

});

Whenever users change pages, the canvas renders the selected PDF page and restores any redaction boxes already saved for that page.

This is important because redactions are page-specific. A rectangle created on page 7 should not automatically appear on page 8 unless the user later chooses to apply that selection to multiple pages.

The PDF is now loaded, rendered, and ready for user interaction.

Drawing Redaction Areas on the PDF

Now that the PDF page is visible, users need a simple way to mark the information they want to hide.

In this project, users can click and drag directly over the page preview to create a redaction rectangle. The interaction is similar to selecting an area in an image editor.

We'll first track the starting position of the pointer.

let isDrawing = false;

let startX = 0;
let startY = 0;

let activeBox = null;

Listen for the pointer-down event on the redaction layer.

redactionLayer.addEventListener(
    "pointerdown",
    event => {

        isDrawing = true;

        const bounds =
            redactionLayer.getBoundingClientRect();

        startX =
            event.clientX - bounds.left;

        startY =
            event.clientY - bounds.top;

        activeBox =
            document.createElement("div");

        activeBox.className =
            "redaction-box";

        activeBox.style.left =
            `${startX}px`;

        activeBox.style.top =
            `${startY}px`;

        redactionLayer.appendChild(activeBox);

    }
);

As the pointer moves, update the rectangle dimensions.

redactionLayer.addEventListener(
    "pointermove",
    event => {

        if (!isDrawing) {
            return;
        }

        const bounds =
            redactionLayer.getBoundingClientRect();

        const currentX =
            event.clientX - bounds.left;

        const currentY =
            event.clientY - bounds.top;

        const width =
            Math.abs(currentX - startX);

        const height =
            Math.abs(currentY - startY);

        activeBox.style.width =
            `${width}px`;

        activeBox.style.height =
            `${height}px`;

        activeBox.style.left =
            `${Math.min(startX, currentX)}px`;

        activeBox.style.top =
            `${Math.min(startY, currentY)}px`;

    }
);

The Math.min() calls are important because users may drag in any direction. They can begin at the top-left and move down, or start at the bottom-right and drag upward.

When the pointer is released, save the completed rectangle.

redactionLayer.addEventListener(
    "pointerup",
    () => {

        if (!isDrawing) {
            return;
        }

        isDrawing = false;

        saveRedaction(activeBox);

        activeBox = null;

    }
);

The redaction area can be styled as a semi-transparent black rectangle during editing.

.redaction-box {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    border: 1px dashed #ffffff;
    cursor: move;
}

Using a transparent preview helps users see which content is currently covered while still recognizing the surrounding page.

Storing and Managing Redactions

Drawing a rectangle visually is only the first step. The application also needs to remember its position and dimensions.

When a redaction box is completed, read its current coordinates.

function saveRedaction(box) {

    const redaction = {

        x: parseFloat(box.style.left),

        y: parseFloat(box.style.top),

        width: box.offsetWidth,

        height: box.offsetHeight

    };

    if (!redactions[currentPage]) {

        redactions[currentPage] = [];

    }

    redactions[currentPage].push(redaction);

    renderSavedRedactions();

    updateRedactionList();

}

Because redactions are stored by page, users can navigate through the document without losing their selections.

For example:

redactions = {

    7: [
        {
            x: 420,
            y: 35,
            width: 310,
            height: 220
        },

        {
            x: 160,
            y: 320,
            width: 150,
            height: 140
        }
    ]

};

Page 7 now contains two redaction areas.

The interface can display them as Redaction #1 and Redaction #2.

function updateRedactionList() {

    const list =
        document.getElementById(
            "redactionList"
        );

    list.innerHTML = "";

    const pageRedactions =
        redactions[currentPage] || [];

    pageRedactions.forEach(
        (redaction, index) => {

            const item =
                document.createElement("div");

            item.textContent =
                `Redaction #${index + 1}`;

            list.appendChild(item);

        }
    );

}

This list gives users a clear overview of the areas selected on the current page.

Removing One Redaction

Users may accidentally cover the wrong section of a document. They shouldn't have to clear every selection and begin again.

Add a remove button to each redaction item.

const removeButton =
    document.createElement("button");

removeButton.textContent = "×";

removeButton.addEventListener(
    "click",
    () => {

        removeRedaction(index);

    }
);

item.appendChild(removeButton);

Remove only the selected rectangle.

function removeRedaction(index) {

    redactions[currentPage]
        .splice(index, 1);

    renderSavedRedactions();

    updateRedactionList();

}

The remaining redactions stay unchanged.

Clearing All Redactions from the Current Page

The Clear All on This Page button removes every selection from the active page.

clearPageButton.addEventListener(
    "click",
    () => {

        redactions[currentPage] = [];

        renderSavedRedactions();

        updateRedactionList();

    }
);

Notice that this doesn't remove redactions created on other pages.

If page 7 is cleared, selections saved on pages 2 or 5 remain available.

Applying Redactions to Selected Pages

A redaction tool needs to handle more than a single page.

Sometimes the sensitive information appears only once. In other documents, the same information may repeat across several pages.

For example, a confidential reference number may appear in the header of every page. Manually drawing the same rectangle 50 times would be inefficient.

Our interface provides three page selection modes:

Current page only applies the redaction to the active page.
All pages copies the current page's redaction positions across the complete document.
Specific pages applies the selections only to page numbers or ranges entered by the user.

Create the page selection controls.

3. Apply to Pages


    
    Current page only



    
    All pages



    
    Specific pages

Read the selected mode.

const applyMode =
    document.querySelector(
        'input[name="applyMode"]:checked'
    ).value;

For the current page, only one page number is required.

if (applyMode === "current") {

    targetPages = [currentPage];

}

For all pages, generate the complete page list.

if (applyMode === "all") {

    targetPages =
        Array.from(
            {
                length:
                    pdfDocument.numPages
            },
            (_, index) => index + 1
        );

}

Specific page ranges require a small parser.

function parsePageRange(value) {

    const pages = new Set();

    value.split(",").forEach(part => {

        const range =
            part.trim().split("-");

        if (range.length === 2) {

            const start =
                Number(range[0]);

            const end =
                Number(range[1]);

            for (
                let page = start;
                page <= end;
                page++
            ) {

                pages.add(page);

            }

        } else {

            pages.add(Number(range[0]));

        }

    });

    return [...pages];

}

The value:

1, 3-5, 10

becomes:

[1, 3, 4, 5, 10]

Before processing, remove invalid page numbers.

targetPages =
    targetPages.filter(page =>

        page >= 1 &&

        page <= pdfDocument.numPages

    );

This page selection feature is particularly useful for repeated headers, footers, document IDs, or other information positioned consistently across several pages.

Applying and Finalizing the Redactions

After users have created their redaction areas and selected the target pages, they can click Apply & Finalize.

Create the action controls.

Connect the finalize button to the processing function.

applyButton.addEventListener(
    "click",
    async () => {

        const pageRedactions =
            redactions[currentPage] || [];

        if (pageRedactions.length === 0) {

            alert(
                "Please add at least one redaction."
            );

            return;

        }

        await generateRedactedPdf();

    }
);

The Start Over button clears the current document and returns users to the upload interface.

startOverButton.addEventListener(
    "click",
    () => {

        pdfDocument = null;

        pdfBytes = null;

        currentPage = 1;

        redactions = {};

        pdfInput.value = "";

        location.reload();

    }
);

In a production application, you can reset individual interface sections instead of reloading the complete page.

At this stage, users can draw several redaction boxes, remove individual selections, clear all redactions from the active page, and choose exactly which pages should receive the selected redaction areas.

Generating the Redacted PDF

The redaction boxes currently exist only in the browser preview. To create the final document, we need to apply those positions to the actual PDF pages.

Load the original PDF using PDF-lib.

async function generateRedactedPdf() {

    const pdfDoc =
        await PDFLib.PDFDocument.load(
            pdfBytes.slice(0)
        );

    const pages =
        pdfDoc.getPages();

    const sourceRedactions =
        redactions[currentPage] || [];

    const targetPages =
        getTargetPages();

}

Next, loop through the selected pages.

targetPages.forEach(pageNumber => {

    const page =
        pages[pageNumber - 1];

    applyPageRedactions(
        page,
        sourceRedactions
    );

});

The browser preview and PDF page may have different dimensions, so each rectangle must be scaled before it's applied.

function applyPageRedactions(
    page,
    pageRedactions
) {

    const {
        width: pdfWidth,
        height: pdfHeight
    } = page.getSize();

    const canvas =
        document.getElementById(
            "pdfCanvas"
        );

    const scaleX =
        pdfWidth / canvas.width;

    const scaleY =
        pdfHeight / canvas.height;

    pageRedactions.forEach(
        redaction => {

            const x =
                redaction.x * scaleX;

            const width =
                redaction.width * scaleX;

            const height =
                redaction.height * scaleY;

            const y =
                pdfHeight -
                (
                    redaction.y +
                    redaction.height
                ) * scaleY;

            page.drawRectangle({

                x,
                y,
                width,
                height,

                color:
                    PDFLib.rgb(0, 0, 0)

            });

        }
    );

}

Here, the black rectangles are written into the generated PDF page content rather than remaining browser-only preview elements.

Finally, save the processed document.

const outputBytes =
    await pdfDoc.save();

const outputBlob =
    new Blob(
        [outputBytes],
        {
            type: "application/pdf"
        }
    );

showFinalPreview(outputBlob);

This distinction is important because the visual result alone should never be used as proof that hidden content has been securely removed.

Previewing and Renaming the Final PDF

Before downloading the document, users should be able to review the processed pages.

The final preview helps confirm that each selected area appears in the expected position.

Create a new PDF.js document from the processed file.

async function showFinalPreview(blob) {

    const bytes =
        await blob.arrayBuffer();

    const finalPdf =
        await pdfjsLib
            .getDocument({
                data: bytes
            })
            .promise;

    renderFinalPage(
        finalPdf,
        1
    );

}

The preview can use the same page navigation approach we used earlier.

let finalPage = 1;

nextFinalPage.addEventListener(
    "click",
    async () => {

        if (
            finalPage >=
            finalPdf.numPages
        ) {
            return;
        }

        finalPage++;

        await renderFinalPage(
            finalPdf,
            finalPage
        );

    }
);

Users can move through the generated PDF and visually check the applied areas before saving the file.

The tool also allows users to change the output filename.

For example, the automatically generated name might be:

combined-images (12)_redacted.pdf

Create an editable filename input.

Before downloading, make sure the filename ends with .pdf.

function getOutputFilename() {

    let filename =
        outputFilename.value.trim();

    if (
        !filename
            .toLowerCase()
            .endsWith(".pdf")
    ) {

        filename += ".pdf";

    }

    return filename;

}

Allowing the filename to be changed is useful when users process several versions of the same document.

Downloading the Final PDF

The final result section displays basic information about the processed document.

In this project, users can see the filename, total number of pages, and final file size before downloading.

Calculate the file size in megabytes.

function formatFileSize(bytes) {

    return (
        bytes / 1024 / 1024
    ).toFixed(2) + " MB";

}

Update the result information.

filePageCount.textContent =
    `Total Pages: ${pdfDocument.numPages}`;

fileSize.textContent =
    `File Size: ${
        formatFileSize(
            outputBlob.size
        )
    }`;

To download the document, create a temporary object URL.

downloadButton.addEventListener(
    "click",
    () => {

        const url =
            URL.createObjectURL(
                outputBlob
            );

        const link =
            document.createElement("a");

        link.href = url;

        link.download =
            getOutputFilename();

        link.click();

        URL.revokeObjectURL(url);

    }
);

The browser downloads the generated PDF using the filename selected by the user.

.After downloading, users can click Start Over to clear the existing document and process another PDF.

function resetTool() {

    pdfDocument = null;

    pdfBytes = null;

    redactions = {};

    currentPage = 1;

    pdfInput.value = "";

    showUploadSection();

}

The complete processing workflow is now connected: users can mark areas on a page, apply those selections, preview the result, rename the generated file, review its details, and download the processed PDF.

Demo: How the PDF Redaction Tool Works

Now that the complete redaction workflow is connected, let's walk through the application from upload to download.

Step 1: Upload the PDF Document

Users begin by uploading a PDF through the drag-and-drop area or by clicking the Select PDF button.

The browser validates the file, reads the document into memory, and prepares it for local processing. No backend server is required for this workflow.

Step 2: Preview and Navigate the PDF

After the file loads, the current PDF page appears inside the preview area.

Page navigation controls allow users to move backward and forward through the document. The current page number and total page count are displayed below the preview.

Users can review the document first and navigate to the page containing the information they want to cover.

Step 3: Configure the Redaction

The redaction settings appear beside the PDF preview.

Users draw a rectangle directly over the document by clicking and dragging across the sensitive area. The selected region appears as a dark overlay, making the chosen position easy to verify.

The page application controls also let users choose whether the same redaction position should be applied to the current page, all pages, or specific page numbers.

This is helpful when the same field appears in a consistent position across several pages.

Step 4: Manage Multiple Redaction Areas

A single page may contain several areas that need to be covered.

For example, users may select a name near the top of the page and another piece of information farther down the document.

Each selection appears separately as Redaction #1, Redaction #2, and so on.

Individual remove controls allow users to delete one selection without affecting the others. The Clear All on This Page option removes every redaction area from the active page.

This gives users a chance to correct selections before processing the PDF.

Step 5: Apply and Finalize the PDF

Once the redaction areas and target pages are ready, users click Apply & Finalize.

The application converts the browser selection coordinates into PDF page coordinates and applies the opaque areas to the selected pages while generating the processed document.

If the wrong PDF was uploaded or users want to begin again, the Start Over button resets the current workflow.

Step 6: Preview the Processed PDF

After processing finishes, the generated PDF appears in a new preview section.

Users can navigate through the document and visually confirm that the selected areas are covered in the expected locations.

This review stage is important. A small coordinate or page-selection mistake could leave information visible on another page.

Step 7: Rename the PDF

Before downloading, users can edit the generated filename.

The application may automatically add _redacted to the original filename, but users can replace it with a name that better matches their document workflow.

For example:

customer-record_redacted.pdf

or:

public-report-copy.pdf

Step 8: Review File Details and Download

The final section displays the output filename, number of pages, and generated file size.

After reviewing these details, users click Download to save the PDF locally.

The browser creates the download directly from the processed document data.

Step 9: Start Over with Another PDF

After downloading the file, users can click Start Over.

The application clears the current PDF, page preview, stored coordinates, and generated result before returning to the upload interface.

Users can then process another document without manually refreshing the browser.

How to Verify the Redacted PDF

A document that looks correct in the preview should still be checked before it's shared.

First, navigate through every affected page and confirm that each intended area is fully covered. Pay particular attention to redactions applied across multiple pages because page layouts may not always be identical.

The application can perform a simple check to confirm that redaction areas exist before finalization.

const totalRedactions =
    Object.values(redactions)
        .reduce(
            (total, items) =>
                total + items.length,
            0
        );

if (totalRedactions === 0) {

    alert(
        "No redaction areas were added."
    );

    return;

}

You should also verify that every selected target page exists.

const validPages =
    targetPages.every(page =>

        page >= 1 &&

        page <= pdfDocument.numPages

    );

For visual masking workflows like the rectangle-based implementation shown here, remember that an opaque rectangle does not by itself prove that the underlying PDF content has been securely removed.

If the document contains legally protected, highly confidential, or compliance-sensitive information, use a standards-based redaction and sanitization process that removes the underlying content objects, then test the result for text selection, searchability, annotations, metadata, and other recoverable content before sharing it.

That verification distinction is especially important in a redaction project.

Performance Optimization Tips

PDF redaction itself may appear simple, but page rendering and document generation can consume noticeable browser memory when working with large files.

Avoid rendering every PDF page at full resolution simultaneously. Render the active page when users navigate to it.

await renderPage(currentPage);

Store redaction coordinates as small JavaScript objects rather than saving complete canvas images.

redactions[currentPage].push({

    x,
    y,
    width,
    height

});

When generating the output, modify only the required pages.

for (
    const pageNumber of targetPages
) {

    const page =
        pages[pageNumber - 1];

    applyPageRedactions(
        page,
        sourceRedactions
    );

}

Temporary object URLs should also be released after use.

URL.revokeObjectURL(url);

These choices keep the interface responsive and reduce unnecessary memory use, particularly when processing long reports or multi-page business documents.

Important Notes and Common Mistakes

The most common mistake in a redaction interface is incorrect coordinate conversion.

The canvas preview and actual PDF page may have different dimensions. Applying browser coordinates directly to the PDF can move the rectangle away from the intended content.

Always calculate the scale values first.

const scaleX =
    pdfWidth / canvas.width;

const scaleY =
    pdfHeight / canvas.height;

Another mistake is forgetting that PDF and canvas Y coordinates may use different origins.

const pdfY =
    pdfHeight -
    (
        redaction.y +
        redaction.height
    ) * scaleY;

Users should also be careful when applying one selection to all pages. A header may appear in the same position throughout a document, but other page layouts can change. Always preview the processed result.

Validate custom page ranges before processing.

targetPages =
    targetPages.filter(page =>

        Number.isInteger(page) &&

        page >= 1 &&

        page <= pdfDocument.numPages

    );

Finally, don't describe a visually covered area as securely removed unless the implementation actually removes the underlying text, image, annotation, and related content from the PDF structure.

For a simple browser project, opaque masking demonstrates coordinate mapping and PDF modification well. A production redaction system handling sensitive information requires stronger content-removal and output-sanitization logic.

Conclusion

In this tutorial, you built a browser-based PDF redaction interface using JavaScript.

You learned how to upload a PDF, render document pages with PDF.js, navigate between pages, draw redaction areas, store rectangle coordinates, manage multiple selections, choose target pages, convert canvas coordinates into PDF coordinates, generate a processed PDF, preview the result, rename the output file, and download it locally.

You also saw an important security distinction: visually covering content with an opaque rectangle is not automatically the same as permanently removing the underlying PDF content. That difference matters when moving from a learning project to a production-grade redaction system.

You can explore the browser-based workflow with the PDF Redaction Tool.

Once you understand the coordinate and page-processing workflow, you can extend the project with searchable-text detection, automatic pattern identification, annotation cleanup, metadata sanitization, redaction verification, or a true content-removal pipeline.

The same coordinate-mapping concepts can also be reused when building PDF annotation, signature, highlighting, cropping, and document review tools.

How to Build a Browser-Based PDF Image Extractor Using JavaScript

Bhavin Sheth — Mon, 13 Jul 2026 14:12:57 +0000

PDF files are widely used for sharing documents because they preserve formatting across different devices. Many PDFs contain valuable images such as logos, product photos, charts, diagrams, illustrations, and marketing graphics.

While these images are easy to view, extracting them individually isn't always simple. Many users rely on screenshots or manual cropping, which can reduce image quality and take unnecessary time.

In this tutorial, you'll build a browser-based PDF Image Extractor using JavaScript. The application lets users upload a PDF, preview its pages, extract embedded images, organize them by page, and download individual images or all extracted images at once.

Everything runs directly inside the browser, so uploaded documents never leave the user's device. This makes the tool fast, private, and easy to use without requiring a backend server.

By the end of this tutorial, you'll have a fully functional PDF Image Extractor capable of recovering embedded images while preserving their original quality.

Why Extract Images from PDFs?
How Images Are Stored Inside PDF Files
Understanding Embedded Images vs Rendered Pages
Project Setup
What Libraries Are We Using?
Creating the Upload Interface
Previewing Uploaded PDF Pages
Finding Embedded Images
Extracting Images from PDF Pages
Displaying Extracted Images
Downloading Individual Images
Downloading All Images from the PDF
Demo: How the PDF Image Extractor Works
Performance Optimization Tips
Important Notes from Real-World Use
Common Mistakes to Avoid
Conclusion

Why Extract Images from PDFs?

Although PDF documents are primarily designed for sharing text-based information, they often contain valuable visual assets. Product catalogs include product photographs, annual reports contain charts and graphs, presentations use icons and illustrations, brochures showcase marketing banners, and technical manuals include diagrams and engineering drawings.

Without a dedicated image extraction tool, users often take screenshots or manually crop pages to save these visuals. Unfortunately, screenshots usually reduce image quality, introduce unwanted page elements, and require significant manual effort when working with large documents.

A PDF Image Extractor automates this process by identifying every embedded image inside the document and separating it from the surrounding page content. Instead of copying an entire page, users receive individual image files that can be downloaded and reused immediately.

This capability is extremely useful across many industries.

Graphic designers frequently receive client brochures, advertisements, and presentation files that contain logos, icons, or promotional graphics. Instead of recreating those assets manually, they can extract the original images directly from the PDF and continue working with high-quality source files.

Marketing teams often work with catalogs, product flyers, promotional leaflets, and campaign reports. Extracting product photographs or promotional graphics saves considerable time when creating social media posts, advertisements, landing pages, or newsletters.

Publishers and content creators regularly receive PDF magazines, ebooks, newsletters, and educational material containing illustrations and infographics. Individual images can be extracted and reused without manually cropping every page.

Researchers frequently download scientific papers containing graphs, charts, microscopy images, satellite photographs, and experimental diagrams. Image extraction allows them to save those visuals separately for presentations, publications, or further analysis.

Educational institutions use image extraction when preparing teaching material. Teachers can reuse diagrams, mathematical figures, scientific illustrations, historical maps, or educational graphics from reference documents without recreating them from scratch.

Government departments often maintain scanned archives containing seals, stamps, signatures, photographs, maps, engineering plans, and official diagrams. Extracting these images individually simplifies document digitization and archival workflows.

E-commerce businesses can also benefit significantly from image extraction. For example, a seller may receive a supplier catalog in PDF format containing hundreds of product photographs. Instead of requesting every image separately, the seller can extract all embedded product images from the catalog within minutes and reuse them while preparing listings for platforms such as Amazon, Flipkart, Meesho, Shopify, or WooCommerce.

Businesses working with invoices and purchase documents can also recover company logos, QR codes, signatures, and barcode images for document verification or automation systems.

Because this application performs every operation locally inside the browser, sensitive business documents remain private while users quickly recover all embedded images from their PDFs.

How Images Are Stored Inside PDF Files

Many people assume that a PDF page is simply a picture of the document. In reality, PDF files are much more sophisticated.

Each page inside a PDF is built from multiple independent objects. Text is stored separately using fonts and character information. Lines and shapes are represented as vector drawing instructions. Images are embedded as independent image objects that are placed at specific positions on the page.

This separation is one of the reasons PDFs remain flexible and efficient. A document may contain dozens of pages while reusing the same company logo or icon multiple times without storing duplicate copies.

When an image is embedded inside a PDF, the file usually preserves information such as the image dimensions, color space, compression method, and image format. Depending on how the document was created, embedded images may use formats such as JPEG, PNG, JPEG2000, CCITT, or other PDF-supported image encodings.

A PDF Image Extractor scans the internal structure of the document to locate these embedded image objects. Instead of capturing the entire page as a screenshot, it retrieves each image individually whenever possible.

This approach preserves much higher quality because the original embedded image is recovered rather than recreating it from the rendered page.

Understanding how PDF files store images also explains why some documents contain dozens of extractable images while others contain none at all. If a PDF consists entirely of vector graphics or text, there may be no embedded raster images available for extraction.

Knowing the difference between these document structures helps developers build more accurate PDF processing tools while helping users understand the capabilities and limitations of image extraction.

Understanding Embedded Images vs Rendered Pages

One of the most common misconceptions about PDF image extraction is that every visible picture on a page can always be extracted as a separate image.

In reality, there is an important difference between embedded images and rendered page images.

An embedded image is an independent object stored inside the PDF document. These images usually retain their original quality and can often be extracted without any loss of resolution.

A rendered page, on the other hand, is simply a visual representation of everything that appears on the page. When PDF.js displays a page inside the browser, it combines text, vector graphics, images, backgrounds, and shapes into a single canvas. Although this rendered page looks identical to the original document, it's no longer separated into individual components.

For example, imagine a product catalog containing a company logo, five product photographs, several icons, and descriptive text.

The PDF page preview displays everything together as one complete page. However, the PDF Image Extractor scans the document internally and identifies the individual logo, each product photograph, and every embedded icon separately. This allows users to download each image individually instead of cropping screenshots from the page preview.

Another important point is that not every visible graphic is actually an image.

Some company logos are created entirely using vector drawing commands. Charts may also be generated using vector graphics rather than bitmap images. Since these objects are not stored as raster images, they can't always be extracted using an image extraction tool.

Understanding this distinction helps explain why image extraction results may differ between documents even when they appear visually similar.

For developers, learning how embedded resources differ from rendered pages provides a much deeper understanding of PDF internals and browser-based document processing.

Project Setup

We'll build the PDF Image Extractor using standard web technologies so that the entire application runs directly inside the browser without requiring a backend server.

The project consists of a simple HTML file for the interface, a CSS file for styling, and a JavaScript file that handles PDF loading, page rendering, image extraction, and downloading.

Create the following project structure:

pdf-image-extractor/

│── index.html

│── style.css

│── script.js

│── assets/

After creating the project, include the required JavaScript libraries inside your index.html file:

Once these files are ready, the browser will have everything required to read PDF files, render document pages, inspect PDF objects, locate embedded images, and generate downloadable image files.

Keeping the project lightweight also makes it easier to understand each stage of the image extraction workflow.

What Libraries Are We Using?

Extracting images from PDF documents requires more than simply displaying PDF pages inside the browser. The application needs to load the document, inspect its internal structure, render preview pages, and recover embedded image objects.

To accomplish this, we'll use two JavaScript libraries.

The first library is PDF.js.

PDF.js is Mozilla's open-source PDF rendering engine. It allows browsers to load PDF documents without additional plugins and provides APIs for reading document pages, rendering previews, accessing page objects, and inspecting document resources.

In this project, PDF.js is responsible for loading the uploaded PDF and generating the page preview shown to the user before image extraction begins.

The second library is PDF-lib.

PDF-lib provides low-level access to PDF objects and document resources. Although it's widely used for editing PDF files, it's also useful when working with embedded objects and document manipulation. It complements PDF.js by giving developers additional flexibility when extending the application with future PDF editing features.

Together, these libraries allow us to create a browser-based image extraction workflow that is fast, secure, and completely client-side.

The following code initializes PDF.js:

pdfjsLib.GlobalWorkerOptions.workerSrc =

"https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.4.168/pdf.worker.min.js";

Loading the worker separately keeps PDF rendering responsive while large documents are processed.

Creating the Upload Interface

Every document processing application begins with uploading a file.

The upload interface is responsible for accepting PDF documents, validating the selected file, and preparing it for processing. A clean upload experience is important because it becomes the entry point for the entire application.

In this project, users can either drag a PDF onto the upload area or browse for a document using the standard file picker.

Once the file has been selected, the browser immediately verifies that it's a valid PDF before attempting to load it.

Supporting both drag-and-drop uploads and manual file selection provides a familiar experience across desktop and mobile devices.

The upload section also displays clear instructions so first-time users understand exactly how to begin extracting images.

Create the upload area using the following HTML:



    

        ☁

    

    Drag & Drop PDF Here

    Or click to browse file

Next, validate the uploaded document:

const file = pdfFile.files[0];

if(!file){

    return;

}

if(file.type !== "application/pdf"){

    alert("Please upload a valid PDF.");

    return;

}

After validation succeeds, the browser reads the uploaded file:

const buffer =

await file.arrayBuffer();

loadPDF(buffer);

At this point, the PDF has been loaded into memory and is ready for preview generation.

Previewing Uploaded PDF Pages

Before extracting images, users should first verify that they uploaded the correct document.

Instead of immediately scanning the PDF, the application generates thumbnail previews for every page. These previews help users confirm page order, inspect the document contents, and estimate where embedded images are located.

Preview generation is particularly useful for large reports, product catalogs, presentations, magazines, brochures, ebooks, and technical documentation containing dozens of pages.

Each preview is rendered using PDF.js and displayed inside a responsive grid layout.

First, load the uploaded document:

const pdf = await pdfjsLib

.getDocument({

    data:buffer

})

.promise;

Next, loop through every page:

for(

let pageNumber = 1;

pageNumber <= pdf.numPages;

pageNumber++

){

    renderPage(pageNumber);

}

Render the page as a canvas:

const page =

await pdf.getPage(pageNumber);

const viewport =

page.getViewport({

    scale:0.35

});

const canvas =

document.createElement("canvas");

canvas.width = viewport.width;

canvas.height = viewport.height;

await page.render({

    canvasContext:

    canvas.getContext("2d"),

    viewport

}).promise;

Finally, add the preview to the page:

previewContainer

.appendChild(canvas);

Once rendering is complete, every page becomes visible inside the preview area.

Users can scroll through the thumbnails and verify that the correct document has been uploaded before starting the extraction process.

Although the preview displays complete page images, no extraction has occurred yet. The next stage scans the internal PDF structure to locate every embedded image separately.

Why Previewing the PDF Matters

Previewing the uploaded document may seem like a small feature, but it greatly improves the overall user experience.

Without a preview, users have no way to verify that they selected the correct file before extraction begins. This becomes especially important when working with multiple PDFs that have similar filenames.

Page previews also help users estimate where images appear throughout the document. For example, a product catalog may contain photographs only on certain pages, while a technical report might include diagrams only within specific chapters.

By reviewing the page thumbnails first, users gain confidence that the document is correct before the application begins scanning for embedded images.

This simple verification step reduces mistakes, avoids unnecessary processing, and makes the overall workflow feel much more intuitive.

Finding Embedded Images

Once the PDF pages have been rendered and displayed in the preview section, the application is ready to search for embedded images.

This stage is different from generating page previews. The preview simply renders each page as a complete visual image, while the extraction process examines the internal structure of the PDF to locate every embedded image object stored inside the document.

Each page is scanned individually. If embedded images are found, the application records their location, dimensions, image format, and page number before preparing them for extraction.

This page-by-page approach makes it easier to organize the extracted images later and allows users to understand exactly where each image originated within the document.

Scanning only begins after users click the Extract Images button, ensuring that unnecessary processing is avoided if they simply want to preview the document.

First, create the click event for the extraction button:

document

.getElementById(

"extractBtn"

)

.addEventListener(

"click",

extractImages

);

Next, loop through every page inside the uploaded PDF:

for(

let pageNumber = 1;

pageNumber <= pdf.numPages;

pageNumber++

){

    const page =

    await pdf.getPage(

    pageNumber

    );

}

Read the page operator list:

const operatorList =

await page.getOperatorList();

Now inspect every drawing operation to determine whether it contains an embedded image:

operatorList.fnArray

.forEach(operation=>{

    if(

    operation ===

    pdfjsLib.OPS.paintImageXObject

    ){

        console.log(

        "Image Found"

        );

    }

});

After every page has been scanned, the application creates a collection containing all discovered images grouped by page.

This collection becomes the foundation for the extraction process that follows.

Extracting Images from PDF Pages

Once embedded image objects have been identified, the application begins extracting them from the PDF.

Unlike taking screenshots of an entire page, this method retrieves each embedded image individually whenever possible. As a result, the extracted images preserve their original quality, dimensions, and compression rather than inheriting the resolution of the page preview.

Each image is assigned to the page where it was found. Organizing images this way makes it much easier for users to locate graphics inside large reports, magazines, brochures, presentations, catalogs, technical manuals, and research papers.

As each page finishes processing, its extracted images are stored inside a JavaScript array before being displayed inside the browser.

Create an array for storing extracted images:

const extractedImages = [];

Save every discovered image:

extractedImages.push({

    page:

    pageNumber,

    image:

    imageData,

    type:

    imageType

});

Each stored object contains useful information that will later be displayed to the user.

The extraction routine continues until every page inside the uploaded PDF has been inspected.

Once complete, the browser immediately displays the extracted images without requiring another processing step.

Displaying Extracted Images

After extraction finishes, the application presents every recovered image inside an organized gallery.

Instead of displaying one long collection of images, the results are grouped according to the page from which they were extracted. This organization makes it much easier to understand the original document structure.

For every extracted image, the application displays a preview together with useful technical information.

Users can immediately see the image dimensions, image format, and the page where the image originated. This additional information helps determine whether an image is suitable for reuse before downloading it.

For example, a high-resolution product photograph may be useful for marketing material, while a small company logo may only be appropriate for branding purposes.

Loop through every extracted image:

extractedImages.forEach(image=>{

    renderImageCard(

    image

    );

});

Create the preview card:

const card =

document.createElement(

"div"

);

card.className =

"image-card";

Insert the preview:

const img =

document.createElement(

"img"

);

img.src =

image.image;

Display the image information:

details.innerHTML =

`

Dims:

${image.width} × ${image.height}




Type:

${image.type}

`;

Once every card has been created, the gallery displays all extracted images grouped beneath their respective pages.

This layout provides a clean overview of every image contained inside the uploaded PDF while making individual downloads straightforward.

Downloading Individual Images

Many users don't need every image contained inside a PDF.

For example, a designer may only want the company logo from a brochure, while a researcher may only need one graph from a scientific paper.

To support these workflows, every extracted image includes its own download button.

When clicked, the browser downloads only the selected image without affecting any of the remaining extracted images.

This allows users to quickly save exactly the graphics they need.

Create a download button:

const button =

document.createElement(

"button"

);

button.innerText =

"Download";

Attach the download event:

button.onclick = ()=>{

    downloadImage(

    image

    );

};

Generate the download:

const link =

document.createElement(

"a"

);

link.href =

image.image;

link.download =

image.fileName;

link.click();

Providing separate download buttons makes the application much more flexible because users can save only the images they actually need instead of downloading every extracted asset.

Downloading All Images from the PDF

Large PDF documents often contain dozens or even hundreds of embedded images.

Downloading every image individually would be both slow and repetitive.

To simplify this workflow, the application also includes a Download All Images from PDF button.

After extraction has completed, clicking this button automatically downloads every extracted image from every page.

This feature is particularly useful when working with supplier catalogs, product brochures, magazines, annual reports, technical documentation, ebooks, educational material, and presentation files containing many graphics.

Loop through every extracted image:

extractedImages.forEach(image=>{

    downloadImage(

    image

    );

});

Attach the click event:

downloadAllButton

.addEventListener(

"click",

downloadAllImages

);

Finally, allow users to begin another extraction:

startOverButton

.addEventListener(

"click",

resetApplication

);

After the downloads have completed, users can click Start Over to upload another PDF and repeat the extraction process without refreshing the browser.

Demo: How the PDF Image Extractor Works

Step 1: Upload Your PDF Document

The image extraction workflow begins by uploading a PDF document using either the drag-and-drop area or the file picker.

Once a document has been selected, the browser validates that the uploaded file is a PDF before reading it into memory. Since the application performs all processing locally, the uploaded document never leaves the user's computer, making the tool suitable for confidential business reports, catalogs, presentations, contracts, technical manuals, research papers, and other sensitive documents.

After the PDF has been loaded successfully, the application prepares every page for preview generation before image extraction begins.

Step 2: Preview Uploaded PDF Pages

After the upload is complete, the application renders thumbnail previews for every page inside the document.

Instead of immediately scanning the PDF for images, users first receive a visual overview of the entire document. This allows them to verify that they selected the correct PDF and quickly identify which pages contain photographs, diagrams, illustrations, charts, or other graphics.

Page previews are especially useful when working with large product catalogs, magazines, annual reports, brochures, technical documentation, educational books, and research papers containing dozens or even hundreds of pages.

This verification step helps prevent unnecessary processing and improves the overall user experience.

Step 3: Extract Embedded Images

Once the document has been verified, users click the Extract Images button to begin scanning the PDF.

The application examines every page individually, searching for embedded image objects stored inside the document. Unlike screenshots or page rendering, the extractor retrieves the original image resources whenever possible, preserving their quality and dimensions.

As each page is processed, every discovered image is grouped according to the page where it originally appeared. This organization makes it much easier to browse the extracted results later.

Depending on the size of the PDF and the number of embedded images, extraction may take a few seconds for larger documents.

Step 4: Review the Extracted Images

After extraction is complete, the browser displays every recovered image inside an organized gallery.

Instead of showing one large collection of images, the application groups the results page by page. This allows users to understand exactly where each image came from within the original document.

Every image card displays a preview together with useful information such as the page number, image dimensions, and image format. This helps users quickly identify the graphics they need before downloading anything.

For example, a brochure may contain company logos, banners, icons, and product photographs spread across several pages. Grouping images by page makes navigating these documents much easier.

Step 5: Download Individual Images or Pagewise

Each extracted image includes its own Download Image button.

This feature is useful when users only need one or two graphics from a large document. Instead of downloading every extracted image, they can save only the specific illustrations, charts, product photographs, or logos that are relevant to their work.

For example, a designer may only need a company logo, while a marketing team may only want product images from a supplier catalog. Individual downloads eliminate unnecessary files and simplify the workflow.

After clicking the download button, the browser immediately saves the selected image without requiring any additional processing.

Step 6: Download Every Image

For users who need all graphics contained inside the document, the application also provides a Download All Images from PDF button.

After extraction has finished, clicking this button automatically downloads every recovered image from every page. This saves considerable time compared to downloading each image individually.

This feature is particularly useful when processing large product catalogs, marketing brochures, presentation decks, educational books, technical manuals, magazines, supplier catalogs, or company reports containing dozens of embedded images.

Once the downloads are complete, users can click Start Over to clear the current session and upload another PDF without refreshing the page.

Step 7: Start a New Extraction

After downloading the required images, users can begin working with another PDF document.

Clicking Start Over clears the uploaded document, removes every generated preview, resets the extracted image gallery, and restores the application to its initial state.

This allows users to process multiple PDF files during the same session without reloading the browser or reopening the application.

The reset process is completed instantly, making the workflow smooth and efficient when working with many PDF documents throughout the day.

Performance Optimization Tips

Image extraction is generally faster than OCR because the application recovers existing image objects instead of recognizing characters. But large PDF documents containing hundreds of pages or high-resolution graphics can still require significant processing time.

One simple optimization is to process pages sequentially instead of attempting to analyze every page simultaneously.

for(

let page = 1;

page <= pdf.numPages;

page++

){

    await extractPageImages(page);

}

Loading only the required page into memory reduces browser memory usage and improves stability when processing large documents.

If the application supports page selection, allowing users to extract images from only specific pages can greatly reduce processing time for large catalogs or reports.

const startPage = 10;

const endPage = 25;

After images have been downloaded, release any temporary browser resources:

URL.revokeObjectURL(

imageURL

);

Finally, clear the extracted image collection before processing another PDF:

extractedImages.length = 0;

These small optimizations help the application remain responsive even when working with documents containing hundreds of embedded graphics.

Important Notes from Real-World Use

Not every PDF contains embedded images.

Some documents consist entirely of text and vector graphics, while others may contain scanned pages that appear as a single full-page image. Understanding how the original PDF was created helps set realistic expectations before extraction begins.

Always validate uploaded files before processing.

if(

file.type !== "application/pdf"

){

    alert(

    "Please upload a valid PDF."

    );

}

Some PDF creators compress embedded images heavily to reduce file size. In those situations, the extracted images will match the quality stored inside the PDF, but they can't be improved beyond the original resolution.

Users should also verify extraction results before downloading every image, particularly when processing large reports or catalogs containing hundreds of graphics.

Because the application performs all operations locally inside the browser, confidential documents remain private throughout the extraction process. This makes browser-based image extraction suitable for business reports, engineering drawings, financial documents, legal records, educational resources, and other sensitive PDFs.

Common Mistakes to Avoid

One common mistake is assuming every visible object inside a PDF is an extractable image.

Many diagrams, logos, and charts are actually vector graphics rather than raster images. These elements are rendered by drawing commands and can't always be extracted as standalone image files.

Another mistake is relying on screenshots instead of extracting embedded images.

Screenshots capture only the rendered page displayed on the screen, which often reduces image quality and includes unnecessary page elements.

Always verify that embedded images have been detected before displaying the results.

if(

extractedImages.length === 0

){

    alert(

    "No embedded images found."

    );

}

Some users also forget to organize extracted images by page.

Grouping images according to their original page location makes it much easier to navigate large documents containing dozens or hundreds of graphics.

Finally, always review the extracted images before downloading them.

Checking the preview allows users to confirm image quality, dimensions, and page location before saving the files.

Conclusion

In this tutorial, you built a browser-based PDF Image Extractor using JavaScript.

You learned how to upload PDF files, preview document pages, locate embedded image objects, extract images while preserving their original quality, organize results page by page, download individual images, and download every extracted image directly from the browser.

More importantly, you learned the difference between embedded images and rendered page previews, giving you a better understanding of how PDF documents are structured internally.

Because the entire workflow runs locally inside the browser, users can safely recover graphics from confidential PDF documents without uploading them to external servers.

You can try the complete implementation here:

PDF Image Extractor: https://allinonetools.net/extract-images-from-pdf/

Once you understand this workflow, you can extend the project further by adding duplicate image detection, automatic image compression, AI-powered image tagging, background removal, image format conversion, OCR on extracted images, watermark detection, or bulk asset management features.

How to Build a Browser-Based PDF OCR to Text Converter Using JavaScript

Bhavin Sheth — Tue, 07 Jul 2026 16:23:22 +0000

Not every PDF contains searchable or editable text. Many PDFs are simply scanned images of documents such as invoices, contracts, books, receipts, government forms, and handwritten notes.

While these documents are easy to read, copying, searching, or editing their content isn't possible without additional processing.

This is where Optical Character Recognition (OCR) comes in. OCR recognizes text inside scanned images and converts it into editable, searchable digital text.

In this tutorial, you'll build a browser-based PDF OCR to Text Converter using JavaScript. Users will be able to upload PDF files, preview pages, configure OCR settings, extract text, monitor processing progress, review OCR confidence scores, and export the results – all directly inside the browser.

Since everything runs locally, uploaded documents never leave the user's device, making the tool both fast and privacy-friendly.

By the end of this tutorial, you'll understand how browser-based OCR works and how to build your own PDF-to-text converter using JavaScript.

Why PDF OCR Is Useful
How PDF OCR Works
Project Setup
What Libraries Are We Using?
Creating the Upload Interface
Previewing Uploaded PDF Pages
Configuring OCR Settings
Extracting Text from the PDF
Tracking OCR Progress
Understanding OCR Confidence Scores
Reviewing the Extracted Text
Exporting the OCR Results
Demo: How the PDF OCR Tool Works
Performance Optimization Tips
Important Notes from Real-World Use
Common Mistakes to Avoid
Conclusion

Why PDF OCR Is Useful

Many PDF files are scanned documents rather than digital text. Although they look readable, the text is actually stored as images, making it impossible to search, copy, edit, or analyze the content.

OCR (Optical Character Recognition) solves this problem by recognizing characters from scanned pages and converting them into editable, searchable text. Once the text is extracted, it can be copied, translated, indexed, summarized, or imported into other applications.

OCR is widely used across many industries. Businesses use it to process invoices, purchase orders, receipts, contracts, bank statements, and tax documents without manually entering data. Legal professionals use OCR to search agreements, affidavits, and court documents for names, dates, or specific clauses. Government agencies digitize historical records, application forms, passports, and official documents to build searchable digital archives.

Educational institutions convert scanned books, research papers, lecture notes, and examination materials into searchable text, making learning resources easier to access. Healthcare organizations use OCR to digitize prescriptions, laboratory reports, insurance claims, and patient records, reducing paperwork and improving record management.

OCR is also valuable for e-commerce businesses. Sellers handling hundreds of invoices, shipping labels, and purchase orders from platforms such as Amazon, Flipkart, Meesho, or Shopify can quickly extract order numbers, customer details, addresses, and product information instead of typing everything manually.

Developers use OCR when building document management systems, enterprise search tools, AI assistants, and workflow automation platforms where scanned documents need to become searchable digital content.

Since this application performs OCR entirely inside the browser, users can process confidential documents without uploading them to external servers. This keeps document processing fast, private, and secure while making scanned PDFs much more useful.

How PDF OCR Works

A PDF OCR application converts scanned pages into editable text by combining PDF rendering with Optical Character Recognition.

When a user uploads a PDF, the browser first validates the document and loads it into memory. Each page is then rendered as an image using PDF.js. These rendered page images become the input for the OCR engine.

The OCR engine examines every image pixel by pixel. It identifies printed characters, recognizes words and sentences, and reconstructs the document as digital text. Depending on the selected language, the recognition engine applies language-specific dictionaries and character models to improve accuracy.

If the user enables image enhancement, the application can improve the scanned page before recognition. Converting the page to grayscale, increasing contrast, or sharpening the image often helps OCR detect characters more accurately, especially when working with old scans or low-quality photocopies.

As each page is processed, the application updates a progress indicator so users can monitor the extraction process in real time. The OCR engine also returns a confidence score for every page, allowing users to estimate how reliable the recognized text is.

After all selected pages have been processed, the application combines the extracted text into a single document. Users can review the output, copy it directly from the browser, or export it as a TXT or JSON file for further use.

Since every stage of the workflow runs locally, the uploaded PDF never leaves the user's device. This makes browser-based OCR an excellent solution for sensitive business documents, legal records, healthcare files, financial reports, and government paperwork.

Project Setup

We'll build the PDF OCR application using standard web technologies.

Create the following project structure.

pdf-ocr-tool/

│── index.html

│── style.css

│── script.js

Next, include the required JavaScript libraries inside index.html.

These libraries provide everything needed to render PDF pages, recognize text, and manage PDF-related operations directly inside the browser.

What Libraries Are We Using?

This project combines several JavaScript libraries because OCR involves multiple processing stages.

The primary library is PDF.js, which loads the uploaded PDF document and renders every page as an image inside the browser. Since OCR engines work with images rather than PDF files directly, rendering each page is the first step of the workflow.

The application uses Tesseract.js to perform Optical Character Recognition. Tesseract is one of the most popular open-source OCR engines and supports dozens of languages, making it possible to recognize printed text from scanned documents without relying on any external API or cloud service.

We also include PDF-lib, which helps manage PDF-related operations and provides additional flexibility if future features such as annotations, metadata editing, or document modifications are added.

Together, these libraries create a complete browser-based OCR solution capable of rendering PDF pages, recognizing printed text, tracking recognition progress, reporting confidence scores, and exporting the extracted text while keeping every document private on the user's device.

Creating the Upload Interface

Every OCR workflow begins with selecting a PDF document. Before the application can recognize any text, it must first load the PDF into the browser and verify that it's a supported file type.

A good upload interface should be simple, intuitive, and accessible for both desktop and mobile users. Supporting drag-and-drop uploads alongside the traditional file picker gives users multiple ways to import their documents.

In this project, the upload section serves as the starting point for the entire OCR workflow. After a PDF is selected, the browser validates the file, reads it into memory, and prepares it for page rendering. Since the application runs completely inside the browser, no document is uploaded to an external server. This ensures confidential PDFs remain private throughout the OCR process.

The upload interface also provides clear instructions so users immediately understand how to begin using the tool.

Here's the HTML for the upload area:



    

        
            ☁
        

        Drag & Drop PDF Here

        Or click to browse file

Next, validate the uploaded file before loading it.

const pdfInput = document.getElementById("pdfInput");

pdfInput.addEventListener("change", async (event)=>{

    const file = event.target.files[0];

    if(!file) return;

    if(file.type !== "application/pdf"){

        alert("Please upload a valid PDF file.");

        return;

    }

    loadPDF(file);

});

Once the validation succeeds, the PDF is loaded into memory and the application proceeds to generate preview thumbnails for each page.

Previewing Uploaded PDF Pages

After the PDF has been loaded successfully, the application generates page previews.

Instead of immediately starting OCR, users first see thumbnail images for every page in the uploaded document. This allows them to confirm that the correct file has been selected and inspect the document before extraction begins.

The preview stage is especially useful for large PDFs because users can quickly identify scanned pages, blank pages, rotated pages, or incorrect uploads without wasting time running OCR on the wrong document.

PDF.js renders every page as a canvas before displaying it inside the preview grid.

First, load the PDF document.

const pdf = await pdfjsLib.getDocument({

    data: await file.arrayBuffer()

}).promise;

Next, render every page.

for(let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++){

    const page = await pdf.getPage(pageNumber);

    const viewport = page.getViewport({

        scale:0.35

    });

    const canvas = document.createElement("canvas");

    const context = canvas.getContext("2d");

    canvas.width = viewport.width;

    canvas.height = viewport.height;

    await page.render({

        canvasContext:context,

        viewport

    }).promise;

    previewContainer.appendChild(canvas);

}

Each rendered page becomes a thumbnail, allowing users to scroll through the document before choosing the OCR settings.

This visual confirmation greatly reduces mistakes when processing long reports, contracts, invoices, books, or multi-page scanned documents.

Configuring OCR Settings

Different PDF documents require different OCR configurations. A clean digital scan usually processes very quickly, while old photocopies or low-quality scans often require additional image enhancement to improve recognition accuracy.

Before starting OCR, the application allows users to customize several options that affect how text is extracted.

Users can choose whether OCR should process every page or only a specific page range. This is particularly useful when working with large documents where only a few pages contain important information.

The OCR engine also supports multiple recognition languages. Selecting the correct language helps improve accuracy because Tesseract uses language-specific dictionaries and character models during recognition.

For users who prioritize speed, the Fast mode completes OCR quickly while still producing good results. When working with low-quality scans or official documents, High Accuracy mode performs additional processing to improve recognition quality.

The application also includes optional image enhancement settings. Converting pages to grayscale, increasing contrast, or sharpening the scanned image often improves OCR accuracy by making printed characters easier to recognize.

These configurable options allow the OCR engine to adapt to many different document types without overwhelming users with unnecessary complexity.

The page selection section allows users to process either the entire document or only selected pages.



All Pages



Specific Pages

Users can also choose the OCR language.

Next, configure the OCR accuracy mode.

const mode = document.querySelector(

'input[name="accuracy"]:checked'

).value;

console.log(mode);

Finally, enable optional image enhancement features before OCR begins.

const grayscale = grayscaleCheckbox.checked;

const contrast = contrastCheckbox.checked;

const sharpen = sharpenCheckbox.checked;

console.log(

grayscale,

contrast,

sharpen

);

These settings allow the application to balance processing speed and recognition quality depending on the type of PDF being analyzed.

Improving OCR Accuracy Before Processing

One advantage of browser-based OCR is that the document can be optimized before recognition begins. Small image enhancements often have a significant impact on the quality of the extracted text.

For example, grayscale conversion removes unnecessary color information, allowing the OCR engine to focus only on character shapes. Increasing contrast helps distinguish text from the page background, while sharpening makes blurred letters easier to recognize.

These enhancements are especially valuable when processing old books, photocopies, historical records, receipts, handwritten forms, government documents, engineering drawings, and low-resolution scans.

Choosing the correct OCR language is equally important. A scanned Gujarati document processed using the English language model will usually produce poor recognition results. Selecting the matching language significantly improves OCR accuracy.

Taking a few moments to configure these settings before processing often produces cleaner extracted text, fewer recognition errors, and higher confidence scores, particularly when working with challenging documents.

Extracting Text from the PDF

Once the document has been uploaded, previewed, and the OCR settings have been configured, the application is ready to extract text from the selected pages.

Unlike searchable PDFs that already contain digital text, scanned PDF documents consist entirely of images. OCR works by examining each rendered page image, recognizing every visible character, and converting those characters into editable text.

The extraction process begins by rendering each selected PDF page as an image using PDF.js. Each rendered page is then passed to Tesseract.js, which analyzes the image pixel by pixel and reconstructs words, sentences, paragraphs, and punctuation.

If the user selected a specific page range, only those pages are processed. Otherwise, every page in the document is analyzed.

Because OCR can be computationally intensive, especially for high-resolution scans, the application processes one page at a time. This approach keeps memory usage lower while providing continuous progress updates to the user.

The recognized text from each page is appended to a single output document that can later be reviewed, copied, or exported.

First, create the OCR worker.

const worker = await Tesseract.createWorker(

    selectedLanguage

);

Next, loop through the selected pages.

for(let page = startPage; page <= endPage; page++){

    await processPage(page);

}

Now perform OCR on the rendered page.

const result = await worker.recognize(

    canvas

);

const extractedText = result.data.text;

Append the extracted text to the final output.

finalText +=

`----- Page ${page} -----\n\n`;

finalText += extractedText;

finalText += "\n\n";

Once every page has been processed, terminate the OCR worker.

await worker.terminate();

Processing one page at a time allows users to monitor OCR progress while ensuring stable performance, even for large documents.

Tracking OCR Progress

OCR processing can take anywhere from a few seconds to several minutes depending on the size of the document, image quality, language, and selected accuracy mode.

Providing a progress indicator is important because users can immediately see that the application is actively processing the document instead of appearing frozen.

As each page finishes recognition, the progress bar updates automatically, displaying both the current page number and the overall completion percentage.

For example, a 42-page document may display messages such as "Processing Page 2 of 42" before eventually reaching the final page.

Showing real-time progress improves the overall user experience and makes it easier to estimate the remaining processing time.

The OCR engine reports its progress while recognizing each page.

logger: info => {

    console.log(info);

}

Update the progress bar.

progressBar.style.width =

`${percentage}%`;

progressLabel.innerText =

`${percentage}%`;

Display the currently processed page.

status.innerText =

`Processing Page ${currentPage}

of ${totalPages}`;

Once the final page has been processed, the progress bar reaches one hundred percent and the extracted text becomes available for review.

Understanding OCR Confidence Scores

One useful feature of Tesseract.js is that it reports a confidence score for every page that it processes.

The confidence score estimates how accurately the OCR engine recognized the characters contained on a page. Higher confidence generally indicates cleaner scans, sharper text, and fewer recognition errors.

For example, a professionally scanned document with clear printed text may produce confidence scores above ninety-five percent, while older photocopies or blurry mobile phone images may produce lower values.

Displaying confidence scores helps users quickly identify pages that may require manual review or reprocessing.

In this application, every processed page displays its individual OCR confidence score after recognition finishes.

The OCR engine returns the confidence value together with the extracted text.

const confidence =

result.data.confidence;

Store each page's score.

confidenceScores.push({

    page: currentPage,

    confidence

});

Display the results.

confidenceScores.forEach(score=>{

    console.log(

        score.page,

        score.confidence

    );

});

Pages with lower confidence scores may contain faded text, handwritten notes, poor lighting, skewed scans, or low image resolution. Reviewing these pages helps improve the overall quality of the extracted document.

Optimizing OCR Accuracy

Even with a powerful OCR engine, the quality of the original document has a significant impact on the extracted text.

Scanned PDFs with sharp, high-resolution pages usually produce excellent results without additional processing. But documents containing faded printing, uneven lighting, shadows, handwritten annotations, or compression artifacts may require image enhancement before OCR begins.

The application includes several preprocessing options that improve recognition quality.

Grayscale conversion removes unnecessary color information and simplifies the image for the OCR engine. Increasing contrast helps separate text from the background, while sharpening improves character edges that may appear blurry in low-quality scans.

Selecting the correct recognition language is equally important. OCR models are trained for specific languages, so choosing the matching language greatly improves character recognition and reduces spelling mistakes.

Users should also select the appropriate accuracy mode. Fast Mode works well for clean digital scans, while High Accuracy Mode performs additional analysis that produces better results for difficult documents, although it requires more processing time.

Taking a few extra seconds to configure these settings often produces significantly cleaner text, higher confidence scores, and fewer manual corrections after extraction.

Reviewing the Extracted Text

Once the OCR process finishes, the application combines the recognized text from every processed page into a single output area.

Instead of immediately downloading the results, users can first review the extracted text directly inside the browser. This provides an opportunity to verify the OCR output, check formatting, identify recognition errors, and ensure that the correct pages were processed.

The extracted text preserves the page sequence by separating the content from each page with a clear page heading. This makes it much easier to navigate large documents such as books, contracts, technical manuals, invoices, government records, and research papers.

For searchable PDFs, the extracted text is usually very accurate. For scanned documents, users can quickly compare the OCR output with the original page preview and decide whether additional image enhancement or a different OCR language would improve the results.

The application also includes a Copy button so users can instantly copy all extracted text to the clipboard without downloading a file.

First, display the extracted text.

document.getElementById(

"output"

).value = finalText;

Next, implement the copy feature.

async function copyText(){

    await navigator.clipboard.writeText(

        finalText

    );

    alert("Text copied successfully.");

}

Attach the event listener.

document.getElementById(

"copyButton"

).addEventListener(

"click",

copyText

);

Providing an in-browser preview allows users to verify OCR quality before exporting the results.

Exporting the OCR Results

After reviewing the extracted content, users can export it in different formats depending on how they intend to use the information.

Plain text files are ideal for editing inside any text editor, importing into word processors, or searching with desktop applications.

JSON exports are useful for developers building document management systems, AI applications, search engines, automation workflows, or APIs that consume structured OCR results.

Providing multiple export formats makes the OCR tool suitable for both everyday users and software developers.

Creating a downloadable TXT file is straightforward.

const blob = new Blob(

    [finalText],

    {

        type:"text/plain"

    }

);

Generate the download link.

const url = URL.createObjectURL(

blob

);

const link = document.createElement(

"a"

);

link.href = url;

link.download = "ocr-output.txt";

link.click();

JSON exports include additional information such as page numbers and confidence scores.

const report = {

    text: finalText,

    confidence: confidenceScores

};

downloadJSON(report);

These export options allow users to continue working with the extracted text in virtually any application.

Demo: How the PDF OCR Tool Works

Step 1: Upload Your PDF

The OCR workflow begins by uploading a PDF document using either the drag-and-drop area or the file picker.

Once a document has been selected, the browser validates the file format, loads the PDF into memory, and prepares it for page rendering. Since all processing occurs locally, the uploaded file never leaves the user's computer.

Step 2: Preview the Uploaded PDF

After the upload is complete, the application renders thumbnail previews of every page.

This allows users to verify that the correct document has been selected and inspect the page order before running OCR.

Previewing the document is particularly useful when processing large books, reports, legal documents, or scanned archives containing dozens of pages.

Step 3: Configure OCR Settings

Before text extraction begins, users configure the OCR options.

The application allows users to choose all pages or a specific page range, select the OCR language, switch between Fast and High Accuracy modes, and enable optional image enhancement features such as grayscale conversion, contrast improvement, and sharpening.

These settings help improve recognition quality depending on the condition of the scanned document.

Step 4: Start OCR Processing

After reviewing the settings, users click the Extract Text button.

The browser begins processing every selected page one by one. During this stage, each rendered page image is analyzed by the OCR engine, which recognizes printed characters and converts them into editable text.

Because OCR runs directly inside the browser, even confidential documents remain completely private throughout the process.

Step 5: Monitor Processing Progress

As OCR runs, the application displays a live progress indicator.

Users can monitor the current page being processed, overall completion percentage, and recognition progress in real time. For large documents, this provides useful feedback and reassures users that the application is actively processing the file.

Step 6: Review OCR Confidence Scores

Once recognition is complete, the application displays confidence scores for every processed page.

These values indicate how accurately the OCR engine recognized each page. Pages with lower confidence scores may contain faded text, skewed scans, or poor image quality and can be reviewed manually if necessary.

Confidence scores provide an additional layer of quality assurance before exporting the extracted text.

Step 7: Review the Extracted Text

After OCR finishes, the complete extracted text appears inside the browser.

Users can scroll through the recognized content, compare it with the original document, and copy the text directly to the clipboard using the built-in Copy button.

This makes it easy to reuse the extracted information immediately without downloading a separate file.

Step 8: Export the Results

Finally, users can export the OCR results.

The application supports downloading the extracted text as a TXT file for general editing or as a JSON file for software development and automation workflows.

After selecting the preferred format, the browser generates the file instantly without uploading any data to external servers.

Performance Optimization Tips

OCR is one of the most computationally intensive operations performed inside a browser. Although modern JavaScript engines and OCR libraries are highly optimized, a few simple techniques can significantly improve performance.

Before processing begins, render PDF pages at an appropriate resolution. Extremely high-resolution images increase processing time without always improving recognition accuracy.

const viewport = page.getViewport({

    scale:1.5

});

Processing pages sequentially instead of loading every page simultaneously reduces memory consumption for large documents.

for(let page = 1; page <= totalPages; page++){

    await processPage(page);

}

Users should enable OCR only when working with scanned PDFs. Searchable PDFs already contain digital text, so OCR simply increases processing time without improving the results.

If the document contains hundreds of pages, allowing users to analyze only a selected page range can significantly reduce processing time.

Using grayscale images instead of full-color pages also improves recognition speed while reducing memory usage.

Whenever possible, choose the OCR language that matches the document. Smaller language models generally process faster and produce more accurate results than attempting recognition with an incorrect language.

Finally, remember to terminate the OCR worker after processing completes to release browser resources.

await worker.terminate();

These small optimizations produce a smoother user experience while making browser-based OCR practical even for large documents.

Important Notes from Real-World Use

OCR accuracy depends heavily on the quality of the original document.

Clean scans with high resolution, good lighting, and sharp printed text usually produce excellent recognition results. Older photocopies, faded documents, handwritten notes, or skewed scans may require image enhancement before OCR begins.

Before processing, always verify that the uploaded file is a valid PDF.

if(file.type !== "application/pdf"){

    alert("Please upload a valid PDF.");

    return;

}

Selecting the correct OCR language is equally important. Processing a Gujarati document with the English language model will significantly reduce recognition accuracy.

console.log(

"Selected Language:",

selectedLanguage

);

Users should also review OCR confidence scores after processing. Pages with lower confidence values often benefit from rescanning or using image enhancement options.

Because the entire workflow runs locally, browser-based OCR is well suited for confidential business reports, contracts, financial documents, legal records, healthcare files, and government paperwork that should never be uploaded to third-party services.

Common Mistakes to Avoid

One common mistake is enabling OCR for documents that already contain selectable text.

Searchable PDFs can usually be processed much faster by extracting the embedded text directly.

if(pdfHasText){

    skipOCR();

}

Another mistake is choosing the wrong recognition language.

Always select the language that matches the document before starting OCR.

worker = await Tesseract.createWorker(

selectedLanguage

);

Some users also attempt OCR on extremely low-quality scans without enabling image enhancement.

Using grayscale conversion, contrast adjustment, or sharpening often improves recognition quality considerably.

Finally, always review the extracted text before exporting it.

Checking the OCR output and confidence scores helps identify pages that may require rescanning or additional processing before the results are used in business workflows.

Conclusion

In this tutorial, you built a browser-based PDF OCR to Text Converter using JavaScript.

You learned how to upload PDF documents, preview scanned pages, configure OCR settings, select recognition languages, improve image quality, extract text, monitor processing progress, review OCR confidence scores, and export the recognized text directly from the browser.

More importantly, you discovered how modern browsers can perform Optical Character Recognition locally without requiring a backend server or cloud-based OCR service.

This approach keeps document processing fast, private, and secure while giving users complete control over how scanned PDFs are converted into editable text.

You can try the complete implementation here:

PDF OCR to Text Converter

Once you understand this workflow, you can extend the project further by adding handwriting recognition, AI-powered document summarization, automatic translation, named entity extraction, keyword detection, document classification, searchable PDF generation, or intelligent document automation.

How to Export a Claude Conversation as a PDF

Vikram Aruchamy — Mon, 06 Jul 2026 13:56:14 +0000

Whether you're documenting research, sharing AI-generated content with colleagues, creating reports, or keeping an offline backup, saving Claude conversations as PDFs is one of the easiest ways to preserve your work.

While Claude lets you export your account data for archival purposes, it doesn't currently include a built-in option to export an individual conversation directly as a PDF. As a result, users often rely on browser printing, document editors, Claude Artifacts, share links, or dedicated Claude to PDF tools depending on their workflow.

In this guide, you'll learn the most effective ways to convert Claude conversations into PDFs, including the advantages, limitations, and best use cases for each method.

Whether you need to save a single conversation, export a Claude Artifact, archive your entire conversation history, or preserve formatting in code- and image-heavy conversations, you'll find the approach that best fits your needs.

How to Save Claude Conversations as a PDF Using the Browser Print Option
How to Copy Claude Responses into Google Docs and Save Them as PDFs
How to Convert Claude Share Links into PDFs
How to Export Claude Artifacts as PDFs
How to Download All Claude Conversations from Settings
How to Choose the Best Export Method
Video Tutorial: How to Export a Claude Conversation as PDF
Conclusion

How to Save Claude Conversations as a PDF Using the Browser Print Option

The browser's built-in Print feature is the quickest way to convert a Claude conversation to PDF. It works in all modern browsers, requires no additional software, and is suitable for most one-time exports of conversations that are text-heavy, with limited images and interactive content.

Depending on your preferred workflow, you can rely on this native method or use a simple Claude to PDF Chrome Extension to export your conversation.

How Browsers Generate PDFs From Web Pages:

When you use your browser's Print feature, it doesn't take a screenshot of the page. Instead, the browser renders the page specifically for printing by processing its HTML and CSS.

Websites can also provide a print stylesheet — a set of CSS rules that changes how the page appears on paper or in a PDF.

A print stylesheet can hide navigation menus, buttons, sidebars, advertisements, and other interactive elements while optimizing the layout for printing. If a website doesn't define print-specific styles for certain elements, the browser prints them as they appear on the page.

This is why buttons such as Copy, Share, and other Claude interface controls may appear in the exported PDF when you use this option to export the conversation as pdf.

Now, lets see the steps to print the conversation to PDF.

Step 1: Open the Browser's Print Dialog

Open the Claude conversation you want to export.
Scroll through the conversation to ensure all responses have finished loading.
Press Ctrl + P (Windows/Linux) or ⌘ + P (macOS), or select Print from your browser's menu.

Step 2: Save the Conversation as a PDF

In the print dialog:

Set the destination to Save as PDF.
Choose the pages you want to export (optional).
Select a location to save the PDF.
Click Save.

Step 3: Adjust the Print Settings

Before saving the PDF, review the available print settings. Most browsers provide these options under More settings. The following image shows the print settings.

Let's go over a few of these:

Margins

Leave the margins set to None for most conversations. If wide code blocks or tables are clipped, switch to Minimum margins to use more of the page width.

Scale

Keep the Scale as Actual size If long lines of code extend beyond the page width, reduce the scale slightly so the content fits on the page.

Background graphics

By default, browsers don't print background colors. If you want to preserve the background styling used for code blocks and other interface elements, enable Background graphics.

Headers and footers

This option is disabled by default. If you'd like the PDF to include the page title, URL, date, and page numbers, enable Headers and footers.

Advantages:

Available in every modern browser.
Requires no additional software.
Works entirely on your device.
Suitable for quickly exporting individual conversations.

Limitations:

Long conversations may generate very large PDFs with awkward page breaks.
Long code blocks can wrap or split across pages.
Wide tables may be compressed or clipped.
Large images may be resized or moved across pages.
Interface elements such as Copy, Share, and other Claude controls may appear in the exported PDF if they are not hidden by Claude's print stylesheet.
Embedded Artifacts may not be fully captured and often need to be exported separately.

For short conversations, browser printing is usually sufficient. For conversations containing extensive code, large images, complex tables, or Artifacts, the other methods we'll discuss next generally produce better results.

How to Copy Claude Responses into Google Docs and Save Them as PDFs

If you only need to export a single Claude response, you can use Claude's built-in Copy button. Unlike browser printing, this method copies the response as Markdown, preserving headings, lists, tables, code blocks, links, and other formatting.

Click the Copy button located below the response. Claude copies it to your clipboard as Markdown, making it easy to import into applications that support the Markdown format.

Then open a Google Docs document. If this is your first time using Markdown import, go to Tools → Preferences and enable Markdown. This option is disabled by default.

Once enabled, select Edit → Paste from Markdown (or right-click and choose Paste from Markdown) to import the copied content.

Google Docs automatically converts the Markdown into a formatted document, preserving most elements such as:

Headings
Bullet and numbered lists
Tables
Code blocks
Blockquotes
Hyperlinks

Review the imported document before exporting it, especially if it contains complex tables, nested lists, or long code blocks. Minor formatting adjustments may be required depending on the content.

Once you're satisfied with the document, select File → Download → PDF Document (.pdf) to generate the PDF.

Advantages:

Produces a clean document without Claude's interface elements.
Preserves document structure better than browser printing.
Allows you to edit the content before exporting.
Uses built-in features available in Claude and Google Docs.

Limitations:

Suitable for exporting individual Claude responses, not entire conversations.
Images and interactive content may require manual adjustments.
Complex layouts may need minor formatting cleanup before exporting.

If you don't need to edit the response, you can also convert the copied Markdown directly using a Markdown to PDF converter online tools, eliminating the need to import it into Google Docs first.

Claude lets you create a public Share Link for any conversation. Once a conversation is shared, anyone with the link can view it in a web browser without signing in to your account.

Share Links are a convenient way to convert conversations into PDFs using free online tools, such as a Claude to PDF converter that accept a Claude Share Link and generate a downloadable PDF. They automate the conversion process and produce cleaner page layouts with fewer manual adjustments.

To create a Share Link:

Open the conversation you want to export.
Click the Share button from the top right.
Choose the Create public link option.
Copy the generated URL.
Enter the URL in the free tool text box, and your entire conversation will be downloaded as a PDF file.

This method is most appropriate when you want to generate a cleaner PDF from a publicly accessible conversation.

Note: Because Share Links are publicly accessible, avoid using this method for conversations containing confidential, personal, or sensitive information. Anyone with the link can view the shared conversation until the Share Link is revoked or deleted from your Claude account.

How to Export Claude Artifacts as PDFs

Claude Artifacts are standalone outputs that Claude generates alongside a conversation. Unlike regular chat messages, Artifacts open in a dedicated panel and are designed for working with larger pieces of content such as documents, code, web pages, and diagrams.

Common Artifact types include:

Documents
Markdown files
HTML pages
Source code
SVG graphics

If an Artifact supports PDF export, this is the easiest way to create a PDF. Open the Artifact and click Download as PDF option from the toolbar as shown in the following image:

Claude generates the PDF directly from the Artifact, producing a cleaner result than printing the entire conversation.

This approach is particularly useful for content that is intended to be read as a standalone document, such as reports, articles, technical documentation, or Markdown files.

Keep the following considerations in mind:

The PDF contains only the Artifact, not the surrounding conversation.
If a conversation contains multiple Artifacts, each one must be exported separately.
Interactive HTML Artifacts are exported as their rendered output, so interactive behavior isn't preserved in the PDF.
Code Artifacts retain their formatting, although very long lines may wrap depending on the page width.
Large SVG graphics may be scaled to fit the page size.

If your goal is to preserve the conversation itself, including prompts, responses, and the generated Artifact, you'll need to use one of the conversation export methods covered in this guide.

How to Download All Claude Conversations from Settings

If you want to archive your entire Claude account instead of exporting individual conversations, Claude's Export Data feature is the most comprehensive option. Rather than generating PDFs, Claude exports your account as a ZIP archive containing JSON files that preserve your complete conversation history.

To request an export:

Open Claude.
Go to Settings.
Select Export Data.
Request the export.
Download the ZIP archive when you receive the email.

The exported archive may contain:

Conversations
Projects (if applicable)
Account information
Other account data

Unlike browser printing, the conversations are stored as structured JSON rather than formatted documents.

A typical conversation file has the following structure:

Conversation
├── uuid
├── name
├── summary
├── chat_messages
│   ├── sender
│   ├── created_at
│   ├── content
│   │   ├── type
│   │   └── text
│   └── attachments

The fields at the top of the file contain metadata about the conversation, while the actual conversation is stored inside the chat_messages array. Each message records:

sender: Whether the message was written by the user or Claude.
created_at: When the message was created.
content: One or more content blocks.
type: The content type, such as text.
text: The actual conversation text.

If your goal is simply to read or archive the conversation, you can ignore most of the metadata and extract only the text field from each message.

The following Python script converts an exported conversation into a simple Markdown document by extracting only the conversation text.

import json

with open("conversation.json", "r", encoding="utf-8") as f:
    conversation = json.load(f)

print(f"# {conversation['name']}\n")

for message in conversation["chat_messages"]:
    sender = message["sender"].capitalize()

    for block in message["content"]:
        if block.get("type") == "text":
            print(f"## {sender}\n")
            print(block["text"])
            print()

The generated Markdown can then be:

Imported into Google Docs using Paste from Markdown.
Converted with a Markdown-to-PDF converter.
Archived in a Git repository or knowledge base.
Indexed by documentation tools.

This method is the best choice when you want to preserve your entire Claude history in a formatted document. It isn't intended for quickly exporting individual conversations as PDFs, but it provides the highest-fidelity archive of your data.

How to Choose the Best Export Method

Each export method serves a different purpose. The right choice depends on whether you're exporting a single response, an entire conversation, a Claude Artifact, or your complete account history.

Method	Best For	Advantages	Limitations
Browser Print	Quick one-time exports	Built into every browser, no additional tools required	Includes Claude interface elements, limited formatting control
Google Docs	Editing before exporting	Produces a clean, editable document with good formatting	Best suited for individual Claude responses
Claude Artifacts	Exporting generated documents, code, or HTML	Preserves the original artifact content	Doesn't export the entire conversation
Claude Share Links	Converting publicly shared conversations	Cleaner output than printing the Claude interface	Requires creating a public Share Link
Account Data Export	Backing up all conversations	Exports your complete conversation history for archival	Produces JSON files rather than readable PDFs

Use the following recommendations to choose the most appropriate method:

Quickly saving a single conversation: Use the Browser Print option.
Editing the content before exporting: Copy the response into Google Docs and export it as a PDF.
Saving a Claude Artifact: Export or print the Artifact directly.
Backing up your entire Claude account: Use Account Data Export from Claude Settings.
Preserving formatting for long or complex conversations: Use a dedicated Claude to PDF tool designed for exporting conversations.

Video Tutorial: How to Export a Claude Conversation as PDF

Conclusion

Although Claude doesn't currently offer a native option to export individual conversations as PDFs, it's possible to achieve the same result using browser printing, Google Docs, Claude Artifacts, Share Links, or the built-in account export feature. Each method has its own trade-offs in terms of formatting, convenience, and intended use.

If you're looking for a more streamlined workflow, especially for exporting conversations with code blocks, tables, images, and long responses, you can also use a dedicated Claude to PDF tool that automates the process and produces cleaner PDFs with minimal manual effort.

How to Build a Browser-Based PDF Analyzer Using JavaScript

Bhavin Sheth — Fri, 03 Jul 2026 15:37:58 +0000

PDF files are one of the most widely used document formats for sharing reports, invoices, contracts, books, research papers, manuals, forms, and business documents. Although viewing a PDF is simple, understanding what's inside the document is often much more difficult.

For example, you may need to know how many pages a PDF contains, whether it's password protected, who created it, what metadata it includes, how much text it contains, which fonts are used, or whether the document contains embedded images.

Manually inspecting all of this information can be time-consuming, especially when working with large collections of PDF files.

A PDF Analyzer solves this problem by automatically extracting detailed information from a document. Instead of opening the file in multiple applications, users can upload a PDF once and instantly view metadata, security settings, text statistics, image information, page details, fonts, and much more.

In this tutorial, you'll build a browser-based PDF Analyzer using JavaScript. The application allows users to upload a PDF, preview its pages, configure analysis options, perform different levels of document analysis, inspect the extracted information, and export a complete analysis report in multiple formats.

Everything runs directly inside the browser without requiring a backend server, making document analysis fast, private, and secure.

By the end of this tutorial, you'll have a fully functional PDF Analyzer capable of examining both simple and complex PDF documents.

Why PDF Analysis Is Useful
How PDF Analysis Works
Project Setup
What Library Are We Using?
Creating the Upload Interface
Previewing Uploaded PDF Pages
Configuring Analysis Settings
Analyzing the PDF
Displaying the Analysis Report
Exporting the Analysis Report
Demo: How the PDF Analyzer Works
Important Notes from Real-World Use
Common Mistakes to Avoid
Conclusion

Why PDF Analysis Is Useful

Most people think of a PDF as simply a document that can be viewed or printed, but every PDF contains much more information than what appears on the screen.

Behind every document is a collection of properties such as metadata, security settings, page information, fonts, embedded images, and document statistics. Accessing this information can help users better understand the document before editing, sharing, printing, or archiving it.

Businesses often receive hundreds of PDF files every day from clients, suppliers, government departments, and employees. Before these files are stored or distributed, they frequently need to be inspected to verify their contents. A PDF Analyzer makes this process much faster by automatically extracting important document information.

Legal professionals regularly review contracts and agreements where document properties such as creation dates, authorship, and security restrictions may be important. Instead of manually checking each document, an analyzer provides these details in seconds.

Educational institutions use PDF analysis when reviewing assignments, research papers, and digital course materials. Teachers and administrators can quickly inspect page counts, metadata, extracted text, and document properties before storing or distributing files.

Publishing companies analyze PDF files before printing books, manuals, catalogs, and magazines. Reviewing page sizes, fonts, metadata, and embedded resources helps identify formatting problems before production begins.

Government agencies and healthcare organizations also benefit from document analysis when processing applications, medical records, permits, forms, and official reports. Verifying document integrity before long-term storage helps reduce errors and maintain consistent records.

A PDF Analyzer is equally useful for developers. Before building editing tools such as watermarking, page rotation, cropping, metadata editing, or page extraction, developers often need to inspect the document structure to determine how it should be processed.

Because this application performs all analysis directly inside the browser, users can inspect sensitive documents without uploading them to external servers. This provides an additional layer of privacy while delivering instant results.

How PDF Analysis Works

A PDF Analyzer reads the uploaded document and extracts useful information from its internal structure.

Once the user selects a PDF file, the browser loads the document into memory. Instead of modifying the PDF, the application examines its contents and collects various types of information that can later be displayed in a structured report.

The analysis begins by reading the document itself. Basic properties such as the filename, total number of pages, and file size are identified immediately.

Next, the application extracts metadata including the document title, author, subject, keywords, creator, producer, creation date, modification date, and PDF version.

The analyzer can also inspect security-related properties to determine whether the document is password protected or contains restrictions on printing, copying, or editing.

After processing the document structure, the application examines each page individually. It can count words, characters, images, fonts, estimate reading time, calculate speaking time, and even perform sentiment analysis on extracted text when OCR is enabled.

If the uploaded document consists of scanned pages instead of selectable text, OCR can be used to recognize text before analysis begins.

Once all information has been collected, the application generates a complete report that can be viewed inside the browser or exported as a PDF, JSON, CSV, or text file.

Since the entire workflow runs locally, the original document remains on the user's device throughout the process.

Project Setup

We'll build this project using standard web technologies.

Create the following files:

pdf-analyzer/

│── index.html

│── style.css

│── script.js

Next, include the required libraries inside index.html.

These libraries provide everything needed for PDF loading, rendering, OCR processing, and report visualization.

What Library Are We Using?

This project combines several JavaScript libraries because no single library can perform every type of PDF analysis.

The primary library is PDF-lib, which allows the application to load PDF documents and access important document properties such as metadata and page information. It's lightweight, fast, and runs entirely inside modern browsers.

The project also uses PDF.js to render document pages for previews. This enables users to visually inspect uploaded PDFs before running the analysis.

For scanned documents that don't contain selectable text, Tesseract.js provides Optical Character Recognition (OCR). It recognizes text directly inside the browser, making it possible to analyze scanned PDFs without requiring any server-side processing.

To visualize analysis results, we'll use Chart.js for generating simple graphs and statistics such as word counts, sentiment distribution, and other document metrics.

Together, these libraries create a powerful browser-based PDF Analyzer capable of extracting metadata, rendering previews, recognizing scanned text, generating statistics, and exporting detailed analysis reports while keeping every document completely private.

Creating the Upload Interface

Every PDF workflow begins with selecting a document. Before any analysis can take place, users need a simple and reliable way to upload one or more PDF files into the browser.

A good upload interface should clearly indicate that only PDF documents are accepted while supporting both drag-and-drop uploads and the traditional file picker. This makes the tool easy to use regardless of whether users are working on a desktop or a mobile device.

In this project, the upload area acts as the entry point for the entire analysis process. When a user selects a PDF, the browser validates the file type, loads the document into memory, and prepares it for previewing and analysis. Since everything happens locally, the original PDF never leaves the user's device.

Our upload component displays a drag-and-drop area, a browse button, and helpful instructions that guide users through the first step of the workflow.

Here's the HTML for the upload area:



    

        
            ☁
        

        Drag & Drop PDF Here

        Or click to browse file

Next, register the file input and handle PDF selection.

const pdfInput = document.getElementById("pdfInput");

pdfInput.addEventListener("change", async (event) => {

    const file = event.target.files[0];

    if (!file) return;

    if (file.type !== "application/pdf") {

        alert("Please select a valid PDF file.");

        return;

    }

    loadPDF(file);

});

This validation prevents unsupported file types from being processed while ensuring the application only loads valid PDF documents.

After the upload interface is complete, users can immediately select a document and move to the preview stage.

Previewing Uploaded PDF Pages

Once a PDF has been uploaded, it's helpful to display a visual preview before starting the analysis. This allows users to verify that they selected the correct document and quickly inspect its pages.

Instead of showing only the file name, our application renders thumbnail previews of every page in the PDF. Users can scroll through the thumbnails to inspect the document and confirm that all pages loaded successfully.

Displaying previews also improves the user experience because it gives immediate visual feedback while the document is being prepared for analysis.

The browser uses PDF.js to render each page as a canvas before converting it into an image that can be displayed inside the page preview grid.

The following code loads the PDF document:

const pdf = await pdfjsLib.getDocument({

    data: await file.arrayBuffer()

}).promise;

Next, render each page:

for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++) {

    const page = await pdf.getPage(pageNumber);

    const viewport = page.getViewport({

        scale: 0.35

    });

    const canvas = document.createElement("canvas");

    const context = canvas.getContext("2d");

    canvas.width = viewport.width;

    canvas.height = viewport.height;

    await page.render({

        canvasContext: context,

        viewport

    }).promise;

    previewContainer.appendChild(canvas);

}

Each page is rendered independently, making it possible to preview documents containing dozens or even hundreds of pages.

The preview shown in this project displays all page thumbnails together, making it easy to verify page order before continuing.

Configuring Analysis Settings

Before analyzing the document, users can customize how the application should examine the PDF.

Different documents require different levels of analysis. Some users may only need basic information such as the page count and metadata, while others may want detailed statistics about extracted text, embedded images, fonts, security permissions, and OCR results.

To support these different scenarios, the PDF Analyzer provides several configurable options before processing begins.

The first option allows users to choose which pages should be analyzed. They can analyze every page in the document or specify a custom page range when only certain pages are relevant.

For scanned PDFs, OCR can be enabled to recognize text that's stored as images rather than selectable characters. Users can also select the OCR language before processing starts.

Finally, the application offers multiple analysis levels. Basic mode extracts essential document information such as metadata and security properties. Standard mode additionally collects text and image statistics. Advanced mode performs the most detailed inspection available, including fonts, page-level statistics, OCR processing, and sentiment analysis.

The analysis settings panel gives users complete control over how the document should be processed while keeping the interface simple and easy to understand.

Here's the HTML used for the settings panel:

Users can also enable OCR when analyzing scanned PDF documents:

const enableOCR = document.getElementById("enableOCR").checked;

const language = document.getElementById("ocrLanguage").value;

if (enableOCR) {

    console.log("OCR Enabled");

    console.log(language);

}

Finally, capture the selected analysis level:

const level = document.getElementById("analysisLevel").value;

switch (level) {

    case "basic":

        runBasicAnalysis();

        break;

    case "standard":

        runStandardAnalysis();

        break;

    case "advanced":

        runAdvancedAnalysis();

        break;

}

These settings allow the application to adapt to many different types of PDF documents, from simple text files to complex scanned reports containing images, metadata, and security restrictions.

Analyzing the PDF

Once the PDF has been uploaded, previewed, and the analysis options have been configured, the application is ready to examine the document.

Unlike editing tools that modify pages, a PDF Analyzer inspects the document and extracts useful information without changing the original file. The analyzer reads the PDF structure, examines each page, and collects information that can later be displayed in a detailed report.

The analysis begins by loading the uploaded document into memory. From there, the application extracts basic information such as the filename, file size, total number of pages, and document validity. It then reads metadata including the title, author, subject, creator, producer, creation date, modification date, and PDF version.

Depending on the selected analysis level, the application can also inspect security permissions, count words and characters, estimate reading time, identify embedded images, list fonts used throughout the document, and perform OCR on scanned PDFs. When OCR is enabled, the analyzer converts scanned images into searchable text before calculating document statistics.

Because the application processes everything inside the browser, users receive instant results while maintaining complete privacy.

The first step is loading the uploaded PDF:

async function analyzePDF(file){

    const bytes = await file.arrayBuffer();

    const pdf = await PDFLib.PDFDocument.load(bytes);

    return pdf;

}

Next, extract the document metadata:

const metadata = {

    title: pdf.getTitle(),

    author: pdf.getAuthor(),

    subject: pdf.getSubject(),

    creator: pdf.getCreator(),

    producer: pdf.getProducer(),

    keywords: pdf.getKeywords(),

    creationDate: pdf.getCreationDate(),

    modificationDate: pdf.getModificationDate()

};

Basic document information is also collected:

const fileInfo = {

    fileName: file.name,

    fileSize: file.size,

    totalPages: pdf.getPageCount(),

    valid: true

};

If the user selects Advanced Analysis, additional routines extract page statistics, fonts, images, OCR results, and text analysis:

if(selectedLevel === "advanced"){

    analyzeFonts();

    analyzeImages();

    analyzeText();

    performOCR();

}

Once every analysis step has finished, the application combines the collected information into a single report object that will be displayed in the next stage.

Displaying the Analysis Report

After processing is complete, the application presents the collected information inside a structured report.

Instead of showing raw JSON or technical output, the report organizes related information into separate cards. This layout makes it much easier for users to understand large amounts of document information.

The first section displays basic document information, including the filename, file size, total number of pages, and validation status.

The metadata section contains properties such as the document title, author, subject, keywords, creator, producer, PDF version, creation date, and modification date.

Security information indicates whether the document is password protected and whether printing, copying, or modification restrictions are present.

When text analysis is enabled, the report includes the total word count, character count, average words per page, estimated reading time, and estimated speaking time. If OCR has been performed, the extracted text is also analyzed to calculate sentiment statistics.

Additional cards display image information, embedded fonts, and page-by-page extracted text for users who need a deeper inspection of the document.

The following example creates a simple report section:

function renderBasicInfo(info){

    document.getElementById("fileName").textContent = info.fileName;

    document.getElementById("pageCount").textContent = info.totalPages;

    document.getElementById("fileSize").textContent = info.fileSize;

}

Rendering the metadata is straightforward:

function renderMetadata(metadata){

    title.innerText = metadata.title;

    author.innerText = metadata.author;

    creator.innerText = metadata.creator;

    producer.innerText = metadata.producer;

}

Page-wise extracted content can also be displayed:

pages.forEach((page,index)=>{

    createPageCard(

        index + 1,

        page.text

    );

});

Organizing the results into individual sections allows users to quickly locate the information they need without scrolling through large blocks of text.

Exporting the Analysis Report

After reviewing the analysis results, users often need to save the report for future reference or share it with colleagues.

To support different workflows, the PDF Analyzer allows the report to be exported in several formats. Depending on the user's needs, the report can be downloaded as a PDF document, JSON file, CSV spreadsheet, or plain text file.

PDF reports are useful for documentation and sharing with clients or team members. JSON exports are ideal for developers who want to process the analysis programmatically. CSV files can be opened in spreadsheet applications for further analysis, while text files provide a simple human-readable version of the report.

Providing multiple export formats makes the analyzer suitable for business users, developers, researchers, and system administrators alike.

The following example creates a JSON export:

const report = JSON.stringify(

    analysisResult,

    null,

    2

);

Create a downloadable file:

const blob = new Blob(

    [report],

    {

        type:"application/json"

    }

);

Generate the download link:

const url = URL.createObjectURL(blob);

const link = document.createElement("a");

link.href = url;

link.download = "analysis-report.json";

link.click();

The export menu allows users to choose the most appropriate output format before downloading the completed report.

Demo: How the PDF Analyzer Works

Step 1: Upload Your PDF File

The process begins by uploading a PDF document using either the drag-and-drop area or the file selection button.

Once a file is selected, the browser validates that it's a PDF before loading it into memory. Because the application runs entirely inside the browser, the uploaded document never leaves the user's device, making the tool suitable for confidential business reports, contracts, invoices, research papers, legal documents, and other sensitive files.

After the PDF is loaded successfully, the application prepares it for page preview generation and document analysis.

Step 2: Preview Uploaded PDF Pages

After the document has been loaded, the application generates page previews for the uploaded PDF.

Displaying page thumbnails allows users to confirm that the correct file has been selected before analysis begins. Users can quickly browse through the document, inspect page order, and verify that every page has loaded successfully.

This visual preview also helps identify scanned pages, blank pages, or unexpected formatting issues before processing.

Step 3: Configure Analysis Settings

Next, users configure how the PDF should be analyzed.

The tool allows users to choose whether every page or only a specific page range should be processed. For scanned PDFs, OCR can be enabled to recognize text stored as images, and users can select the appropriate recognition language.

The application also offers multiple analysis levels. Basic mode extracts essential document properties, Standard mode adds text and image statistics, and Advanced mode performs a more detailed inspection that includes fonts, OCR, page-level information, sentiment analysis, and additional document insights.

These settings allow users to customize the analysis based on the type of PDF they are working with.

Step 4: Analyze the PDF

Once the settings have been reviewed, users simply click the Analyze PDF button.

The browser reads the uploaded document and extracts the selected information. Depending on the chosen analysis level, the application examines metadata, security settings, page information, extracted text, fonts, embedded images, and OCR results.

Although large documents may require a few additional seconds, the entire analysis is completed locally without uploading the PDF to a remote server.

Step 5: Review the Analysis Report

After processing is complete, the application displays a comprehensive analysis report.

The report is divided into multiple sections that make it easy to inspect different aspects of the document. Users can review basic document information, metadata, security settings, extracted text statistics, page information, fonts, embedded images, OCR results, estimated reading time, speaking time, and sentiment analysis.

Each section is organized into individual cards so that important information can be located quickly.

Step 6: Review Page-Level Analysis

For users who need more detailed information, the application also displays page-by-page analysis.

Each page can include extracted text, OCR output, word count, image statistics, page dimensions, and additional information collected during processing.

This level of detail is especially useful when analyzing large reports, scanned books, research papers, contracts, technical documentation, and multi-page business documents.

Step 7: Export the Analysis Report

After reviewing the analysis, users can export the report for future reference.

The tool supports multiple export formats, including PDF, JSON, CSV, and plain text. This allows developers, researchers, businesses, and system administrators to choose the format that best fits their workflow.

Exported reports can be archived, shared with team members, imported into other systems, or used for additional processing.

Once the desired format is selected, the browser generates the report and downloads it instantly.

Important Notes from Real-World Use

A PDF Analyzer can process everything from a single-page document to large reports containing hundreds of pages. While modern browsers handle most documents efficiently, larger files containing high-resolution images or scanned pages may require additional processing time, especially when OCR is enabled.

Before starting the analysis, it's good practice to validate the uploaded file.

if (file.type !== "application/pdf") {

    alert("Please upload a valid PDF document.");

    return;

}

If OCR is enabled, remember that recognizing text from scanned pages takes longer than extracting text from a standard searchable PDF. Users should only enable OCR when it's actually needed.

if(enableOCR){

    console.log("Running OCR Analysis...");

}

When analyzing very large documents, processing pages individually helps reduce memory usage and keeps the browser responsive.

for(let page = 1; page <= pdf.numPages; page++){

    analyzePage(page);

}

Before exporting the report, review the extracted information to ensure metadata, text statistics, page information, and OCR results are accurate.

Common Mistakes to Avoid

One common mistake is running OCR on documents that already contain selectable text.

OCR is designed for scanned PDFs where text exists only as images. Running OCR on searchable PDFs increases processing time without improving the analysis.

if(pdfContainsText){

    enableOCR = false;

}

Another mistake is selecting the wrong analysis level.

For example, users who only need metadata and document properties can choose Basic Analysis instead of Advanced Analysis, which performs additional processing such as OCR, font inspection, sentiment analysis, and image detection.

const analysisLevel = "basic";

console.log(analysisLevel);

Some users also forget to verify the page selection before starting the analysis.

When working with large reports, analyzing only the required pages can significantly reduce processing time.

const pageRange = "1-20";

console.log(pageRange);

Finally, always review the generated report before exporting it.

A quick inspection helps verify that metadata, page statistics, OCR output, document properties, and extracted text are accurate before downloading the final report.

Taking a few extra moments to validate the results can save considerable time when working with large document collections.

Conclusion

In this tutorial, you built a browser-based PDF Analyzer using JavaScript.

You learned how to upload PDF files, preview document pages, configure analysis options, inspect metadata, analyze document structure, extract text, perform OCR, generate detailed reports, and export the analysis in multiple formats directly from the browser.

More importantly, you saw how modern browsers can inspect complex PDF documents without requiring a backend server or uploading files to third-party services.

This approach keeps document analysis fast, private, and secure while giving users valuable insights into the contents and structure of their PDF files.

You can try the complete implementation here:

PDF Analyzer: https://allinonetools.net/pdf-analyzer/

Once you understand this workflow, you can extend the project further by adding AI-powered document summarization, keyword extraction, duplicate document detection, document comparison, accessibility analysis, compliance checking, digital signature validation, or advanced reporting dashboards.

How to Build a Browser-Based PDF Margin Tool Using JavaScript

Bhavin Sheth — Wed, 01 Jul 2026 16:28:38 +0000

Adding margins to a PDF is a common task when preparing documents for printing, binding, archiving, or sharing professionally. While many PDF editors include this feature, they often require installing desktop software or uploading files to an online service.

In this tutorial, you'll learn how to build a browser-based PDF Add Margins Tool using JavaScript. The application allows users to upload a PDF, preview its pages, configure custom margin values, choose measurement units, apply preset margin sizes, select specific pages, and generate an updated PDF directly inside the browser.

Everything runs locally on the user's device using JavaScript, which means documents remain private and no backend server is required. This approach provides fast processing while giving users complete control over how margins are applied.

By the end of this guide, you'll understand how to work with PDF pages, create new page dimensions, reposition existing content, and export a new PDF with the desired margins.

Why PDF Margins Are Useful
How PDF Margin Editing Works
Project Setup
What Library Are We Using?
Creating the Upload Interface
Previewing Uploaded PDF Pages
Configuring Margin Settings
Applying the Margins
Generating the Updated PDF
Demo: How the Add Margins Tool Works
Important Notes from Real-World Use
Common Mistakes to Avoid
Conclusion

Why PDF Margins Are Useful

PDF documents are designed to preserve their appearance across different devices and printers, but that doesn't always mean they're ready for every use case. Many PDFs are created with very little white space around the content, making them difficult to print, bind, annotate, or archive.

Adding margins creates extra space around the page without changing the document's content. This additional white space improves readability, prevents content from being clipped during printing, and provides room for notes, signatures, stamps, or hole punching.

One of the most common uses for PDF margins is printing. Most home and office printers can't print all the way to the edge of the paper, so documents with little or no margin may lose important text or images. Adding margins ensures the entire page fits safely within the printer's printable area.

Margins are also essential when preparing books, manuals, reports, and training materials for binding. Without enough inner spacing, text can disappear into the binding, making the document difficult to read. Publishers often use larger inner margins or mirror margins to create professional-looking printed books.

Businesses regularly add margins before printing invoices, quotations, purchase orders, financial reports, contracts, and presentations. The extra space makes documents easier to file and leaves room for handwritten notes, approval stamps, signatures, or comments.

Students, teachers, and researchers also benefit from margin editing. Universities and educational institutions often require assignments, dissertations, and research papers to follow specific formatting guidelines, including minimum page margins. Instead of recreating the document, users can simply add the required spacing before submission.

Government offices, legal firms, and healthcare organizations frequently work with PDFs that must meet strict printing or filing standards. Adding consistent margins helps ensure forms, applications, agreements, medical records, and official documents are easier to print, review, and archive.

Another practical example comes from e-commerce businesses. Sellers who process hundreds of orders from platforms such as Amazon, Flipkart, or Meesho often print invoices, packing slips, shipping labels, and courier documents in bulk. If the content is positioned too close to the paper edges, some printers may crop important information. Adding consistent margins before printing helps prevent this issue and ensures every document prints correctly.

Because this tool works entirely inside the browser, users can add margins to sensitive PDF documents without uploading them to external servers. This keeps document processing fast, private, and secure while producing professional-looking PDFs that are ready for printing, sharing, binding, or long-term storage.

How PDF Margin Editing Works

Unlike editing text inside a PDF, adding margins doesn't modify the original content. Instead, the application creates a larger page and places the existing page content inside it with the specified spacing around each edge.

When a user uploads a document, the browser first reads every page in the PDF. The application calculates the current page dimensions and determines how much additional space should be added to the top, bottom, left, and right sides.

Depending on the selected settings, the tool can either expand the overall page size while preserving the original content dimensions or keep the existing page size and reposition the content within the available area.

Users can also choose whether the margin changes should be applied to every page or only selected page ranges. Mirror margins are available for printed books where the inner margin alternates between left and right pages to leave room for binding.

After processing every selected page, the browser generates a brand-new PDF containing the updated page dimensions and revised content positioning. Because everything happens locally, no files leave the user's computer during the process.

Project Setup

Before writing any JavaScript, create a simple project structure for the application.

Create a new project folder and add the following files:

pdf-add-margins/
│
├── index.html
├── style.css
├── script.js
└── assets/

The HTML file contains the upload area, preview section, margin settings, and download interface.

The CSS file styles the application and creates the responsive layout used throughout the project.

The JavaScript file handles file uploads, PDF processing, page rendering, margin calculations, and generation of the updated document.

Because everything runs inside the browser, there's no need to configure a backend server or install server-side frameworks.

What Library Are We Using?

This project uses PDF-lib, one of the most popular JavaScript libraries for creating and editing PDF files directly in the browser.

PDF-lib allows developers to load existing PDF documents, create new pages, copy pages between documents, edit document metadata, rotate pages, resize pages, crop pages, add page numbers, insert images, draw text, and export completely new PDF files without relying on external software.

Install PDF-lib using npm:

npm install pdf-lib

Or include it directly from a CDN inside your HTML page:

Once the library is loaded, you can import the required objects:

const {
  PDFDocument
} = PDFLib;

Throughout this tutorial, PDF-lib will be responsible for loading uploaded documents, creating new page dimensions, repositioning page content according to the selected margins, and exporting the finished PDF.

Creating the Upload Interface

The first feature users interact with is the upload interface. A simple and intuitive upload area makes it easy to select a PDF file using either drag-and-drop or the traditional file picker.

In this project, the upload section accepts only PDF documents. Once a valid file is selected, the browser immediately begins loading the document and prepares it for previewing and margin editing.

The upload component also acts as the starting point for the entire workflow. Every action that follows (page preview, margin configuration, page selection, and PDF generation) depends on the uploaded file.

Because the application runs entirely inside the browser, the uploaded PDF never leaves the user's computer. This improves privacy while reducing processing time.

Here's a simple upload field:

Connect the upload button with JavaScript:

const input = document.getElementById("pdfFile");
const button = document.getElementById("selectPDF");

button.addEventListener("click", () => {
    input.click();
});

input.addEventListener("change", async (event) => {

    const file = event.target.files[0];

    if (!file) return;

    const bytes = await file.arrayBuffer();

    console.log("PDF Loaded", bytes);

});

The uploaded PDF is now available for rendering page previews and applying margin settings.

Upload Interface Demo

Previewing Uploaded PDF Pages

Once the PDF has been uploaded successfully, the next step is displaying its pages.

Showing page previews gives users confidence that the correct document has been selected before any changes are made. It also allows them to inspect each page and decide whether margins should be applied to the entire document or only to specific pages.

In this project, every page is rendered as a thumbnail. Users can quickly scroll through the document and verify page order before adjusting any settings.

For large documents, thumbnail previews make navigation much easier than displaying one full-size page at a time.

The browser renders each page directly from the uploaded PDF without sending the document to a server.

After loading the document, each page can be rendered individually.

const pdfDoc = await PDFDocument.load(pdfBytes);

const pages = pdfDoc.getPages();

console.log("Total Pages:", pages.length);

Each page is then displayed inside the preview gallery.

pages.forEach((page, index) => {

    console.log(`Rendering page ${index + 1}`);

});

After the previews are generated, users can move on to configuring the margin settings.

Preview Demo

Configuring Margin Settings

After verifying the uploaded document, users can configure exactly how the margins should be added.

Rather than applying one fixed margin to every document, the tool provides several options that make it suitable for different printing, publishing, and business workflows.

Users can enter custom values for the top, bottom, left, and right margins. These values can be measured in millimeters, pixels, or inches depending on the intended use.

For users who don't want to calculate measurements manually, the application also includes preset margin sizes such as None, Narrow, Normal, and Wide.

The tool supports applying margins to every page or only to a specific page range. This is especially useful when only certain pages require additional spacing.

For printed books and manuals, mirror margins can be enabled so that left and right pages automatically receive opposite inner margins for binding.

Users can also decide how the margin should be applied. Expanding the page size preserves the original content dimensions while increasing the overall page size. Alternatively, the existing page size can be maintained and the content repositioned within the available space.

All of these settings are configured before any processing begins, allowing users to preview and adjust everything in advance.

Example margin configuration:

const marginSettings = {

    top: 25.4,

    bottom: 25.4,

    left: 25.4,

    right: 25.4,

    unit: "mm",

    applyTo: "all",

    mirrorMargins: false,

    preset: "Normal",

    resizeMode: "Expand Page Size"

};

The selected values are then used while generating the updated PDF pages.

Margin Settings Demo

Applying the Margins

Once the margin settings have been configured, the application can begin processing the PDF.

Instead of modifying the original document directly, the tool creates a new page layout based on the selected margin values. The existing page content is then repositioned inside the newly calculated page dimensions.

This approach preserves the original document while generating a new PDF with additional white space around the content.

Depending on the selected resize mode, the application can either expand the page size to accommodate the new margins or keep the existing page size and reposition the content within the available printable area.

For documents containing multiple pages, the same settings can be applied to every page or only to a selected page range.

A simplified example looks like this:

const pages = pdfDoc.getPages();

pages.forEach((page) => {

    const { width, height } = page.getSize();

    const newWidth = width + leftMargin + rightMargin;

    const newHeight = height + topMargin + bottomMargin;

    page.setSize(newWidth, newHeight);

});

The application then adjusts the page content so it remains correctly positioned inside the new page dimensions.

page.translateContent(
    leftMargin,
    bottomMargin
);

This ensures the document content shifts into the correct position while leaving the requested space around the page edges.

Applying Margins Demo

Generating the Updated PDF

After every selected page has been processed, the browser creates a brand-new PDF containing the updated page sizes and margin layout.

The original PDF remains unchanged while the modified document is prepared for download.

Because everything happens locally, the generation process is usually very fast, even for multi-page documents.

Once processing is complete, the updated PDF is converted into downloadable bytes.

const pdfBytes = await pdfDoc.save();

A Blob object can then be created for downloading.

const blob = new Blob(
    [pdfBytes],
    {
        type: "application/pdf"
    }
);

const url = URL.createObjectURL(blob);

Finally, the browser starts the download.

const link = document.createElement("a");

link.href = url;

link.download = "updated-document.pdf";

link.click();

The generated PDF can also be previewed before downloading.

Users are able to review the updated document, rename the output file, view the total number of pages, check the final file size, and download the completed PDF when they are satisfied with the results.

Updated PDF Preview

Demo: How the Add Margins Tool Works

Step 1: Upload Your PDF File

The process begins by uploading a PDF document using either the drag-and-drop area or the file picker.

Once a file is selected, the browser validates that it's a PDF and loads it locally. Since all processing happens inside the browser, the document never leaves the user's device, making the tool suitable for confidential reports, contracts, invoices, and other sensitive documents.

After the file is loaded successfully, the application prepares the document for preview generation and margin editing.

Step 2: Preview Uploaded PDF Pages

After uploading the document, the application generates page previews directly inside the browser.

Displaying page thumbnails allows users to verify that the correct document has been selected before making any changes. For larger PDFs, the preview section also makes it easier to navigate through the document and inspect individual pages.

This step helps prevent mistakes before the margin settings are applied.

Step 3: Configure Margin Settings

Next, users configure how margins should be added to the document.

The tool allows custom values for the top, bottom, left, and right margins while also supporting predefined presets such as None, Narrow, Normal, and Wide.

Users can choose whether the margins should be applied to every page or only to selected page ranges. Mirror margins are available for printed books and documents that require binding.

Another useful option lets users decide whether the application should expand the overall page size or reposition the existing content while keeping the original page dimensions.

These settings provide complete control over how the final document will appear.

Step 4: Apply the Margins

After reviewing the selected settings, users simply click the Add Margins button.

The browser processes every selected page, calculates the new page dimensions, repositions the original content, and generates an updated PDF with the requested spacing around each page.

If users want to work with another document, the Start Over button clears the current session without requiring a page refresh.

Step 5: Preview the Updated PDF

Once processing has finished, the updated document is displayed inside the browser.

Users can review every page before downloading to ensure the margins have been applied correctly.

The preview section also includes page navigation controls, making it easy to browse through multi-page documents and confirm that every selected page has been processed successfully.

Reviewing the document before downloading helps catch formatting issues early and reduces the need for additional edits later.

Step 6: Download the Final PDF

After verifying the updated document, users can download the finished PDF.

The final output section displays useful information including the output filename, total number of pages, and file size. Users can rename the generated document before downloading it, making file organization much easier.

Once everything looks correct, the updated PDF can be downloaded and immediately used for printing, sharing, binding, archiving, or submitting to organizations that require specific page margins.

Important Notes from Real-World Use

Adding margins is generally a lightweight operation, but large PDF files containing hundreds of pages or high-resolution images may require additional processing time.

Before processing begins, it's a good idea to validate the uploaded file.

if (file.type !== "application/pdf") {
    alert("Please upload a valid PDF file.");
    return;
}

When working with large documents, verify the selected margin values before generating the final PDF.

console.log(`Top: ${topMargin}`);
console.log(`Bottom: ${bottomMargin}`);
console.log(`Left: ${leftMargin}`);
console.log(`Right: ${rightMargin}`);

If the document is intended for printing, preview the generated PDF to ensure that text, tables, images, and page numbers remain correctly positioned.

Because all processing happens locally, documents remain on the user's device throughout the entire workflow, making browser-based margin editing suitable for contracts, invoices, financial reports, legal documents, educational records, healthcare forms, and other confidential PDFs.

Common Mistakes to Avoid

One common mistake is using excessively large margin values that reduce the printable area more than necessary.

Always verify the selected measurements before generating the updated document.

if (leftMargin < 0 || rightMargin < 0) {
    alert("Margin values cannot be negative.");
}

Another mistake is forgetting to choose the correct page selection mode.

Sometimes only the first page or a specific page range requires additional margins, while the rest of the document should remain unchanged.

const applyTo = "all";

console.log(`Apply margins to: ${applyTo}`);

Users should also verify whether Expand Page Size or Keep Original Page Size is the correct option for their workflow. Choosing the wrong mode can affect the final layout when printing or sharing the document.

Finally, always review the generated PDF before downloading it.

Taking a few moments to inspect the updated pages helps confirm that the spacing is correct, page content remains properly aligned, and the document is ready for printing, binding, archiving, or distribution.

Conclusion

In this tutorial, you built a browser-based PDF Add Margins Tool using JavaScript.

You learned how to upload PDF files, preview document pages, configure custom margin settings, apply margins to selected pages, and generate updated PDF files directly inside the browser.

More importantly, you saw how modern browsers can perform PDF page layout modifications without requiring a backend server.

This approach keeps document processing fast, private, and easy to use while giving users complete control over page spacing.

You can try the live implementation here: AllInOneTools - Add Margin to PDF.

Once you understand this workflow, you can extend it further by adding features such as page cropping, resizing, page numbering, watermarking, document organization, metadata editing, and other advanced PDF editing capabilities.

How to Build a Browser-Based PDF Resizer Using JavaScript

Bhavin Sheth — Tue, 30 Jun 2026 00:06:56 +0000

PDF documents come in many different page sizes. Some are designed for A4 paper, while others use Letter, Legal, Tabloid, or custom dimensions. This can create problems when printing, sharing, archiving, or submitting documents to organizations that require a specific page format.

A PDF resizing tool solves this problem by allowing users to change the page dimensions of an existing PDF without recreating the document from scratch.

Whether you're preparing business reports, invoices, scanned documents, eBooks, presentations, or government forms, resizing pages helps ensure documents fit the required paper size while maintaining a professional appearance.

In this tutorial, you'll build a browser-based PDF Resizer using JavaScript. Users will be able to upload PDF files, preview document pages, choose preset or custom page sizes, configure scaling behavior, add page margins, and generate a resized PDF directly inside the browser.

Everything happens locally using JavaScript, so uploaded documents never leave the user's device. This improves privacy, eliminates server-side processing, and provides a faster experience.

By the end of this guide, you'll understand how browser-based PDF resizing works and how to build a practical tool that can be extended with additional document editing features.

Why PDF Resizing Is Useful
How PDF Resizing Works
Project Setup
What Library Are We Using?
Creating the Upload Interface
Previewing Uploaded PDF Pages
Configuring Resize Settings
Applying the Resize
Generating the Resized PDF
Demo: How the PDF Resize Tool Works
Important Notes from Real-World Use
Common Mistakes to Avoid
Conclusion

Why PDF Resizing Is Useful

PDF files are created for many different purposes, and not every document uses the same page dimensions. A presentation might be designed for widescreen viewing, an invoice could use Letter size, a government application may require A4 paper, and engineering drawings often use Legal or Tabloid formats.

When documents don't match the required page size, they can be difficult to print correctly. Content may appear cut off, excessive white space may be introduced, or the document may scale incorrectly during printing.

A PDF resizing tool helps solve these problems by allowing users to convert pages into standardized sizes without rebuilding the document.

This is especially useful in everyday situations. Businesses often receive invoices and contracts from different organizations that use different paper standards. Before storing or printing these documents, employees frequently resize them to a consistent format.

Students regularly download lecture notes, assignments, research papers, and ebooks from different sources. Converting these files to a common page size makes printing and reading much easier.

Graphic designers and publishers also resize PDFs before sending artwork for commercial printing, ensuring that documents match the required dimensions of the printing service.

One practical example comes from e-commerce businesses. Imagine a seller who receives hundreds of shipping labels every day from platforms like Amazon, Flipkart, or Meesho. Different marketplaces may generate labels using different paper sizes. Before printing them in bulk, the seller can resize every PDF to A4 so all labels print consistently without manual adjustments.

Government offices, banks, educational institutions, and legal firms also work with PDFs from multiple sources. Standardizing page sizes simplifies document management, digital archiving, scanning, and future editing.

Instead of recreating an entire document, resizing allows users to adapt existing PDFs quickly while preserving their original content.

How PDF Resizing Works

A PDF resizing tool changes the dimensions of one or more pages inside an existing PDF document while preserving the page content.

When a user uploads a PDF, the browser first reads the document and extracts information such as page count, page dimensions, and page objects. Instead of editing the original file directly, a new PDF is created with the selected page size, and each page is copied into the new document using the chosen scaling method.

Depending on the resize settings, the page content can be scaled to fill the page, stretched to match the new dimensions, centered without scaling, or cropped to fit the selected paper size.

Users can also choose whether the resize operation should apply to every page or only a specific page range. This is useful when only part of a document needs to be converted to another paper size.

Because all processing happens inside the browser, uploaded files remain on the user's device throughout the entire workflow. No documents are sent to external servers, making the tool suitable for confidential reports, contracts, invoices, educational documents, business records, and other sensitive files.

Project Setup

Create a new project folder for the PDF resizer.

A simple project structure looks like this:

pdf-resizer/
│── index.html
│── style.css
│── script.js
│── assets/

The HTML file contains the upload area, page preview, resize settings, and download section.

The CSS file handles the overall layout and responsive design.

The JavaScript file manages PDF loading, page previews, resize operations, and exporting the updated document.

Keeping the project organized makes it easier to add new features later, such as cropping, page rotation, watermarking, metadata editing, or PDF merging.

What Library Are We Using?

This project uses pdf-lib, one of the most popular JavaScript libraries for creating and editing PDF documents directly in the browser.

It allows developers to:

Read existing PDF files.
Create new PDF documents.
Copy pages between PDFs.
Resize pages.
Rotate pages.
Add text, images, and shapes.
Modify document metadata.
Export updated PDFs.

Unlike many online PDF services, pdf-lib works entirely in the browser and doesn't require a backend server.

Install the library using npm:

npm install pdf-lib

Or include it directly from a CDN:

Once loaded, the library exposes the PDFDocument object that is used throughout the application.

Example:

const { PDFDocument } = PDFLib;

Creating the Upload Interface

The first step is allowing users to upload a PDF document.

The interface includes a drag-and-drop area together with a traditional file picker so users can choose whichever method they prefer.

When a file is selected, JavaScript validates that it is a PDF before loading it into memory.

Here's a simple upload input:

Next, listen for file selection:

const upload = document.getElementById("pdfUpload");

upload.addEventListener("change", async (event) => {
    const file = event.target.files[0];

    if (!file) return;

    console.log(file.name);
});

Read the uploaded file:

const bytes = await file.arrayBuffer();

const pdfDoc = await PDFLib.PDFDocument.load(bytes);

At this point, the uploaded PDF is loaded into memory and is ready for preview generation and resizing.

Previewing Uploaded PDF Pages

After the document has been uploaded, the next step is generating page previews.

Displaying page thumbnails helps users confirm that the correct file has been selected before changing its size.

For multi-page PDFs, previewing every page also makes it easier to understand how the resize operation will affect the document.

Your tool displays thumbnails for every page, allowing users to visually inspect the PDF before making any modifications.

Developers can retrieve the total number of pages using pdf-lib:

const totalPages = pdfDoc.getPageCount();

console.log(totalPages);

Retrieve individual pages:

const pages = pdfDoc.getPages();

pages.forEach((page, index) => {
    console.log(`Page ${index + 1}`);
});

Once the pages are available, the application can generate preview thumbnails and display them inside the browser.

Users can then decide whether to resize the entire document or only selected pages.

Configuring Resize Settings

Once the PDF pages have been loaded, users need to configure how the document should be resized.

A flexible PDF resizing tool should support both standard paper sizes and custom dimensions while allowing users to control how the existing content fits inside the new page.

In this project, users can choose whether the resize operation should be applied to every page or only a specific page range.

For page dimensions, the tool supports popular paper formats such as A4, A5, Letter, Legal, Tabloid, and Square. If none of these meet the user's requirements, custom width and height values can also be entered.

Another important setting is content scaling. Depending on the document, users may want to fit the existing content inside the page, stretch it to fill the available space, keep the original size centered on the page, or crop the content to match the selected paper size.

The resize panel also includes margin controls so users can add additional spacing around the document if required.

Together, these settings provide complete control over the final page layout before generating the resized PDF.

Choosing Preset Paper Sizes

Many users simply want to convert documents into common paper formats.

Instead of entering page dimensions manually, the tool provides several predefined page sizes that can be selected with a single click.

These presets are especially useful when preparing PDFs for printing, business reports, contracts, government forms, books, or educational documents.

Using Custom Page Sizes

If a standard paper size isn't suitable, users can enter custom page dimensions.

The width and height can be specified using supported measurement units, allowing documents to match exact printing or publishing requirements.

The Lock Aspect Ratio option ensures that the document maintains its original proportions while resizing.

Selecting Content Scaling

Different documents require different scaling behavior.

The tool offers several scaling modes so users can choose the most appropriate layout for their document.

For example, Fit to Page scales content while preserving proportions, Stretch to Fit expands the content to fill the page completely, Keep Original Size (Center) places the original page in the center without scaling, and Crop to Fit trims overflowing content to match the selected page dimensions.

Example Resize Settings

Here's a simplified configuration object that stores the selected resize options.

const resizeOptions = {
    width: 210,
    height: 297,
    unit: "mm",
    scaleMode: "fit",
    applyTo: "all"
};

The selected values are then used while generating the resized PDF.

Applying the Resize

After the resize settings have been configured, the application creates a new PDF document and copies each page into it using the selected dimensions.

Each page is resized according to the chosen paper size and scaling mode before being added to the new document.

A simplified example looks like this:

const newPdf = await PDFLib.PDFDocument.create();

const copiedPages = await newPdf.copyPages(
    pdfDoc,
    pdfDoc.getPageIndices()
);

copiedPages.forEach(page => {
    page.setSize(595, 842);

    newPdf.addPage(page);
});

The dimensions shown above represent an A4 page measured in PDF points.

Developers can replace these values with custom dimensions depending on the selected paper size.

After every page has been resized, the new document is ready for export.

Generating the Resized PDF

Once all pages have been processed, the updated document is converted into a downloadable PDF.

The browser creates a binary PDF file and generates a temporary download link without sending the document to a server.

Saving the resized document is straightforward.

const pdfBytes = await newPdf.save();

const blob = new Blob([pdfBytes], {
    type: "application/pdf"
});

const url = URL.createObjectURL(blob);

The generated URL can then be attached to a download button.

const link = document.createElement("a");

link.href = url;
link.download = "resized-document.pdf";

link.click();

The user immediately receives the updated document with the newly selected page dimensions.

Demo: How the PDF Resize Tool Works

Step 1: Upload Your PDF File

The process begins by uploading a PDF document into the browser.

Users can either drag and drop a file into the upload area or choose a document using the file picker.

Once selected, the browser validates the file type and loads the document locally without uploading it to a server. This keeps the entire resizing process private and ensures sensitive documents remain on the user's device.

Step 2: Preview Uploaded PDF Pages

After the PDF has been loaded, the tool generates page previews for the entire document.

Displaying thumbnails allows users to verify that the correct document has been selected before making any modifications.

Users can also select individual pages if they only want to resize certain parts of the document.

This preview step helps avoid mistakes before generating the final PDF.

Step 3: Configure Resize Settings

Next, users configure how the document should be resized.

The tool supports standard paper sizes such as A4, A5, Letter, Legal, Tabloid, and Square, while also allowing completely custom dimensions.

Users can specify whether the resize operation should apply to all pages or only selected page ranges.

Additional options include locking the aspect ratio, choosing page orientation, selecting a content scaling mode, and adding page margins when necessary.

These settings provide complete control over the final document layout before processing begins.

Step 4: Generate the Resized PDF

After reviewing the selected options, users simply click the Resize PDF button.

The browser processes every selected page according to the configured paper size and scaling method.

Because the entire operation runs locally, even large documents can usually be processed within a few seconds depending on the number of pages.

If users want to process another document, the Start Over button clears the current session and returns the tool to its initial state.

Step 5: Preview the Resized PDF

Once processing is complete, the newly generated PDF is displayed inside the browser.

Users can review the resized pages before downloading the document.

The preview section includes page navigation controls, making it easy to move through multi-page PDFs and confirm that every page has been resized correctly.

Reviewing the output before download helps catch formatting issues and ensures the selected page size and scaling options produced the expected results.

Step 6: Download the Final PDF

After confirming the resized document, users can download the updated PDF.

The final output section displays useful information such as the output filename, total number of pages, and file size.

Users may also rename the document before downloading it, making it easier to organize files after processing.

The Download PDF button saves the resized document, while the Start Over button allows users to upload another PDF without refreshing the page.

Important Notes from Real-World Use

Resizing PDF pages can significantly improve document compatibility, but it's important to validate uploaded files before processing.

For example:

if (file.type !== "application/pdf") {
    alert("Please upload a valid PDF file.");
    return;
}

Very large PDF files may require additional processing time depending on the number of pages and embedded images.

When resizing documents containing hundreds of pages, processing them page by page can help reduce memory usage.

Before generating the final PDF, it's also a good idea to verify the selected page size.

For example:

console.log(`Selected Size: ${pageSize}`);
console.log(`Scale Mode: ${scaleMode}`);

Previewing the resized document before downloading helps ensure that text, images, and page layouts appear correctly.

Because everything happens inside the browser, uploaded documents remain on the user's device throughout the entire resizing process.

Common Mistakes to Avoid

One common mistake is selecting a page size that doesn't match the intended output.

For example, resizing a wide presentation directly to A4 portrait may cause content to become too small or appear compressed.

Always verify the selected paper size before processing.

if (pageWidth <= 0 || pageHeight <= 0) {
    alert("Invalid page dimensions.");
}

Another common mistake is choosing the wrong content scaling mode.

Stretching content may distort images and text, while cropping may remove important information from the page.

Users should preview different scaling modes before generating the final PDF.

It's also important to check whether the resize operation should apply to every page or only selected pages.

const applyMode = "all";

console.log(`Resize Mode: ${applyMode}`);

Finally, always review the generated PDF before downloading it.

Taking a few seconds to inspect page layouts, margins, and scaling can prevent unnecessary reprocessing later.

Conclusion

In this tutorial, you built a browser-based PDF Resizer using JavaScript.

You learned how to upload PDF files, preview document pages, configure page sizes, adjust scaling behavior, resize pages, and generate downloadable PDF files directly inside the browser.

More importantly, you saw how modern browsers can perform PDF page resizing locally without requiring a backend server.

This approach keeps document processing fast, private, and easy to use while giving users complete control over the final document layout.

If you'd like to see a working example, try the PDF Resize Tool and explore how PDF pages can be resized directly in your browser.

Once you understand this workflow, you can extend it further with features like page cropping, rotation, watermarking, metadata editing, page numbering, document organization, and other advanced PDF editing capabilities.

How to Build a Browser-Based PDF Reverse Tool Using JavaScript

Bhavin Sheth — Wed, 24 Jun 2026 20:37:18 +0000

PDF files are often created by combining scans, exporting documents from different systems, or processing large batches of pages. In many cases, the final PDF ends up with pages arranged in the wrong order.

A PDF Reverse Tool solves this problem by flipping the page sequence automatically. Instead of manually rearranging pages one by one, users can reverse an entire document in seconds.

In this tutorial, you'll learn how to build a browser-based PDF Reverse Tool using JavaScript and PDF-lib. The tool allows users to upload PDFs, preview pages, choose different reverse modes, generate a reversed document, and download the updated PDF directly from the browser.

You can try the live tool here:

Reverse PDF Tool: https://allinonetools.net/reverse-pdf/

Why Reversing PDF Pages Is Useful
How PDF Page Reversal Works
Project Setup
What Library Are We Using?
Creating the Upload Interface
Previewing Uploaded PDF Pages
Configuring Reverse Options
Applying the Reverse Operation
Generating the Reversed PDF
Why PDF Reversal Is Useful in Real-World Documents
Demo: How the Reverse PDF Tool Works
Important Notes from Real-World Use
Common Mistakes to Avoid
Conclusion

Why Reversing PDF Pages Is Useful

PDF page reversal changes the order of pages inside a document.

For example, a 10-page PDF normally follows this sequence: Page 1 → Page 2 → Page 3 → Page 4, and so on.

After reversal, the order becomes Page 10 → Page 9 → Page 8 → Page 7, and on down.

This process is useful when scanned documents are imported in the wrong sequence, when merged files need to be reordered, or when printing workflows require reverse page order.

Instead of rearranging pages manually, users can reverse the entire document instantly.

How PDF Page Reversal Works

A PDF Reverse Tool reads the uploaded PDF file, extracts its pages, rearranges the page order according to the selected reverse mode, and creates a new downloadable PDF.

The browser loads the document, processes page indexes, copies pages into a new PDF document, and exports the updated file.

Everything happens directly inside the browser. No files are uploaded to external servers, helping maintain privacy and improving processing speed.

Project Setup

Create a simple project structure:

pdf-reverse-tool/
│
├── index.html
├── style.css
├── app.js
│
└── libs/
    └── pdf-lib.min.js

Load PDF-lib:

What Library Are We Using?

This project uses PDF-lib.

PDF-lib is a powerful JavaScript library that allows developers to create, modify, merge, split, organize, and export PDF documents directly inside the browser.

For a page reversal tool, PDF-lib provides everything needed to read page indexes, copy pages, rearrange document structure, and generate updated PDFs.

Example:

const pdfDoc = await PDFLib.PDFDocument.load(pdfBytes);

const totalPages = pdfDoc.getPageCount();

console.log(totalPages);

Creating the Upload Interface

The first step is allowing users to upload a PDF document.

A drag-and-drop upload area provides a simple and user-friendly experience while supporting traditional file selection.

Example HTML:

Example JavaScript:

document
  .getElementById("pdfFile")
  .addEventListener("change", loadPDF);

Previewing Uploaded PDF Pages

After a PDF is uploaded, users should be able to preview document pages before performing any operations.

Page previews help users verify that the correct file was selected and make it easier to understand how the reversal process will affect the document.

The preview section displays page thumbnails and allows users to navigate between pages before processing.

Example:

const totalPages = pdfDoc.getPageCount();

for(let i = 0; i < totalPages; i++) {
   console.log(`Rendering page ${i + 1}`);
}

Configuring Reverse Options

The Reverse PDF Tool supports multiple reversal modes.

Users can reverse an entire PDF document or reverse only a specific range of pages.

For example, a user may want to reverse pages 10 through 20 while leaving the rest of the document unchanged.

The tool also includes additional document-editing features such as rotating pages, adding blank pages, and importing another PDF before generating the final output.

This flexibility makes the tool useful for both simple and advanced document workflows.

Example configuration:

const reverseMode = "full";

const startPage = 5;
const endPage = 15;

Applying the Reverse Operation

Once the user selects the desired reverse mode, the tool generates a new page order.

For a full document reversal, the last page becomes the first page and the first page becomes the last page.

Example:

const reversedIndices = [];

for(let i = totalPages - 1; i >= 0; i--) {
    reversedIndices.push(i);
}

The generated page order is then used when creating the final PDF.

Generating the Reversed PDF

PDF-lib allows pages to be copied into a new PDF document in any order.

The reversal process creates a new PDF and inserts pages according to the generated sequence.

Example:

const reversedIndices = [];

for (let i = totalPages - 1; i >= 0; i--) {
  reversedIndices.push(i);
}

const copiedPages = await pdfDoc.copyPages(
  sourcePdf,
  reversedIndices
);

copiedPages.forEach(page => {
  pdfDoc.addPage(page);
});

Once processing is complete, the updated PDF is exported directly inside the browser.

Why PDF Reversal Is Useful in Real-World Documents

Many documents are accidentally created in reverse order during scanning, merging, exporting, or printing workflows.

A common example occurs when users scan large stacks of paper using automatic document feeders. Depending on how pages are loaded into the scanner, the resulting PDF may place the final page first and the first page last.

Educational institutions frequently encounter this issue when scanning answer sheets, student records, assignments, admission documents, and examination papers.

Businesses often receive contracts, invoices, purchase orders, reports, and legal documents that arrive in reverse sequence after scanning. A PDF reversal tool restores the intended reading order instantly.

The feature is particularly useful for e-commerce businesses.

For example, a seller may receive hundreds of shipping labels, invoices, packing slips, or courier documents from marketplaces such as Flipkart, Amazon, Meesho, or other platforms. Sometimes these documents are generated in reverse order compared to the packing workflow.

Instead of manually rearranging pages, the seller can reverse the entire PDF and immediately print documents in the correct sequence. This saves significant time when processing large batches of orders.

Accounting teams, warehouse staff, administrative departments, legal offices, publishers, and document management teams regularly use page reversal to streamline document preparation.

The result is a cleaner workflow, reduced manual effort, and a document that is easier to read, print, archive, and distribute.

Demo: How the Reverse PDF Tool Works

Step 1: Upload Your PDF File

Users start by uploading a PDF document using either the drag-and-drop area or the file selection button.

Once the file is selected, the browser reads the PDF locally and prepares it for processing. No files are uploaded to external servers, helping maintain privacy and security.

The tool automatically loads the document structure and extracts page information required for preview generation and page reversal.

Step 2: Preview Uploaded Pages

After the PDF is loaded, the tool generates page previews directly inside the browser.

Users can browse through the document pages before making any changes. This helps verify that the correct file has been uploaded and allows users to understand the current page sequence.

The preview section also provides page navigation controls so users can move between pages and inspect the document before processing.

Step 3: Select Reverse Mode

Next, users choose how the page reversal should be applied.

The tool supports two reversal modes.

The first option reverses the entire document, changing the page order from first-to-last into last-to-first.

The second option allows users to specify a page range and reverse only that section while keeping the rest of the document unchanged.

Additional document editing options such as rotating pages, adding blank pages, importing another PDF, and resetting the document are also available before processing.

Step 4: Review Pages Before Processing

Before generating the final PDF, users can review all page thumbnails and verify the selected reversal settings.

This step is especially useful when working with large reports, scanned documents, contracts, books, manuals, invoices, and merged PDFs where page order is important.

Taking a few moments to verify the document can prevent mistakes and reduce the need for reprocessing later.

Step 5: Reverse the Document

After confirming the settings, users click the Reverse PDF button.

The browser processes the selected pages and generates a new page sequence based on the chosen reversal mode.

Since everything happens locally inside the browser, processing is usually very fast and no document data leaves the user's device.

Step 6: Preview the Reversed PDF

Once processing is complete, the tool displays the newly generated PDF.

Users can browse through the updated document using the page navigation controls and verify that the page order has been reversed correctly.

This preview stage provides a final opportunity to inspect the output before downloading.

Step 7: Download the Final PDF

After confirming the results, users can download the updated document.

The final output section displays useful file information including the generated filename, total number of pages, and file size as well as file rename option before download.

This information helps users quickly verify that the output matches expectations before saving the file.

The document can then be downloaded and used immediately for printing, sharing, archiving, business workflows, educational records, legal documents, or other PDF-related tasks.

Important Notes from Real-World Use

Large PDF files may require additional processing time, especially when reversing documents containing hundreds or thousands of pages.

When processing large PDFs, it's a good practice to validate the uploaded file before loading it into memory.

Example:

if (file.size > 50 * 1024 * 1024) {
    alert("Large PDF detected. Processing may take longer.");
}

When working with very large documents, developers should avoid unnecessary page rendering operations to reduce memory usage and improve performance.

It's also recommended to verify the page count before starting the reversal process.

Example:

const totalPages = pdfDoc.getPageCount();

console.log(`Pages: ${totalPages}`);

Previewing the final output before download helps users catch mistakes early and confirm that the page order has been reversed correctly.

Since processing happens entirely inside the browser, documents never leave the user's device, providing better privacy and security for sensitive files.

This approach is especially useful when working with business reports, legal documents, invoices, contracts, educational records, and confidential PDFs that shouldn't be uploaded to third-party servers.

Common Mistakes to Avoid

One common mistake is reversing a document without first checking the existing page order.

Many users assume the pages are arranged incorrectly and reverse the entire document, only to discover that the original file was already in the correct sequence.

Before processing, it's a good idea to verify the first and last pages.

Example:

const totalPages = pdfDoc.getPageCount();

console.log(`First Page: 1`);
console.log(`Last Page: ${totalPages}`);

Another common mistake is reversing an entire PDF when only a specific section needs to be reordered.

Large reports, books, manuals, and scanned documents sometimes require only a subset of pages to be reversed.

Always confirm whether a full-document reversal or a custom range reversal is required.

Example:

const startPage = 10;
const endPage = 25;

console.log(`Reverse pages \({startPage} to \){endPage}`);

Users also frequently assume scanned pages are already arranged correctly. But automatic document feeders and batch scanners can sometimes create PDFs with pages in unexpected sequences.

Previewing uploaded pages before processing helps identify these issues early.

Another mistake is skipping the final preview after generating the reversed PDF. A quick review allows users to confirm that page order, page count, and document structure are correct before downloading.

Example:

const finalPages = reversedPdf.getPageCount();

console.log(`Output Pages: ${finalPages}`);

Taking a few seconds to verify the output can prevent unnecessary reprocessing, save time, and ensure the final PDF is ready for sharing, printing, archiving, or business use.

Conclusion

In this tutorial, you built a browser-based PDF Reverse Tool using JavaScript.

You learned how to upload PDF files, preview document pages, configure reverse modes, generate reversed page orders, and create downloadable PDF documents directly inside the browser.

More importantly, you saw how modern browsers can perform document organization tasks locally without relying on backend servers.

This approach keeps document processing fast, private, and easy to use.

You can try the live implementation here:

Reverse PDF Tool

Once you understand this workflow, you can extend it further with features such as PDF splitting, merging, page rotation, page numbering, metadata editing, watermarking, document encryption, and advanced PDF organization tools.

How to Build a Browser-Based PDF Metadata Editor Using JavaScript – A Step-by-Step Guide

Bhavin Sheth — Sun, 07 Jun 2026 00:23:27 +0000

PDF files contain more information than what appears on the page.

Behind every PDF document is metadata that stores information such as the document title, author, subject, keywords, creator application, creation date, and modification date.

Metadata helps organize documents, improve searchability, and provide useful information when files are shared between users or systems.

In this tutorial, you'll build a browser-based PDF Metadata Editor using JavaScript.

Users will be able to upload a PDF, preview the document, view existing metadata, update metadata fields, add custom metadata entries, and download the updated PDF directly from the browser.

The entire process runs locally without requiring a backend server

Why PDF Metadata Is Important
How PDF Metadata Editing Works
Project Setup
What Library Are We Using?
Creating the Upload Interface
Previewing Uploaded PDF Files
Reading PDF Metadata
Editing PDF Metadata
Updating and Saving Metadata
Generating the Updated PDF
Why PDF Metadata Editing Is Useful
Demo: How the PDF Metadata Tool Works
Important Notes from Real-World Use
Common Mistakes to Avoid
Conclusion

Why PDF Metadata Is Important

PDF metadata is commonly used in business documents, contracts, reports, invoices, ebooks, academic papers, legal documents, and archived files.

When a PDF contains proper metadata, document management systems can organize files more effectively.

Search engines, enterprise search tools, and document indexing systems can also identify documents more accurately.

Metadata becomes especially useful when managing large collections of files because users can quickly locate documents based on title, author, subject, keywords, or custom information.

Updating metadata also helps keep documents organized after modifications, ownership changes, or publishing updates.

How PDF Metadata Editing Works

A PDF metadata editor loads the document inside the browser and reads information stored within the PDF file properties.

Users can review existing metadata, update values, add custom metadata fields, and save the changes into a new PDF document.

Everything happens locally inside the browser.

This means uploaded documents never leave the user's device, which improves privacy and security while eliminating the need for server-side processing.

Project Setup

This project is intentionally simple.

You'll only need:

An HTML file
A JavaScript file
A PDF processing library

No backend server or database is required. Everything runs right inside the browser.

What Library Are We Using?

We'll use PDF-lib to read and update PDF metadata.

PDF-lib provides functions for loading PDF documents, accessing metadata properties, modifying document information, and exporting updated files.

Add the library using a CDN:

Once loaded, JavaScript can access PDF metadata directly from the browser.

Creating the Upload Interface

Users first need a way to upload PDF files.

A simple file input is enough:

JavaScript can then detect when a PDF file is selected:

const input = document.getElementById("pdfInput");

input.addEventListener("change", (event) => {
  const file = event.target.files[0];
  console.log(file.name);
});

Here's what the upload section looks like:

Previewing Uploaded PDF Files

After uploading a PDF, users should be able to preview the document before making metadata changes.

The browser can render PDF pages using PDF.js:

const loadingTask = pdfjsLib.getDocument(url);

loadingTask.promise.then((pdf) => {
  console.log(pdf.numPages);
});

The preview area also includes page navigation buttons so users can move between pages.

This helps verify the correct document was uploaded before editing metadata.

Here's what the preview section looks like:

Reading PDF Metadata

Once the PDF is loaded, metadata can be extracted from the document.

For example:

const pdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);

const title = pdfDoc.getTitle();
const author = pdfDoc.getAuthor();

console.log(title);
console.log(author);

This information can then be displayed inside editable form fields.

Editing PDF Metadata

Users can update common document properties such as title, author, subject, keywords, creator information, and modification dates.

Custom metadata fields can also be added when additional document information is required.

For example:

pdfDoc.setTitle("Project Report");
pdfDoc.setAuthor("John Doe");
pdfDoc.setSubject("Monthly Review");

Here's what the metadata editor looks like:

Updating and Saving Metadata

Once the metadata fields have been updated, JavaScript can apply the changes to the PDF document.

For example:

pdfDoc.setTitle("Updated Document");
pdfDoc.setAuthor("John Doe");
pdfDoc.setSubject("PDF Metadata Tutorial");

Custom metadata values can also be inserted before exporting the document.

After all changes are complete, users click the Update Metadata button to generate the modified PDF.

Generating the Updated PDF

After updating metadata, the browser creates a new PDF document containing the revised information.

The original document remains unchanged while the updated version is generated locally.

const pdfBytes = await pdfDoc.save();

The updated file can then be prepared for download.

Why PDF Metadata Editing Is Useful

Metadata is often overlooked, but it plays an important role in document management.

Organizations use metadata to organize thousands of PDF files across internal systems.

When documents contain proper titles, keywords, subjects, and author information, they become easier to search, categorize, and manage.

For example, legal teams may store contracts with custom metadata fields for clients or case numbers.

Businesses often use metadata to organize invoices, reports, proposals, and project documents.

Publishers frequently update document properties before distributing ebooks, manuals, and guides.

Metadata can also improve indexing in document management systems and make archived files easier to locate months or years later.

Updating metadata before sharing documents creates a cleaner and more professional final file while improving long-term document organization.

Demo: How the PDF Metadata Tool Works

Step 1: Upload a PDF File

Users begin by uploading a PDF document into the browser.

The upload area supports drag-and-drop functionality as well as manual file selection.

Step 2: Preview the Uploaded Document

After uploading the PDF, the tool displays a document preview.

Users can navigate between pages using the left and right navigation buttons.

This allows quick verification that the correct document has been loaded.

Step 3: Edit PDF Metadata

The metadata editor loads existing document properties automatically.

Users can update fields such as title, author, subject, keywords, creator information, dates, and custom metadata values.

Custom fields can be added or removed as needed.

Step 4: Update Metadata

After making changes, users click the Update Metadata button.

The browser processes the document and applies all metadata updates locally.

Step 5: Download the Updated PDF

Once processing is complete, the updated PDF becomes available for download.

The output section displays the updated filename, total page count, file size information, and download controls as well as rename option before download.

A Start Over button is also available for processing another document.

Important Notes from Real-World Use

When working with PDF metadata, it's important to validate uploaded files before processing them.

For example:

if (!file.name.endsWith(".pdf")) {
  alert("Please upload a PDF file");
  return;
}

Large PDF files may require additional processing time.

Always verify metadata values before generating the updated document.

Sensitive information stored inside metadata should be reviewed carefully before sharing documents publicly.

Common Mistakes to Avoid

One common mistake is assuming that all PDFs contain metadata. Many documents may have empty metadata fields that need to be populated manually.

For example:

const title = pdfDoc.getTitle() || "Untitled Document";

Another mistake is forgetting to update the modification date after changing document properties.

Always review metadata values before exporting the final file.

Previewing the document and checking file details before download can help prevent mistakes.

Conclusion

In this tutorial, you built a browser-based PDF Metadata Editor using JavaScript.

You learned how to upload PDF files, preview document pages, read existing metadata, update document properties, add custom metadata fields, and generate updated PDF files directly inside the browser.

More importantly, you saw how modern browsers can handle PDF property management locally without requiring a backend server.

This approach keeps document processing fast, private, and easy to use.

If you'd like to see a working example, you can try out this free PDF Metadata Tool and explore how metadata can be viewed and updated directly in the browser.

Once you understand this workflow, you can extend it further with features like PDF encryption, document signing, watermarking, page organization, annotations, and advanced PDF editing tools.

How to Automate PDF Data Extraction Using Python

Manish Shivanandhan — Wed, 03 Jun 2026 16:25:14 +0000

PDFs are still one of the most widely used document formats in business.

Financial reports, invoices, contracts, compliance filings, and operational documents are often shared as PDFs because they preserve formatting across devices and operating systems.

The problem is that PDFs are designed for presentation, not structured data analysis. Extracting information manually from these files is slow, repetitive, and highly prone to human error.

This becomes a major issue for teams that work with large volumes of documents every day.

Finance departments process invoices and statements, analysts review reports, and operations teams manage records that contain valuable structured data trapped inside static files.

Copying rows manually into spreadsheets doesn't scale, especially when organisations handle hundreds or thousands of PDFs each month.

Python has become one of the most effective tools for automating PDF data extraction because of its mature ecosystem of libraries and data processing frameworks.

Developers can build workflows that extract text, identify tables, clean inconsistent formatting, and export structured datasets into Excel or CSV files automatically.

In smaller workflows, some teams may simply choose to convert PDF to Excel with SmallPDF for quick spreadsheet conversions, while larger organizations often build fully automated extraction pipelines using Python for deeper customisation and control.

In this article, we'll explore how to automate PDF data extraction using Python, including how to extract text and tables from PDFs, clean and transform structured data, work with scanned documents using OCR, and export information into spreadsheet formats like Excel.

We'll also look at some of the most useful Python libraries for document automation and discuss the common challenges developers face when building scalable PDF processing workflows.

Understanding PDF Structures

One of the biggest misconceptions about PDFs is that they all behave the same way. In reality, PDFs can vary significantly depending on how they were generated.

Machine-readable PDFs contain embedded text that can be extracted directly using parsing libraries. These files are usually exported from software systems such as accounting tools, reporting platforms, or office applications. Since the text already exists digitally, extraction is relatively reliable.

Scanned PDFs are different. These documents are essentially images stored inside a PDF container. Since there's no actual text layer, extraction tools can't read the content directly. OCR software must first analyze the images and attempt to reconstruct readable text.

Before writing any code, you should always test whether the text inside a PDF can be selected manually. If text highlighting works normally, the file likely contains a machine-readable layer. If not, you'll probably need OCR.

Setting Up the Python Environment

Python provides several excellent libraries for PDF extraction and document automation. Each library specializes in different aspects of the workflow.

Some tools focus on text extraction, while others are optimized for identifying tables or processing scanned documents. Commonly used libraries include pdfplumber, PyMuPDF, Camelot, tabula-py, and pytesseract.

You can configure the environment using pip:

pip install pdfplumber pandas openpyxl pymupdf camelot-py

If OCR support is required, you can also install some additional packages:

pip install pytesseract pillow

Tesseract itself must also be installed separately on the operating system because pytesseract acts only as a Python wrapper around the OCR engine.

Once the environment is ready, you can begin building extraction workflows tailored to specific document types.

Extracting Text From PDFs

The simplest PDF automation workflow involves extracting plain text from machine-readable documents.

Libraries such as pdfplumber make this process straightforward:

import pdfplumber

with pdfplumber.open(“report.pdf”) as pdf:

for page in pdf.pages:

text = page.extract_text()

print(text)

This approach works well for reports, contracts, meeting notes, and other text-heavy documents.

But raw text extraction often introduces formatting issues. Multi-column layouts may become scrambled, line breaks can appear unexpectedly, and tabular information may lose alignment completely.

While text extraction is useful for search indexing and keyword analysis, structured business workflows usually require table extraction instead.

Extracting Tables From PDFs

Most business automation projects focus on extracting tables from PDFs into structured spreadsheet formats.

Camelot is one of the most widely used Python libraries for this purpose. It identifies table structures by analyzing page layouts and separating rows and columns automatically.

Here's a simple example:

import camelot

tables = camelot.read_pdf(“financial_report.pdf”, pages=’1')

print(tables[0].df)

The extracted table is returned as a Pandas DataFrame, which makes downstream processing significantly easier.

Exporting the extracted data into Excel is straightforward:

import pandas as pd

df = tables[0].df

df.to_excel(“output.xlsx”, index=False)

This type of workflow is extremely valuable for finance and operations teams that regularly process statements, invoices, audit reports, or procurement records.

Real-world PDFs, however, are rarely perfectly-structured. Tables may span multiple pages, contain merged cells, or use inconsistent spacing. You'll often need additional transformation logic to clean and standardize the extracted data before it becomes useful for analytics or reporting.

Working With OCR for Scanned PDFs

Scanned documents require OCR because there's no machine-readable text available inside the file.

Python devs commonly use Tesseract together with pytesseract for OCR workflows.

A simple example looks like this:

from PIL import Image

import pytesseract

image = Image.open(“invoice_scan.png”)

text = pytesseract.image_to_string(image)

print(text)

OCR accuracy depends heavily on image quality. Low-resolution scans, skewed pages, handwritten content, and poor lighting can reduce recognition performance substantially.

To improve results, you can preprocess images before running OCR. Common preprocessing techniques include grayscale conversion, thresholding, sharpening, and noise reduction.

Even with preprocessing, OCR should generally be treated as a fallback solution rather than the primary extraction strategy whenever machine-readable PDFs are available.

Building End-to-End Automation Pipelines

Single extraction scripts are useful for experimentation, but enterprise workflows usually require complete automation pipelines.

A production-ready document automation system may include file ingestion, document classification, extraction, transformation, validation, export, and archival stages.

Python works particularly well in these environments because it integrates cleanly with APIs, databases, cloud storage platforms, and workflow orchestration systems.

For example, an accounts payable workflow might automatically monitor an inbox for incoming invoices, extract tabular data from attached PDFs, validate totals, and push the cleaned records into an ERP platform without human intervention.

This type of automation can save organizations hundreds of hours of repetitive administrative work each month while improving consistency and reducing operational errors.

Many advanced systems also combine traditional extraction logic with AI models that automatically classify document types before routing them into specialized extraction pipelines.

Common Challenges in PDF Automation

PDF extraction becomes more difficult as workflows scale.

One major challenge is inconsistency. Documents generated from the same source system may still vary slightly in formatting, page layout, or spacing. Small formatting differences can break rigid extraction logic unexpectedly.

Accuracy validation is another critical issue. Extracted data should never be assumed correct automatically, especially in finance, healthcare, or compliance workflows where errors can create operational or regulatory risks.

Performance can also become a bottleneck when processing large volumes of files. Sequential extraction may be sufficient for small workloads, but larger systems often require parallel processing and queue-based architectures.

Scanned PDFs introduce even more uncertainty because OCR engines are inherently probabilistic. Many organizations use human review systems for low-confidence extractions instead of relying entirely on automation.

The most reliable automation systems combine structured extraction logic, validation rules, and selective manual oversight.

Choosing the Right Python Libraries

Different libraries perform better depending on the structure and complexity of the documents being processed.

pdfplumber is excellent for lightweight text extraction and layout analysis. Camelot performs particularly well with clearly defined tables. PyMuPDF offers strong performance and lower-level PDF manipulation capabilities.

For OCR workflows, pytesseract remains one of the most popular open-source solutions because it integrates easily into Python pipelines.

There's rarely a single perfect tool for every document type. Experienced developers typically combine multiple libraries within the same workflow and dynamically choose extraction strategies based on document characteristics.

Testing against real production data is critical because sample documents rarely capture the inconsistencies found in live operational environments.

The Future of PDF Automation

Document automation is evolving rapidly as AI systems become better at understanding unstructured information.

Traditional rule-based extraction workflows still dominate most enterprise systems, but AI-assisted models are increasingly capable of interpreting layouts, identifying fields, and understanding relationships between document elements more accurately than older parsing techniques.

Python remains central to this ecosystem because of its flexibility and extensive machine learning tooling. You can combine PDF extraction libraries with AI frameworks to build systems that continuously improve as they process more documents.

As organizations continue digitizing operations, automated PDF extraction will become increasingly important across finance, legal, healthcare, logistics, and compliance industries.

Teams that invest in document automation early can reduce manual work, improve reporting accuracy, and unlock structured business data that would otherwise remain trapped inside static PDF files.

Hope you enjoyed this article. You can connect with me on LinkedIn.

How to Build a Browser-Based PDF Organizer Tool Using JavaScript

Bhavin Sheth — Wed, 03 Jun 2026 16:23:33 +0000

PDF files often become difficult to manage when pages are out of order, scanned incorrectly, duplicated, or spread across multiple documents.

Instead of manually recreating the document, users often need a quick way to rearrange pages, rotate specific pages, remove unwanted content, insert blank pages, or combine multiple PDFs into a single file.

Modern browsers make this much easier than before.

Instead of uploading files to a server, you can process PDF documents directly in the browser using JavaScript. This keeps the tool fast, private, and easy to use.

In this tutorial, you'll build a browser-based PDF organizer tool using JavaScript.

The tool will support uploading PDFs, previewing pages, rotating individual pages or entire documents, deleting unwanted pages, reordering pages, adding blank pages, merging additional PDFs, and downloading the final organized document directly in the browser.

Everything runs entirely client-side without any backend server.

How PDF Organization Works
Project Setup
What Library Are We Using?
Creating the Upload Interface
Reading Uploaded PDF Files
Previewing PDF Pages
Rotating Individual Pages
Reordering Pages
Deleting Pages
Adding Blank Pages
Merging Another PDF
Organizing and Generating the Final PDF
Demo: How the PDF Organizer Tool Works
Why PDF Organization Is Useful
Important Notes from Real-World Use
Common Mistakes to Avoid
Conclusion

How PDF Organization Works

PDF organization is the process of modifying the structure of an existing PDF document.

Instead of editing the actual content inside the pages, users can rearrange page order, rotate pages, remove unwanted pages, insert blank pages, or combine multiple PDFs into a single document.

The browser loads the uploaded PDF, processes page operations using JavaScript, and generates a new downloadable file.

Everything happens locally inside the browser. This means uploaded documents never leave the user's device, which improves privacy and security.

Project Setup

This project is intentionally simple.

You only need:

An HTML file
A JavaScript file
A PDF processing library

No backend server is required. All PDF operations happen directly inside the browser.

What Library Are We Using?

We'll use PDF-lib because it provides page-level control for PDF documents.

Add it using a CDN:

Once loaded, JavaScript can access and modify PDF pages directly in the browser.

Creating the Upload Interface

The first step is allowing users to upload one or more PDF files.

For example:

JavaScript can then access the selected files for processing.

Here's what the upload interface looks like inside the tool:

Reading Uploaded PDF Files

After users select a PDF, we need to load it into JavaScript.

For example:

const file = event.target.files[0];

const bytes = await file.arrayBuffer();

const pdfDoc = await PDFLib.PDFDocument.load(bytes);

This loads the PDF document and makes its pages available for manipulation.

Previewing PDF Pages

Before making any modifications, users should be able to preview document pages.

A page preview helps users verify page order and identify pages that need to be rotated, moved, or removed.

The preview section also serves as the workspace where organization actions take place.

Here's an example of the page preview area:

Rotating Individual Pages

Sometimes scanned documents appear sideways or upside down.

PDF-lib allows individual pages to be rotated.

For example:

page.setRotation(
  PDFLib.degrees(90)
);

This rotates the selected page by 90 degrees.

Users can rotate individual pages directly from the page preview interface.

Here's an example:

The tool also supports rotating all pages at once.

Here's what the global rotation controls look like:

Reordering Pages

One of the most useful PDF organization features is changing page order.

Users can move pages left or right to create the desired document sequence.

For example:

const page = pages.splice(oldIndex, 1)[0];

pages.splice(newIndex, 0, page);

This updates the page order before generating the final PDF.

Here's what page reordering looks like:

Deleting Pages

Unwanted pages can be removed before exporting the final document.

For example:

pdfDoc.removePage(pageIndex);

This permanently removes the selected page from the generated PDF.

Users can delete pages directly from the preview area.

Here's an example:

Adding Blank Pages

Some documents require additional spacing between sections.

PDF-lib allows blank pages to be inserted.

For example:

pdfDoc.addPage();

This creates a new blank page inside the document.

Users can add blank pages directly from the toolbar.

Here's how the feature appears in the tool:

Merging Another PDF

In many situations, users need to combine multiple PDF documents.

Additional PDF files can be uploaded and merged into the current document.

For example:

const copiedPages =
  await pdfDoc.copyPages(
    sourcePdf,
    sourcePdf.getPageIndices()
  );

copiedPages.forEach(page =>
  pdfDoc.addPage(page)
);

This imports pages from another PDF.

Organizing and Generating the Final PDF

Once all changes are complete, users can generate the updated PDF.

For example:

const pdfBytes =
  await pdfDoc.save();

The browser creates a new organized PDF without uploading anything to a server.

Here's the generate button inside the tool:

Demo: How the PDF Organizer Tool Works

Step 1: Upload PDF Files

Users start by uploading one or more PDF documents into the browser.

The tool supports drag-and-drop uploads as well as manual file selection. Once the files are loaded, JavaScript reads the document data and prepares the pages for organization.

Here's what the upload interface looks like:

Step 2: Preview Document Pages

After the upload is complete, the tool generates visual previews for each PDF page.

This allows users to review the document structure before making any modifications. Page previews make it easier to identify pages that need to be rotated, removed, or moved to a different position.

Here's what the page preview section looks like:

Step 3: Rotate, Delete, and Manage Pages

Users can perform page-level actions directly from the preview area.

Individual pages can be rotated if they were scanned incorrectly, and unnecessary pages can be removed before generating the final document.

The tool also provides controls for rotating pages without affecting the rest of the document.

Here's an example:

Step 4: Rearrange Page Order

Sometimes pages appear in the wrong sequence.

The organizer allows users to move pages left or right until the document follows the desired order. This is useful when combining reports, scanned documents, presentations, or multiple PDF files.

Here's what page reordering looks like:

Step 5: Rotate All Pages or Add Additional Content

The toolbar provides additional document-wide actions.

Users can rotate all pages left or right, insert blank pages, merge another PDF file into the current document, or reset the entire workspace.

These controls help users perform larger modifications quickly.

Here's what the toolbar looks like:

Step 6: Generate the Organized PDF

Once all modifications are complete, users can generate the updated document.

The browser processes all page operations and creates a new organized PDF directly on the user's device.

Here's the generate button inside the tool:

Step 7: Preview and Download the Final PDF

After processing is complete, the tool displays the organized PDF for review.

Users can browse through pages using the navigation controls, verify the page order, check the total page count, view the file size, rename before download, and download the finished document.

Here's what the final output section looks like:

Why PDF Organization Is Useful

PDF documents often become difficult to manage over time.

Pages may be scanned in the wrong orientation, and documents may contain duplicate pages, unnecessary blank pages, or sections that appear in the wrong order. In many cases, information from multiple PDF files also needs to be combined into a single organized document.

A PDF organizer helps solve these problems without requiring expensive desktop software.

For example, businesses often receive scanned contracts where some pages are upside down or out of sequence. Before sharing the document with clients or team members, those pages need to be rotated and rearranged correctly.

Students and researchers frequently combine notes, assignments, reports, and reference materials from different PDF files into a single organized document. Reordering pages makes the final file easier to read and navigate.

Office teams often work with invoices, proposals, project documentation, HR forms, and financial reports. Removing unnecessary pages and placing information in the correct order creates cleaner documents that are easier to review and distribute.

PDF organization is also useful when preparing presentations, legal documents, training manuals, eBooks, and scanned archives where page sequence is important.

After organizing a PDF, the final document becomes easier to read, easier to share, and more professional in appearance. Users can quickly locate information, reduce confusion caused by misplaced pages, and ensure the document follows the intended structure.

Instead of manually recreating documents, a PDF organizer allows users to make these adjustments in just a few clicks directly inside the browser.

Important Notes from Real-World Use

Large PDF files may take longer to process.

For example:

if(pdfDoc.getPageCount() > 200){
  console.log("Large document detected");
}

When working with many pages, it's helpful to load previews efficiently and avoid unnecessary reprocessing.

Another useful optimization is validating uploaded files before loading them.

For example:

if(file.type !== "application/pdf"){
  alert("Please upload a PDF file");
  return;
}

This prevents invalid files from entering the processing workflow.

Common Mistakes to Avoid

One common mistake is generating the PDF before verifying page order. Always review page previews before exporting.

Another mistake is rotating every page when only specific pages require adjustment. Users should verify page selections before applying rotations.

It's also important to remove unwanted pages before generating the final PDF.

For example:

if(pageIndex >= pdfDoc.getPageCount()){
  return;
}

Validating page operations helps prevent unexpected errors during document generation.

Conclusion

In this tutorial, you built a browser-based PDF organizer tool using JavaScript.

You learned how to upload PDF files, preview document pages, rotate pages, reorder content, delete unwanted pages, add blank pages, merge additional PDFs, and generate downloadable files directly inside the browser.

More importantly, you saw how modern browsers can perform advanced PDF organization tasks locally without relying on a backend server.

This approach keeps the tool fast, private, and easy to use.

You can also try a production version of this tool here:

AllInOneTools- PDF Organize Tool

Once you understand this workflow, you can extend it further with features like page extraction, document splitting, annotations, watermarking, digital signatures, and advanced PDF editing.

And that's where things start getting really interesting.

How to Build a PDF Page Numbering Tool in the Browser Using JavaScript

Bhavin Sheth — Fri, 29 May 2026 22:08:47 +0000

When you're working with contracts, reports, invoices, manuals, or academic documents, page numbers make navigation much easier.

Instead of manually editing every page, modern JavaScript libraries let you add page numbers directly inside the browser.

In this tutorial, you'll build a browser-based PDF page numbering tool using JavaScript.

Users will be able to upload a PDF, choose where page numbers appear, customize formatting options, preview the document, and download the updated PDF without uploading files to a server.

Everything runs locally inside the browser for better privacy and faster processing.

How PDF Page Numbering Works
Project Setup
What Library Are We Using?
Creating the Upload Interface
Reading PDF Pages
Previewing Uploaded Pages
Selecting Page Number Position
Choosing Pages to Number
Configuring Number Format and Style
Generating the Updated PDF
Previewing and Downloading the Final PDF
How PDF Page Numbers Help in Real-World Documents
Demo: How the PDF Page Number Tool Works
Important Notes from Real-World Use
Common Mistakes to Avoid
Conclusion

How PDF Page Numbering Works

A PDF page numbering tool loads an existing PDF document, modifies selected pages, and inserts page numbers before generating a new downloadable file.

Page numbering is commonly used in reports, contracts, invoices, legal documents, eBooks, manuals, and academic papers where readers need an easy way to navigate through multiple pages.

Without page numbers, it can be difficult to reference specific sections or locate information inside larger documents.

The browser reads the uploaded PDF, processes each page, applies numbering rules, and exports the updated document.

Everything happens locally inside the browser.

This means documents never leave the user's device, improving privacy and security.

In this tutorial, we'll build a tool that allows users to upload a PDF, choose where page numbers appear, customize formatting options, preview the result, and download the updated document directly from the browser.

Project Setup

This project is intentionally simple.

You only need an HTML file, a JavaScript file, and a PDF processing library.

No backend server or database is required.

What Library Are We Using?

We'll use PDF-lib because it allows us to load, modify, and export PDF documents directly inside JavaScript.

Add it using a CDN:

Once loaded, we can read PDF pages and add numbering information directly inside the browser.

Creating the Upload Interface

Users first need a way to upload PDF files.

A simple file input works:

After selecting a file, JavaScript can process the PDF and display a preview.

Reading PDF Pages

After the file is uploaded, the PDF must be loaded into memory.

For example:

const bytes = await file.arrayBuffer();

const pdfDoc = await PDFLib.PDFDocument.load(bytes);

const pages = pdfDoc.getPages();

This gives us access to every page inside the document.

Previewing Uploaded Pages

Before applying page numbers, users can preview document pages directly inside the browser.

Showing page previews helps users verify the document before making changes.

The preview section updates automatically after the PDF is uploaded.

Selecting Page Number Position

Different documents require different page number placements.

Some users prefer numbers at the bottom center, while others may use corners or top positions.

The tool provides multiple positioning options.

For example:

page.drawText(pageNumber, {
  x: 250,
  y: 20
});

This allows page numbers to be placed at different coordinates.

Choosing Pages to Number

Not every page needs numbering.

Some users may want numbering applied to all pages. Others may choose a custom range or skip the first page.

The tool supports all of these options.

Configuring Number Format and Style

Users can customize how page numbers appear inside the document.

The numbering format can use standard numbers, lowercase letters, or uppercase letters.

For example:

const pageNumber = `${index + 1}`;

Different numbering styles can also be generated dynamically.

Users can also select different fonts.

The tool allows changing text size, color, and appearance.

Users can also customize numbering patterns.

For example:

Page 1
Page 1 of 20
Custom patterns

Margin settings control spacing between the page number and document edges.

Generating the Updated PDF

Once configuration is complete, users can generate the updated document.

For example:

const pdfBytes = await pdfDoc.save();

The browser processes the pages and inserts numbering automatically.

Previewing and Downloading the Final PDF

After processing, the updated PDF is displayed inside a preview area.

Users can review the results before downloading.

The interface also shows document details such as total pages and file size.

Navigation buttons allow users to browse through pages directly inside the browser.

Finally, the completed PDF can be downloaded.

How PDF Page Numbers Help in Real-World Documents

Page numbers may seem like a small detail, but they become extremely important as documents grow larger.

In business reports, page numbers help readers quickly locate specific sections during meetings, reviews, or presentations. Instead of scrolling through dozens of pages, someone can simply jump to the referenced page number.

Contracts and legal documents also rely heavily on page numbering. When discussing terms or clauses, it's common to reference a specific page to avoid confusion and ensure everyone is looking at the same information.

Academic papers, research documents, and project reports often require page numbers for citations, references, and formatting guidelines. Many institutions consider page numbering a standard requirement for professional submissions.

Page numbers are also useful for manuals, ebooks, user guides, and training materials. Readers can easily return to a previous section or follow instructions that reference another page within the document.

For example, a company handbook might contain 50 or more pages. Without page numbers, employees would need to manually search for information. With numbering applied, sections can simply reference pages such as "See page 24 for leave policy details."

Similarly, invoices, proposals, and financial reports often use formats like "Page 3 of 12" so readers immediately understand how many pages are included in the document.

Adding page numbers improves navigation, organization, professionalism, and overall readability, making documents easier to use for both creators and readers.

Demo: How the PDF Page Number Tool Works

Step 1: Upload a PDF

Users upload a PDF document into the browser.

Step 2: Review Page Previews

The uploaded document pages appear inside the preview section.

Step 3: Configure Page Number Settings

Users choose position, page range, numbering style, font appearance, transparency, and formatting options.

Step 4: Generate the PDF

After configuration is complete, users click the generate button.

Step 5: Review and Download

The finished PDF appears in the preview area.

Users can browse pages, review numbering, rename, and download the updated document.

Important Notes from Real-World Use

When working with large PDF files, performance and memory usage become important considerations.

Documents containing hundreds of pages may take longer to process inside the browser.

A simple validation check can help prevent unsupported files from being processed:

if (!file || file.type !== "application/pdf") {
  alert("Please upload a valid PDF file");
  return;
}

This ensures users upload a PDF before processing begins.

Another useful optimization is limiting very large files before loading them:

const MAX_SIZE = 20 * 1024 * 1024;

if (file.size > MAX_SIZE) {
  alert("PDF file is too large");
  return;
}

This prevents excessive memory usage and improves browser performance.

When generating page numbers, it's also helpful to process pages only once:

const pages = pdfDoc.getPages();

pages.forEach((page, index) => {
  page.drawText(`${index + 1}`);
});

This keeps the numbering process efficient even for larger documents.

Before downloading the final file, always preview the generated document.

Reviewing the output helps verify that page numbers appear in the correct position, use the expected format, and don't overlap important document content.

Common Mistakes to Avoid

One common mistake is hardcoding page number positions.

Different PDF documents can have different page sizes, so fixed coordinates may place page numbers in the wrong location.

For example:

page.drawText(pageNumber, {
  x: 250,
  y: 20
});

Instead, it's usually better to calculate positions dynamically based on the page dimensions.

Another mistake is applying numbering to every page when only a subset of pages should be updated.

For example, users may want to skip the cover page or number only specific page ranges.

Always verify page selection settings before generating the final file.

It's also important to preview the output before downloading.

For example:

const previewPage = pdfDoc.getPage(0);

renderPreview(previewPage);

This helps ensure page numbers appear exactly where expected.

Another common issue is failing to validate uploaded files before processing:

if (!file || file.type !== "application/pdf") {
  alert("Please upload a valid PDF file");
  return;
}

Adding basic validation helps prevent errors and improves the overall user experience.

Conclusion

In this tutorial, you built a browser-based PDF page numbering tool using JavaScript.

You learned how to upload PDF files, preview pages, choose numbering positions, customize formatting options, and generate downloadable PDFs directly inside the browser.

More importantly, you saw how modern browsers can handle document editing tasks locally without relying on a backend server.

This approach keeps the tool fast, private, and easy to use.

If you'd like to try a production-ready version, you can use the AllInOneTools - PDF Page Number Tool.

Once you understand this workflow, you can extend it further with features like headers, footers, watermarks, PDF stamps, document annotations, or advanced page management.

And that's where things start getting really interesting.

How to Build a Browser-Based PDF Rotator Using JavaScript

Bhavin Sheth — Wed, 27 May 2026 15:02:55 +0000

Sometimes PDF pages appear upside down, sideways, or in the wrong orientation after scanning or exporting documents.

Instead of re-creating the document manually, users usually just need a quick way to rotate pages and save the corrected version.

Modern browsers make this possible directly with JavaScript.

In this tutorial, you’ll build a browser-based PDF rotator using JavaScript.

The tool will allow users to upload PDF files, preview pages, rotate selected pages, change orientation, generate an updated PDF, preview the final result, rename the file, and download everything directly from the browser.

Everything works entirely client-side without a backend server.

How PDF Rotation Works
Project Setup
What Library Are We Using?
Creating the Upload Interface
Previewing Uploaded PDF Pages
Selecting Pages to Rotate
Applying Rotation Options
Generating the Rotated PDF
Previewing and Downloading the Final PDF
Why PDF Rotation Is Useful in Real-World Documents
Demo: How the PDF Rotator Tool Works
Important Notes from Real-World Use
Common Mistakes to Avoid
Conclusion

How PDF Rotation Works

PDF rotation works by updating the orientation data of PDF pages.

Instead of modifying the actual content manually, JavaScript libraries can rotate pages programmatically and export an updated version of the document.

The browser loads the PDF file, reads page information, applies rotation values like 90°, 180°, or landscape orientation, and then generates a new downloadable PDF.

Everything happens directly inside the browser.

This keeps the process fast, private, and easy to use without uploading files to external servers.

Project Setup

This project is intentionally simple.

You only need an HTML file, a JavaScript file, and a PDF processing library.

Everything runs entirely inside the browser using JavaScript. No backend server or database is required.

What Library Are We Using?

We’ll use the PDF-lib library for editing PDF files directly in the browser.

Add it using a CDN:

This library allows us to:

load PDF documents
rotate pages
modify orientation
export updated PDFs

Creating the Upload Interface

Start with a basic upload input:

This allows users to upload PDF files directly from the browser.

Here’s what the upload section looks like inside the tool:

Previewing Uploaded PDF Pages

After uploading a PDF file, users can preview pages directly inside the browser before applying rotations.

The preview section also includes rotation controls so users can rotate pages individually as needed before generating the final PDF.

To render previews, we first load the uploaded PDF document:

const pdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);

const totalPages = pdfDoc.getPageCount();

Next, we render page previews dynamically:

for (let i = 0; i < totalPages; i++) {
  const page = pdfDoc.getPage(i);

  console.log("Rendering page:", i + 1);
}

Users can then move between pages using left and right navigation buttons.

Rotation buttons can also be attached to each preview card:

rotateLeftBtn.addEventListener("click", () => {
  rotatePage(currentPage, -90);
});

rotateRightBtn.addEventListener("click", () => {
  rotatePage(currentPage, 90);
});

This makes it easier to verify page orientation before generating the updated PDF.

Here’s what the page preview section looks like:

Selecting Pages to Rotate

Not every document needs all pages rotated.

Some users may only want to rotate even-numbered pages, odd-numbered pages, or specific pages within the document.

The tool allows users to select which pages should receive the rotation changes before generating the final PDF.

For example, users can choose the rotation scope like this:

const selectedMode = document.querySelector(
  'input[name="pageMode"]:checked'
).value;

Specific page ranges can also be supported:

const customPages = document
  .getElementById("customPages")
  .value;

This gives users more control over which document pages are modified.

Here’s how the page selection controls look inside the tool:

Applying Rotation Options

Once the pages are selected, users can apply different rotation actions directly inside the browser.

Pages can be rotated left by 90 degrees, rotated right by 90 degrees, flipped by 180 degrees, or converted into portrait or landscape orientation.

Here’s a simple example using PDF-lib:

const page = pdfDoc.getPage(pageIndex);

page.setRotation(
  PDFLib.degrees(90)
);

To rotate pages left:

page.setRotation(
  PDFLib.degrees(-90)
);

You can also apply orientation presets dynamically:

if (orientation === "landscape") {
  page.setRotation(PDFLib.degrees(90));
}

These controls allow users to fix scanned documents and incorrect page layouts directly inside the browser.

Here’s what the rotation controls look like inside the tool:

Generating the Rotated PDF

After the rotation settings are configured, users can generate the updated PDF directly inside the browser.

The tool processes selected pages, applies rotation changes, and exports a new downloadable PDF file instantly.

For example:

const pdfBytes = await pdfDoc.save();

Next, create a downloadable file:

const blob = new Blob(
  [pdfBytes],
  { type: "application/pdf" }
);

const url = URL.createObjectURL(blob);

Finally, trigger the download:

const link = document.createElement("a");

link.href = url;
link.download = "rotated-document.pdf";

link.click();

This entire workflow runs locally inside the browser without requiring a backend server.

Here’s what the generate button looks like inside the tool:

Previewing and Downloading the Final PDF

Once processing is complete, the tool displays a live preview of the rotated document.

Users can review updated pages before downloading the final file.

The interface also shows additional document details such as total pages and file size.

A rename option is available before downloading the generated PDF.

For example, users can rename the file like this:

const fileName = prompt(
  "Enter PDF name:",
  "rotated-document"
);

The preview section also includes left and right navigation controls so users can browse through rotated pages directly inside the browser.

Document details can also be displayed dynamically:

fileSizeElement.textContent =
  formatFileSize(blob.size);

pageCountElement.textContent =
  pdfDoc.getPageCount();

This improves usability and helps users verify the final output before downloading.

Here’s what the final output section looks like:

Why PDF Rotation Is Useful in Real-World Documents

PDF rotation may seem like a small feature, but it solves a very common problem in everyday document handling.

Many scanned documents, mobile scans, invoices, certificates, and office files are saved with incorrect orientation. Some pages appear sideways, upside down, or mixed between portrait and landscape layouts.

Instead of reopening and rescanning those files, users can quickly fix page orientation directly inside the browser.

For example, PDF rotation is commonly used for:

scanned agreements
invoices and bills
government forms
academic documents
construction drawings
landscape reports
mobile camera scans

This becomes especially useful when working with multi-page PDFs where only certain pages need correction.

Some users may only want to rotate:

even-numbered pages
odd-numbered pages
specific pages
landscape pages only

That’s why page-based rotation controls are important in modern PDF tools.

Browser-based PDF rotation also improves privacy because uploaded documents stay on the user’s device instead of being sent to external servers.

Demo: How the PDF Rotator Tool Works

Step 1: Upload the PDF

Users first upload a PDF document directly into the browser-based tool.

The upload section supports drag-and-drop along with manual file selection.

Here’s what the upload interface looks like:

Step 2: Preview PDF Pages

After uploading the document, the tool generates page previews automatically.

The preview section also includes a rotation option so users can rotate document pages as per required.

Here’s the preview section inside the tool:

Step 3: Configure Rotation Settings

Users can now choose how the PDF pages should rotate.

The tool supports:

rotate left
rotate right
flip 180 degrees
portrait orientation
landscape orientation

Users can also choose whether rotations apply to all pages or just certain pages.

Here’s what the rotation settings panel looks like:

Step 4: Generate the Rotated PDF

Once everything is configured, users click the generate button to apply the rotations.

The browser processes the document locally and creates the updated PDF instantly.

Here’s the generate button inside the tool:

Step 5: Preview the Final Output

After processing is complete, the tool displays the rotated PDF preview directly inside the browser.

Users can navigate page-by-page using the left and right controls to verify the final output.

The interface also shows:

total pages
file size
output filename

Here’s the final preview section:

Step 6: Rename and Download the PDF

Before downloading, users can rename the generated PDF file directly inside the browser.

Once renamed, the updated document can be downloaded instantly.

Here’s the rename and download section:

Important Notes from Real-World Use

When working with scanned PDFs, page orientation issues are very common.

Some documents may contain mixed orientations where certain pages are portrait while others are landscape.

Applying rotation changes page-by-page usually gives better results than rotating the entire document blindly.

Large PDF files can also increase processing time inside the browser.

For example:

if (file.size > 50 * 1024 * 1024) {
  alert("Large PDF files may process slowly.");
}

Another useful optimization is previewing pages before applying permanent changes.

This helps users verify page orientation and reduces mistakes before downloading the updated document.

Since everything runs locally in the browser, uploaded documents never leave the user’s device, which improves privacy and security.

Common Mistakes to Avoid

One common mistake is rotating pages multiple times accidentally.

For example, applying two consecutive 90-degree rotations may result in unexpected orientation changes.

Another issue is ignoring page selection before applying rotations.

Users may accidentally rotate all pages instead of specific sections of the document.

Large scanned PDFs can also slow down rendering and preview generation.

Validating uploaded files before processing helps avoid broken workflows:

if (!file || file.type !== "application/pdf") {
  alert("Please upload a valid PDF file.");
  return;
}

Incorrect preview synchronization is another common issue.

If page previews aren't refreshed after rotation, users may think the rotation failed even though the exported PDF is correct.

Updating previews dynamically after each rotation improves the overall experience.

Conclusion

In this tutorial, you built a browser-based PDF rotator using JavaScript.

You learned how to upload PDF files, preview document pages, rotate selected pages, change page orientation, generate updated PDFs, and download the final document directly inside the browser.

More importantly, you saw how modern browsers can handle practical PDF editing tasks locally without relying on a backend server.

This approach keeps the tool fast, private, and easy to use.

You can also try the live tool here: AllInOneTools - PDF Rotator Tool.

Once you understand this workflow, you can extend it further with features like PDF page extraction, annotations, document organization, digital signatures, or advanced editing tools.

And that’s where things start getting really interesting.

pdf - freeCodeCamp.org

How to Build a Browser-Based PDF Blur Tool Using JavaScript

Table of Contents

What This PDF Blur Tool Does and How It Works

Project Setup

Creating the HTML Layout

Selecting DOM Elements

Uploading and Previewing PDFs

Reading the PDF

Rendering the First Page

Creating Page Navigation

Preparing for Blur Editing

Showing the Editor

Creating Blur Regions

Creating the Blur Area Object

Storing Multiple Blur Regions

Starting a Blur Selection

Drawing the Blur Rectangle

Finishing the Selection

Drawing Existing Blur Areas

Displaying Blur Boxes

Blur Options

Adjusting Blur Intensity

Managing Multiple Blur Areas

Applying Blur to Pages

Applying the Blur Effect

Loading the Original PDF

Processing the Selected Pages

Rendering Each Page as an Image

Applying Blur to Selected Regions

Blurring the Canvas Region

Blurring an Entire Page

Converting the Canvas Back into a PDF Image

Showing the Processing State

Generating the Final PDF

Previewing the Result

Renaming and Downloading

Demo: How the PDF Blur Tool Works

Step 1: Upload the PDF

Step 2: Preview the Document

Step 3: Configure Blur Settings

Step 4: Draw Blur Areas

Step 5: Adjust Blur Intensity

Step 6: Manage Blur Regions

Step 7: Choose the Pages

Step 8: Apply the Blur

Step 9: Review the Final Document

Step 10: Rename and Download

Performance Tips

Common Mistakes

Conclusion

How to Build a Browser-Based PDF Signature Tool Using JavaScript

What We'll Cover:

What This PDF Signature Tool Can Do

Electronic Signatures vs Digital Signatures

How the Browser-Based Workflow Works

Project Setup

PDF Signature Tool

What Libraries Are We Using?

PDF.js for Rendering and Previewing

PDF-lib for Modifying the PDF

Uploading and Previewing the PDF

Rendering the Current PDF Page

Adding PDF Page Navigation

Choosing an Element to Add

1. Choose Element

Creating a Signature

2. Create Signature

Drawing a Signature

Typing a Signature

Uploading a Signature Image

Creating the Signature Preview Element

Adding Text and Preset Stamps

2. Add Text or Stamp

Positioning and Styling the Element

3. Placement & Style

Changing the Element Scale

Rotating the Element

Adjusting Opacity

Dragging an Element Across the PDF Preview