PDFMerge Pro – Combine PDF Files
/* — CSS SEPARATION START — */
@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap’);:root {
–primary: #EF4444; /* Red-500 (PDF Color) */
–bg-dark: #0F172A;
}body {
font-family: ‘Inter’, sans-serif;
transition: background-color 0.3s, color 0.3s;
}/* PDF Icon Animation */
.pdf-icon-anim {
transition: transform 0.2s;
}
.file-item:hover .pdf-icon-anim {
transform: scale(1.1) rotate(-5deg);
}/* Loading Spinner */
.loader {
border: 3px solid #f3f3f3;
border-radius: 50%;
border-top: 3px solid #EF4444;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}/* Dropzone Active */
.dropzone-active {
border-color: #EF4444 !important;
background-color: rgba(239, 68, 68, 0.05) !important;
transform: scale(1.01);
}/* Ghost element for sorting */
.sortable-ghost {
opacity: 0.4;
background-color: #fee2e2; /* red-100 */
border: 2px dashed #EF4444;
}
.dark .sortable-ghost {
background-color: #7f1d1d; /* red-900 */
border-color: #EF4444;
}/* Dark Mode */
.dark body {
background-color: var(–bg-dark);
color: #F9FAFB;
}
.dark .card {
background-color: #1E293B;
border-color: #334155;
}
/* — CSS SEPARATION END — */
tailwind.config = {
darkMode: ‘class’,
theme: {
extend: {
colors: {
primary: ‘#EF4444’,
}
}
}
}
Combine multiple PDFs into one unified document. Securely processed in your browser—no uploads required.
Drop PDF files here Reorder files after uploading
Select PDFs
0
PDFs Merged! Your file is ready for download.
// — JAVASCRIPT SEPARATION START —// DOM Elements
const dropzone = document.getElementById(‘dropzone’);
const fileInput = document.getElementById(‘fileInput’);
const filesArea = document.getElementById(‘files-area’);
const sortableList = document.getElementById(‘sortable-list’);
const fileCountEl = document.getElementById(‘file-count’);
const btnMerge = document.getElementById(‘btn-merge’);
const mergeStatus = document.getElementById(‘merge-status’);
const successArea = document.getElementById(‘success-area’);
const downloadBtn = document.getElementById(‘download-btn’);let filesArray = []; // Array to store { id, file, name, size }
let isDarkMode = false;
let sortable = null;// — Event Listeners —
dropzone.addEventListener(‘click’, () => fileInput.click());
dropzone.addEventListener(‘dragover’, (e) => {
e.preventDefault();
dropzone.classList.add(‘dropzone-active’);
});
dropzone.addEventListener(‘dragleave’, () => {
dropzone.classList.remove(‘dropzone-active’);
});
dropzone.addEventListener(‘drop’, (e) => {
e.preventDefault();
dropzone.classList.remove(‘dropzone-active’);
if (e.dataTransfer.files.length) handleFiles(e.dataTransfer.files);
});fileInput.addEventListener(‘change’, (e) => {
if (e.target.files.length) handleFiles(e.target.files);
});// Initialize SortableJS
sortable = new Sortable(sortableList, {
animation: 150,
ghostClass: ‘sortable-ghost’,
handle: ‘.drag-handle’, // Only draggable by the handle icon
onEnd: () => {
// Reorder logic if needed, but visual order is sufficient for processing based on DOM order
}
});// — Functions —function addMoreFiles() {
fileInput.click();
}function handleFiles(files) {
dropzone.classList.add(‘hidden’);
filesArea.classList.remove(‘hidden’);
successArea.classList.add(‘hidden’);Array.from(files).forEach(file => {
if (file.type !== ‘application/pdf’) {
alert(‘Skipped non-PDF file: ‘ + file.name);
return;
}const id = ‘file-‘ + Math.random().toString(36).substr(2, 9);
const fileData = { id, file, name: file.name, size: formatBytes(file.size) };
filesArray.push(fileData);
createFileUI(fileData);
});updateCount();
}function createFileUI(data) {
const div = document.createElement(‘div’);
div.id = data.id;
div.className = ‘file-item bg-white dark:bg-slate-800 p-3 rounded-lg shadow-sm border border-gray-200 dark:border-slate-700 flex items-center gap-3 select-none group’;
div.innerHTML = `
`;
sortableList.appendChild(div);
}function removeFile(id) {
const el = document.getElementById(id);
if (el) el.remove();
filesArray = filesArray.filter(f => f.id !== id);
updateCount();
if (filesArray.length === 0) {
resetApp();
}
}function updateCount() {
fileCountEl.innerText = document.getElementById(‘sortable-list’).children.length;
}async function mergePDFs() {
// Get current order from DOM
const itemIds = Array.from(sortableList.children).map(el => el.id);
if (itemIds.length f.id === id);
if (fileData) {
const arrayBuffer = await fileData.file.arrayBuffer();
const pdf = await PDFDocument.load(arrayBuffer);
const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
copiedPages.forEach((page) => mergedPdf.addPage(page));
}
}const mergedPdfBytes = await mergedPdf.save();
const blob = new Blob([mergedPdfBytes], { type: ‘application/pdf’ });
const url = URL.createObjectURL(blob);// Show Success
filesArea.classList.add(‘hidden’);
successArea.classList.remove(‘hidden’);
downloadBtn.href = url;
downloadBtn.download = `merged_document_${new Date().getTime()}.pdf`;} catch (err) {
console.error(err);
alert(“An error occurred while merging PDFs. Some files might be encrypted or corrupted.”);
} finally {
btnMerge.disabled = false;
btnMerge.classList.remove(‘opacity-75’, ‘cursor-not-allowed’);
mergeStatus.classList.add(‘hidden’);
}
}function formatBytes(bytes) {
if (bytes === 0) return ‘0 Bytes’;
const k = 1024;
const sizes = [‘Bytes’, ‘KB’, ‘MB’];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ‘ ‘ + sizes[i];
}function clearAll() {
filesArray = [];
sortableList.innerHTML = ”;
updateCount();
resetApp();
}function resetApp() {
filesArray = [];
sortableList.innerHTML = ”;
fileInput.value = ”;
dropzone.classList.remove(‘hidden’);
filesArea.classList.add(‘hidden’);
successArea.classList.add(‘hidden’);
}function toggleDarkMode() {
isDarkMode = !isDarkMode;
document.documentElement.classList.toggle(‘dark’);
const icon = document.getElementById(‘theme-icon’);
if(isDarkMode) {
icon.classList.remove(‘fa-moon’);
icon.classList.add(‘fa-sun’);
} else {
icon.classList.remove(‘fa-sun’);
icon.classList.add(‘fa-moon’);
}
}// — JAVASCRIPT SEPARATION END —
Using Merge PDF The Merge PDF utility is designed for PDF document tasks. Check the on-page controls for available formats, limits and options. Always review the output for accuracy before sharing or publishing it.
Practical tips Keep your original files or source information as a backup. Choose suitable options using the controls provided by this tool. Check the generated result and retry with different settings if needed. Explore related tools Compress PDF are available for related tasks.