How to Merge Multiple Images into One PDF Using JavaScript in the Browser

Mar 31, 2026

In our daily work, we may need to take some photos and merge the images into a PDF file. This can be done with many applications. Dynamsoft Document Viewer has made it easier since it can do this in the browser. This process can be integrated in our online website, CRM system, etc.

In this article, we are going to create a web app to merge images into PDF with JavaScript using Dynamsoft Document Viewer.

What you’ll build: A client-side web app that lets users select multiple images, optionally edit them, and merge them into a single downloadable PDF — all in the browser using the Dynamsoft Document Viewer SDK.

Key Takeaways

Dynamsoft Document Viewer can merge multiple images (JPEG, PNG, BMP, TIFF) into a single PDF entirely in the browser with no server-side processing.
The loadSource and saveToPdf methods handle image ingestion and PDF generation in just a few lines of JavaScript.
The built-in EditViewer component lets users rotate, crop, reorder, and filter images before generating the PDF.
This approach works in any modern browser and can be embedded in CRM systems, internal tools, or public-facing web apps.

Common Developer Questions

How do I merge multiple images into one PDF using JavaScript without a server?
Can I let users edit and reorder images before combining them into a PDF in the browser?
What JavaScript SDK supports client-side image-to-PDF conversion with an editing UI?

Prerequisites

To follow this tutorial you need:

A modern web browser (Chrome, Firefox, Edge, or Safari).
A text editor or IDE.
A Dynamsoft Document Viewer license. Get a 30-day free trial license for Dynamsoft Document Viewer.

Step 1: Create the HTML File

Create a new HTML file with the following template:

<!DOCTYPE html>
<html>
<head>
  <title>Document Scanner</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  <style>
  </style>
</head>
<body>
  <h2>Merge Images into PDF</h2>
  <script>
  </script>
</body>
</html>

Step 2: Add the Dynamsoft Document Viewer SDK

Include Dynamsoft Document Viewer in the page.

<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@1.1.0/dist/ddv.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@1.1.0/dist/ddv.css">

Step 3: Select Image Files for Merging

Next, select files for merging.

Add an input element for selecting multiple files.

<input type="file" name="file" id="file" multiple="multiple">

We can then get the selected files with the following JavaScript:

let fileInput = document.getElementById("file");
let files = fileInput.files;

Step 4: Merge the Selected Images into a PDF

Add a button in the page to merge the images into a PDF.

HTML:

<button onclick="merge()">Merge into PDF</button>

JavaScript:

Initialize Dynamsoft Document Viewer with your license key.

Dynamsoft.DDV.Core.license = "LICENSE-KEY"; // Public trial license which is valid for 24 hours
Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@1.1.0/dist/engine";// Lead to a folder containing the distributed WASM files
await Dynamsoft.DDV.Core.loadWasm();
await Dynamsoft.DDV.Core.init(); 
Dynamsoft.DDV.setProcessingHandler("imageFilter", new Dynamsoft.DDV.ImageFilter());

Create a new document instance using Dynamsoft Document Viewer’s DocumentManager.
```
const doc = Dynamsoft.DDV.documentManager.createDocument();
```

Read files as blob and load them into the document.

let fileInput = document.getElementById("file");
let files = fileInput.files;
for (let index = 0; index < files.length; index++) {
  const file = files[index];
  const source = await readFileAsBlob(file);
  try {
    await doc.loadSource(source);  
  } catch (error) {
    console.log(error);
  }
}
   
function readFileAsBlob(file){
  return new Promise((resolve, reject) => {
    let fileReader = new FileReader();
    fileReader.onload = function(e){
      const blob = new Blob([new Uint8Array(e.target.result)], {type: file.type });
      resolve(blob);
    };
    fileReader.onerror = function () {
      reject();
    };
    fileReader.readAsArrayBuffer(file);
  })
}

Save the images as PDF.
```
const blob = await doc.saveToPdf();
```

Download the PDF with the following function.

function downloadBlob(blob){
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob);
  link.download = "scanned.pdf";
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(link.href);
}

Step 5: Add an Image Editing Interface

Dynamsoft Document Viewer comes with a set of viewers. We can use its EditViewer to view and edit the selected images before merging into a PDF file.

Add a container in the HTML.

<div id="container" style="height:480px;"></div>

Use the following code to start it.

let editViewer = new Dynamsoft.DDV.EditViewer({
  container: "container",
});
editViewer.openDocument(doc.uid);

EditViewer

We can rotate, crop, reorder and delete the images and apply filters for the images.

Common Issues and Edge Cases

Large images cause slow PDF generation. Very high-resolution photos (e.g., 4000 × 3000 px each) increase memory usage and processing time in the browser. Consider resizing images before loading them, or warn users to keep individual file sizes under 10 MB.
Unsupported file formats fail silently. loadSource throws an error for formats the SDK does not recognize (e.g., WebP or SVG). Wrap each loadSource call in a try/catch block and display a user-facing message when a file is skipped.
Browser tab crashes with too many files. Loading dozens of large images at once can exceed the browser’s memory limit. Process files in batches or add a reasonable file-count cap to avoid out-of-memory errors.

Source Code

Get the source code to have a try:

https://github.com/tony-xlh/Merge-Images-to-PDF