| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <meta name="theme-color" content="#f7f8ff" /> |
| <meta name="description" content="Merge PDF files quickly and privately in your browser with PDFix." /> |
| <title>Merge PDF Files Online — PDFix</title> |
| <style> |
| :root { |
| --bg: #f7f8ff; --surface: #fff; --ink: #17182d; --muted: #71738a; |
| --line: #e7e8f2; --primary: #635bff; --primary-dark: #4c43e8; |
| --soft: #efedff; --green: #119b82; --danger: #d94765; |
| --shadow: 0 18px 55px rgba(47,43,112,.09); |
| } |
| * { box-sizing: border-box; } |
| body { |
| margin: 0; min-height: 100vh; color: var(--ink); |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| background: radial-gradient(circle at 85% 5%, rgba(177,171,255,.19), transparent 25rem), |
| radial-gradient(circle at 4% 35%, rgba(115,221,211,.12), transparent 22rem), var(--bg); |
| line-height: 1.5; |
| } |
| a { color: inherit; text-decoration: none; } |
| button, input { font: inherit; } |
| button { cursor: pointer; } |
| .container { width: min(1040px, calc(100% - 32px)); margin: 0 auto; } |
| header { padding: 20px 0; } |
| .nav { display:flex; align-items:center; justify-content:space-between; gap:18px; } |
| .brand { display:inline-flex; align-items:center; gap:10px; font-size:1.4rem; font-weight:850; letter-spacing:-1px; } |
| .brand-mark { width:39px; height:39px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg,#766dff,#4c43e8); box-shadow:0 8px 20px rgba(99,91,255,.25); } |
| .brand-mark svg { width:23px; height:23px; } |
| .brand-name span { color:var(--primary); } |
| .back-link { color:#65677d; font-weight:650; font-size:.92rem; } |
| .back-link:hover { color:var(--primary); } |
| main { padding: 42px 0 70px; } |
| .intro { text-align:center; max-width:700px; margin:0 auto 28px; } |
| .eyebrow { display:inline-flex; gap:8px; align-items:center; padding:7px 12px; border:1px solid #e4e1ff; border-radius:99px; background:rgba(255,255,255,.8); color:#5a52e9; font-size:.82rem; font-weight:750; } |
| h1 { margin:18px 0 12px; font-size:clamp(2.4rem,5vw,4rem); line-height:1.06; letter-spacing:-2.7px; } |
| h1 span { color:var(--primary); } |
| .intro p { margin:0; color:var(--muted); font-size:1.05rem; } |
| .workspace { max-width:820px; margin:0 auto; border:1px solid rgba(99,91,255,.14); border-radius:24px; padding:12px; background:rgba(255,255,255,.9); box-shadow:var(--shadow); } |
| .dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:220px; padding:26px 18px; text-align:center; border:2px dashed #cbc8ff; border-radius:17px; background:linear-gradient(135deg,rgba(238,237,255,.72),rgba(239,253,251,.5)); transition:.2s ease; } |
| .dropzone.dragover { border-color:var(--primary); background:#efedff; transform:scale(.995); } |
| .upload-icon { width:54px; height:54px; display:grid; place-items:center; margin-bottom:13px; border-radius:17px; color:var(--primary); background:#fff; box-shadow:0 7px 18px rgba(71,64,160,.1); } |
| .upload-icon svg { width:28px; height:28px; } |
| .dropzone strong { font-size:1.1rem; } |
| .dropzone p { margin:5px 0 16px; color:var(--muted); font-size:.9rem; } |
| .btn { border:0; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 18px; border-radius:13px; font-weight:750; transition:.2s ease; } |
| .btn-primary { color:#fff; background:var(--primary); box-shadow:0 8px 18px rgba(99,91,255,.22); } |
| .btn-primary:hover:not(:disabled) { background:var(--primary-dark); transform:translateY(-1px); } |
| .btn-light { color:#4b4d64; background:#fff; border:1px solid var(--line); } |
| .btn-light:hover { border-color:#c9c5ff; color:var(--primary); } |
| button:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; } |
| input[type=file] { display:none; } |
| .file-panel { display:none; padding:22px 10px 8px; } |
| .file-panel.visible { display:block; } |
| .panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:13px; } |
| .panel-head h2 { margin:0; font-size:1.12rem; } |
| .count { color:var(--muted); font-size:.86rem; } |
| .file-list { display:grid; gap:10px; } |
| .file-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px; border:1px solid var(--line); border-radius:14px; background:#fff; } |
| .file-icon { width:42px; height:46px; display:grid; place-items:center; border-radius:11px; color:#e6536a; background:#fff0f2; } |
| .file-icon svg { width:23px; height:23px; } |
| .file-meta { min-width:0; } |
| .file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; font-size:.92rem; } |
| .file-size { color:var(--muted); font-size:.8rem; margin-top:3px; } |
| .file-actions { display:flex; align-items:center; gap:5px; } |
| .icon-btn { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; color:#696b80; background:#fff; } |
| .icon-btn:hover:not(:disabled) { color:var(--primary); border-color:#c9c5ff; } |
| .icon-btn.remove:hover { color:var(--danger); border-color:#ffc7d1; } |
| .icon-btn svg { width:17px; height:17px; } |
| .panel-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:17px; } |
| .privacy { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:.82rem; } |
| .privacy svg { width:17px; height:17px; color:var(--green); flex-shrink:0; } |
| .status { display:none; margin-top:17px; padding:13px 15px; border-radius:12px; font-size:.9rem; } |
| .status.show { display:block; } |
| .status.info { background:#efedff; color:#4c43c9; } |
| .status.success { background:#e6fbf3; color:#087d68; } |
| .status.error { background:#fff0f2; color:#b52b49; } |
| .tips { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; max-width:820px; margin:24px auto 0; } |
| .tip { padding:18px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.72); } |
| .tip b { display:block; margin-bottom:5px; font-size:.92rem; } |
| .tip p { margin:0; color:var(--muted); font-size:.84rem; } |
| footer { border-top:1px solid var(--line); padding:24px 0; color:var(--muted); font-size:.85rem; } |
| .footer-inner { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; } |
| .toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%,18px); opacity:0; pointer-events:none; padding:12px 17px; border-radius:13px; background:#20213a; color:#fff; box-shadow:var(--shadow); z-index:10; transition:.22s ease; max-width:calc(100% - 28px); text-align:center; font-size:.9rem; } |
| .toast.show { opacity:1; transform:translate(-50%,0); } |
| @media(max-width:650px) { |
| main { padding-top:30px; } |
| h1 { letter-spacing:-1.8px; } |
| .tips { grid-template-columns:1fr; } |
| .file-row { grid-template-columns:auto minmax(0,1fr); } |
| .file-actions { grid-column:2; justify-content:flex-start; } |
| .panel-head { align-items:flex-start; flex-direction:column; } |
| .panel-actions { align-items:stretch; flex-direction:column; } |
| .panel-actions .btn { width:100%; } |
| } |
| </style> |
| </head> |
| <body> |
| <header> |
| <div class="container nav"> |
| <a class="brand" href="index.html" aria-label="PDFix homepage"> |
| <span class="brand-mark"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M7 3.5h7l4 4V20a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 20V5A1.5 1.5 0 0 1 7.5 3.5Z" stroke="currentColor" stroke-width="1.8"/><path d="M14 3.8V8h4M8.5 12h7M8.5 15.5h7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span> |
| <span class="brand-name">PDF<span>ix</span></span> |
| </a> |
| <a class="back-link" href="index.html">← Back to all tools</a> |
| </div> |
| </header> |
|
|
| <main> |
| <div class="container"> |
| <div class="intro"> |
| <div class="eyebrow">✦ PDFix PDF tools</div> |
| <h1>Merge <span>PDF files</span></h1> |
| <p>Bring multiple documents together into one PDF. Add your files, arrange their order, and download the merged result.</p> |
| </div> |
|
|
| <div class="workspace"> |
| <div class="dropzone" id="dropzone" tabindex="0" role="button" aria-label="Choose or drop PDF files"> |
| <div class="upload-icon"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5M5 14.5v4A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5v-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div> |
| <strong>Drop PDF files here</strong> |
| <p>Choose two or more PDFs to combine them into one file.</p> |
| <button type="button" class="btn btn-primary" id="chooseFiles">Select PDF files <span aria-hidden="true">↑</span></button> |
| <input id="fileInput" type="file" accept=".pdf,application/pdf" multiple /> |
| </div> |
|
|
| <div class="file-panel" id="filePanel"> |
| <div class="panel-head"> |
| <div><h2>Your PDF files</h2><div class="count" id="fileCount">0 files selected</div></div> |
| <button type="button" class="btn btn-light" id="addMore">＋ Add more files</button> |
| </div> |
| <div class="file-list" id="fileList"></div> |
| <div class="panel-actions"> |
| <div class="privacy"><svg viewBox="0 0 24 24" fill="none"><path d="M12 3 19 6v5c0 4.5-2.9 7.7-7 10-4.1-2.3-7-5.5-7-10V6l7-3Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> Files are processed in your browser.</div> |
| <button type="button" class="btn btn-primary" id="mergeBtn" disabled>Merge PDFs <span aria-hidden="true">→</span></button> |
| </div> |
| <div class="status" id="status" role="status" aria-live="polite"></div> |
| </div> |
| </div> |
|
|
| <div class="tips"> |
| <article class="tip"><b>① Add your files</b><p>Select at least two PDF documents or drag them into the upload area.</p></article> |
| <article class="tip"><b>② Arrange the order</b><p>Use the arrows beside each file to choose the order of pages in the final PDF.</p></article> |
| <article class="tip"><b>③ Merge and download</b><p>PDFix combines your files locally, then saves the new PDF to your device.</p></article> |
| </div> |
| </div> |
| </main> |
|
|
| <footer><div class="container footer-inner"><a class="brand" href="index.html"><span class="brand-name">PDF<span>ix</span></span></a><span>© <span id="year"></span> PDFix · Your documents, made simple.</span></div></footer> |
| <div class="toast" id="toast" role="status" aria-live="polite"></div> |
|
|
| |
| <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script> |
| <script> |
| const fileInput = document.getElementById('fileInput'); |
| const dropzone = document.getElementById('dropzone'); |
| const filePanel = document.getElementById('filePanel'); |
| const fileList = document.getElementById('fileList'); |
| const fileCount = document.getElementById('fileCount'); |
| const mergeBtn = document.getElementById('mergeBtn'); |
| const statusBox = document.getElementById('status'); |
| const toast = document.getElementById('toast'); |
| let selectedFiles = []; |
| let toastTimer; |
| |
| document.getElementById('year').textContent = new Date().getFullYear(); |
| |
| function showToast(message) { |
| toast.textContent = message; |
| toast.classList.add('show'); |
| clearTimeout(toastTimer); |
| toastTimer = setTimeout(() => toast.classList.remove('show'), 3000); |
| } |
| function setStatus(message, type = 'info') { |
| statusBox.textContent = message; |
| statusBox.className = `status show ${type}`; |
| } |
| function clearStatus() { |
| statusBox.textContent = ''; |
| statusBox.className = 'status'; |
| } |
| function formatSize(bytes) { |
| if (bytes < 1024 * 1024) return `${Math.max(1, Math.round(bytes / 1024))} KB`; |
| return `${(bytes / (1024 * 1024)).toFixed(2)} MB`; |
| } |
| function pdfIcon() { |
| return '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6.5 3.5h8l4 4V20a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 5.5 20V5A1.5 1.5 0 0 1 7 3.5Z" stroke="currentColor" stroke-width="1.7"/><path d="M14.5 3.8V8h4M8 12h8M8 15h6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>'; |
| } |
| function addFiles(fileCollection) { |
| const incoming = Array.from(fileCollection || []); |
| if (!incoming.length) return; |
| const invalid = incoming.filter(file => !file.name.toLowerCase().endsWith('.pdf') && file.type !== 'application/pdf'); |
| if (invalid.length) { |
| showToast('Please select PDF files only. Non-PDF files were skipped.'); |
| } |
| const valid = incoming.filter(file => file.name.toLowerCase().endsWith('.pdf') || file.type === 'application/pdf'); |
| valid.forEach(file => { |
| const duplicate = selectedFiles.some(existing => existing.name === file.name && existing.size === file.size && existing.lastModified === file.lastModified); |
| if (!duplicate) selectedFiles.push(file); |
| }); |
| renderFiles(); |
| fileInput.value = ''; |
| if (valid.length) clearStatus(); |
| } |
| function renderFiles() { |
| fileList.innerHTML = ''; |
| filePanel.classList.toggle('visible', selectedFiles.length > 0); |
| fileCount.textContent = `${selectedFiles.length} ${selectedFiles.length === 1 ? 'file' : 'files'} selected`; |
| mergeBtn.disabled = selectedFiles.length < 2; |
| selectedFiles.forEach((file, index) => { |
| const row = document.createElement('div'); |
| row.className = 'file-row'; |
| const icon = document.createElement('div'); |
| icon.className = 'file-icon'; |
| icon.innerHTML = pdfIcon(); |
| const meta = document.createElement('div'); |
| meta.className = 'file-meta'; |
| const name = document.createElement('div'); |
| name.className = 'file-name'; |
| name.textContent = file.name; |
| name.title = file.name; |
| const size = document.createElement('div'); |
| size.className = 'file-size'; |
| size.textContent = formatSize(file.size); |
| meta.append(name, size); |
| |
| const actions = document.createElement('div'); |
| actions.className = 'file-actions'; |
| actions.append( |
| makeIconButton('↑', 'Move file up', index === 0, () => moveFile(index, -1)), |
| makeIconButton('↓', 'Move file down', index === selectedFiles.length - 1, () => moveFile(index, 1)), |
| makeIconButton('×', 'Remove file', false, () => removeFile(index), true) |
| ); |
| row.append(icon, meta, actions); |
| fileList.append(row); |
| }); |
| } |
| function makeIconButton(label, ariaLabel, disabled, action, isRemove = false) { |
| const button = document.createElement('button'); |
| button.type = 'button'; |
| button.className = `icon-btn${isRemove ? ' remove' : ''}`; |
| button.textContent = label; |
| button.setAttribute('aria-label', ariaLabel); |
| button.title = ariaLabel; |
| button.disabled = disabled; |
| button.addEventListener('click', action); |
| return button; |
| } |
| function moveFile(index, direction) { |
| const target = index + direction; |
| if (target < 0 || target >= selectedFiles.length) return; |
| [selectedFiles[index], selectedFiles[target]] = [selectedFiles[target], selectedFiles[index]]; |
| renderFiles(); |
| clearStatus(); |
| } |
| function removeFile(index) { |
| selectedFiles.splice(index, 1); |
| renderFiles(); |
| clearStatus(); |
| } |
| |
| document.getElementById('chooseFiles').addEventListener('click', event => { |
| event.stopPropagation(); |
| fileInput.click(); |
| }); |
| document.getElementById('addMore').addEventListener('click', () => fileInput.click()); |
| dropzone.addEventListener('click', event => { |
| if (event.target.closest('button')) return; |
| fileInput.click(); |
| }); |
| dropzone.addEventListener('keydown', event => { |
| if (event.key === 'Enter' || event.key === ' ') { |
| event.preventDefault(); |
| fileInput.click(); |
| } |
| }); |
| fileInput.addEventListener('change', () => addFiles(fileInput.files)); |
| ['dragenter', 'dragover'].forEach(type => dropzone.addEventListener(type, event => { |
| event.preventDefault(); |
| dropzone.classList.add('dragover'); |
| })); |
| ['dragleave', 'drop'].forEach(type => dropzone.addEventListener(type, event => { |
| event.preventDefault(); |
| dropzone.classList.remove('dragover'); |
| })); |
| dropzone.addEventListener('drop', event => addFiles(event.dataTransfer.files)); |
| |
| mergeBtn.addEventListener('click', async () => { |
| if (selectedFiles.length < 2) { |
| setStatus('Please add at least two PDF files to merge.', 'error'); |
| return; |
| } |
| if (!window.PDFLib) { |
| setStatus('The PDF library could not load. Check your internet connection and reload this page.', 'error'); |
| return; |
| } |
| const originalLabel = mergeBtn.innerHTML; |
| mergeBtn.disabled = true; |
| mergeBtn.textContent = 'Merging PDFs…'; |
| setStatus('Merging your files. Please keep this tab open.', 'info'); |
| try { |
| const { PDFDocument } = window.PDFLib; |
| const mergedPdf = await PDFDocument.create(); |
| for (let i = 0; i < selectedFiles.length; i++) { |
| const file = selectedFiles[i]; |
| setStatus(`Reading file ${i + 1} of ${selectedFiles.length}: ${file.name}`, 'info'); |
| const bytes = await file.arrayBuffer(); |
| const sourcePdf = await PDFDocument.load(bytes); |
| const copiedPages = await mergedPdf.copyPages(sourcePdf, sourcePdf.getPageIndices()); |
| copiedPages.forEach(page => mergedPdf.addPage(page)); |
| } |
| const outputBytes = await mergedPdf.save(); |
| const blob = new Blob([outputBytes], { type: 'application/pdf' }); |
| const url = URL.createObjectURL(blob); |
| const link = document.createElement('a'); |
| link.href = url; |
| link.download = 'pdfix-merged.pdf'; |
| document.body.appendChild(link); |
| link.click(); |
| link.remove(); |
| setTimeout(() => URL.revokeObjectURL(url), 1500); |
| setStatus('Success! Your merged PDF has been downloaded as pdfix-merged.pdf.', 'success'); |
| } catch (error) { |
| console.error(error); |
| setStatus('We could not merge one of these files. It may be damaged, password-protected, or use an unsupported PDF feature. Please check the files and try again.', 'error'); |
| } finally { |
| mergeBtn.disabled = selectedFiles.length < 2; |
| mergeBtn.innerHTML = originalLabel; |
| } |
| }); |
| </script> |
| </body> |
| </html> |
