Merge PDFs & Images In The Browser – PDFMerge.js

Preview:

Description:

PDFMerge is an open-source, JavaScript-based web app for combining PDFs and/or JPG/PNG images into a single PDF file right in your browser. Users can set paper sizes to intelligently resize images during conversion.

As PDFMerge runs fully in the browser, you maintain complete ownership over your files. No documents touch external servers at any point, guaranteeing privacy and security over sensitive data. This client-side approach also provides a responsive editing experience free of server lag.

How to use it:

1. Load the required pdf-lib.js in the document.

<script src="https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.min.js"></script>

2. Download and load the PDFMerge’s files in the document.

<link href="css/pdfmerge.css" rel="stylesheet" />
<script src="js/pdfmerge.js"></script>

3. Add the following HTML to your web app. That’s it.

<!-- Loading Spinner -->
<div id="spinner" class="spinner"></div>
<!-- Error Message -->
<div id="error-message"></div>
<!-- Success Message -->
<div id="success-message"></div>
<!-- File Input -->
<label for="file-input" id="file-upload-label">
  Click to add files...
</label>
<input
  accept=".jpg, .jpeg, .png, .pdf"
  id="file-input"
  multiple=""
  type="file"
/>
<!-- Drag'n'drop Area -->
<div id="drop-area">
  <p class="bold">Or drag and drop files here...</p>
</div>
<!-- File List -->
<div id="file-list">
  <ul id="selected-files-list"></ul>
</div>
<!-- Paper Size Dropdown -->
<div class="select-group">
  <div class="select-container">
    <select id="paper-size-dropdown">
      <option value="A0">Fit images to page size A0</option>
      <option value="A1">Fit images to page size A1</option>
      <option value="A2">Fit images to page size A2</option>
      <option value="A3">Fit images to page size A3</option>
      <option value="A4" selected>Fit images to page size A4</option>
      </select>
  </div>
</div>
<!-- Convert Button -->
<button
  id="convert-button"
  onclick="convertToPDF()"
  style="display: none"
>
  Convert and PDF Merge
</button>
<!-- Reset Button -->
<button id="reset-button" onclick="resetPage()" style="display: none">
  Clear File List
</button>
<!-- Download Button -->
<a id="download-link" style="display: none"> Download Merged PDF </a>
<!-- Progress Bar -->
<div id="progress-container">
  <div id="progress-bar"></div>
</div>