免费PDF合并 – 在线合并多个PDF，拖拽排序，本地处理

2026-10-21 40 0 0 提交需求异常反馈

免费在线 PDF 合并工具。支持一次上传最多10个PDF，拖拽调整合并顺序，合并仅复制页面、不重新编码，文字仍可搜索。PDF 不上传服务器，适合整理合同/报告/扫描件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PDF合并 · 免费在线批量合并工具</title>

<script>
(function () {
    var sources = [
        'https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js',
        'https://cdn.jsdelivr.net/npm/pdf-lib@1.17.1/dist/pdf-lib.min.js'
    ];
    var idx = 0;
    function tryLoad() {
        if (typeof window.PDFLib !== 'undefined') return;
        if (idx >= sources.length) {
            console.warn('pdf-lib 所有 CDN 均加载失败');
            return;
        }
        var s = document.createElement('script');
        s.src = sources[idx++];
        s.onload = function () {
            if (typeof window.PDFLib === 'undefined') tryLoad();
        };
        s.onerror = function () { tryLoad(); };
        document.head.appendChild(s);
    }
    tryLoad();
})();
</script>

/* ===== 头部 ===== */
    .header {
        display: flex; align-items: center; justify-content: space-between;
        flex-wrap: wrap; gap: 12px 18px; margin-bottom: 28px;
    }
    .header-left { display: flex; align-items: center; gap: 12px; }
    .logo {
        font-size: 28px; font-weight: 700;
        background: linear-gradient(135deg, var(--primary), #8b6eff);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        background-clip: text; letter-spacing: -0.5px;
    }
    .logo-icon { font-size: 32px; line-height: 1; -webkit-text-fill-color: initial; }
    .badge {
        font-size: 12px; font-weight: 500; background: var(--primary-light);
        color: var(--primary); padding: 4px 12px; border-radius: 20px;
        -webkit-text-fill-color: var(--primary);
    }
    .header-right {
        font-size: 14px; color: var(--text-secondary);
        display: flex; align-items: center; gap: 6px;
    }
    .header-right span { background: var(--bg); padding: 4px 12px; border-radius: 20px; }

/* ===== 上传区 ===== */
    .upload-zone {
        border: 2px dashed var(--border);
        border-radius: var(--radius);
        padding: 40px 20px;
        text-align: center;
        cursor: pointer;
        transition: var(--transition);
        background: var(--bg);
        position: relative;
        margin-bottom: 28px;
    }
    .upload-zone:hover { border-color: var(--primary); background: var(--primary-light); }
    .upload-zone.dragover {
        border-color: var(--primary); background: var(--primary-light);
        transform: scale(1.005);
    }
    .upload-zone .icon { font-size: 48px; display: block; margin-bottom: 8px; }
    .upload-zone h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
    .upload-zone p { color: var(--text-secondary); font-size: 14px; }
    .upload-zone .hint { margin-top: 8px; font-size: 13px; color: var(--text-secondary); }
    .upload-zone input[type="file"] {
        position: absolute; inset: 0; opacity: 0; cursor: pointer;
        width: 100%; height: 100%;
    }
    .upload-zone .file-types {
        display: inline-block; margin-top: 6px; font-size: 12px;
        background: var(--card); padding: 2px 14px; border-radius: 20px;
        color: var(--text-secondary); border: 1px solid var(--border);
    }

/* ===== 文件列表 ===== */
    .file-list {
        margin-bottom: 24px;
        max-height: 600px;
        overflow-y: auto;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg);
        padding: 4px 0;
    }
    .file-list-empty {
        padding: 40px 20px; text-align: center;
        color: var(--text-secondary); font-size: 15px;
    }
    .file-item {
        display: flex; align-items: center; gap: 14px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
        background: var(--card);
        transition: var(--transition);
        cursor: grab;
        user-select: none;
    }
    .file-item:last-child { border-bottom: none; }
    .file-item:hover { background: #fafbff; }
    .file-item.dragging {
        opacity: 0.4;
        background: var(--primary-light);
    }
    .file-item.drag-over {
        border-top: 3px solid var(--primary);
    }

.drag-handle {
        color: var(--text-secondary);
        font-size: 18px;
        cursor: grab;
        flex-shrink: 0;
        line-height: 1;
    }
    .drag-handle:active { cursor: grabbing; }

.file-order {
        width: 28px; height: 28px; flex-shrink: 0;
        border-radius: 50%;
        background: var(--primary);
        color: #fff;
        font-size: 12px; font-weight: 700;
        display: flex; align-items: center; justify-content: center;
    }

.file-thumb {
        width: 56px; height: 56px; flex-shrink: 0;
        border-radius: 6px; background: #f0f2f5;
        overflow: hidden; display: flex; align-items: center; justify-content: center;
        border: 1px solid var(--border);
    }
    .file-thumb .placeholder-thumb { font-size: 28px; opacity: 0.4; }

.file-info {
        flex: 1; min-width: 0;
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 4px 16px;
    }
    .file-info .name {
        font-weight: 500; font-size: 14px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 240px;
    }
    .file-info .size { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
    .file-info .status {
        font-size: 12px; padding: 2px 12px; border-radius: 20px;
        background: var(--bg); color: var(--text-secondary); white-space: nowrap;
    }
    .file-info .status.done { background: #e8f5e9; color: #2e7d32; }
    .file-info .status.error { background: #fce4ec; color: #c62828; }
    .file-info .status.loading { background: #e3f2fd; color: #1565c0; }

.file-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .file-actions .btn-sm {
        padding: 4px 14px; border-radius: 20px; border: none;
        background: var(--primary-light); color: var(--primary);
        font-size: 12px; font-weight: 500; cursor: pointer; transition: var(--transition);
        font-family: var(--font);
    }
    .file-actions .btn-sm:hover { background: var(--primary); color: #fff; }
    .file-actions .btn-sm:disabled {
        opacity: 0.4; cursor: not-allowed;
        background: var(--border); color: var(--text-secondary);
    }
    .file-actions .btn-sm.danger { background: #fee; color: #e53935; }
    .file-actions .btn-sm.danger:hover { background: #e53935; color: #fff; }

/* ===== 控件区 ===== */
    .controls {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 18px 28px;
        padding: 20px 0 0;
        border-top: 1px solid var(--border);
        margin-top: 4px;
    }
    .control-group {
        display: flex; align-items: center; gap: 12px; flex: 1 1 200px;
    }
    .control-group label {
        font-size: 14px; font-weight: 500; white-space: nowrap;
        color: var(--text-secondary);
    }

.btn-download-all {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 10px 28px; border-radius: var(--radius-sm); border: none;
        background: var(--primary); color: #fff;
        font-size: 15px; font-weight: 600; cursor: pointer;
        transition: var(--transition);
        box-shadow: 0 4px 14px rgba(79, 124, 255, 0.25);
        white-space: nowrap;
        font-family: var(--font);
    }
    .btn-download-all:hover {
        background: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(79, 124, 255, 0.35);
    }
    .btn-download-all:disabled {
        opacity: 0.4; cursor: not-allowed;
        transform: none; box-shadow: none;
    }
    .btn-clear-all {
        background: #f5f5f5; color: var(--text-secondary);
        box-shadow: none; margin-right: 8px;
    }
    .btn-clear-all:hover { background: #e0e0e0; color: var(--text); }

/* ===== 进度条 ===== */
    .progress-container {
        margin-top: 18px; padding: 12px 16px;
        background: var(--bg); border-radius: var(--radius-sm);
    }
    .progress-bar {
        height: 8px; background: #e8edf6; border-radius: 4px;
        overflow: hidden; margin-bottom: 6px;
    }
    .progress-fill {
        height: 100%; width: 0%;
        background: linear-gradient(90deg, var(--primary), #8b6eff);
        border-radius: 4px; transition: width 0.3s ease;
    }
    .progress-text {
        font-size: 13px; color: var(--text-secondary); text-align: center;
    }

/* ===== 页脚 ===== */
    .footer {
        margin-top: 24px; padding-top: 16px;
        border-top: 1px solid var(--border);
        display: flex; justify-content: space-between; align-items: center;
        flex-wrap: wrap; gap: 8px;
        font-size: 13px; color: var(--text-secondary);
    }
    .footer .stats { display: flex; gap: 10px; flex-wrap: wrap; }
    .footer .stats span {
        background: var(--bg); padding: 3px 14px;
        border-radius: 20px; font-size: 12px;
    }
    .footer .status-msg { color: var(--primary); font-weight: 500; }
    .footer .engine-warn { color: #c62828; font-weight: 500; }

@media (max-width: 768px) {
        .file-item { flex-wrap: wrap; }
        .file-info { flex: 1 1 100%; order: 2; }
        .file-thumb { order: 1; }
        .file-actions { order: 3; width: 100%; justify-content: flex-end; }
        .controls { flex-direction: column; align-items: stretch; }
        .btn-download-all { justify-content: center; }
        .header { flex-direction: column; align-items: flex-start; }
        .footer { flex-direction: column; align-items: flex-start; }
    }

::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
</style>
<style id="__host_fusion__">
html, body { background: transparent !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; }
body > .container, body > .site-shell, body > .wrapper, body > main, body > div:first-of-type:not(.toast):not(.activation-overlay):not([class*="modal"]):not([class*="skip-link"]) { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; margin: 0 auto !important; max-width: 100% !important; }
body > .site-shell > .site-header, body > .site-shell > .site-footer { display: none !important; }
button, .btn, input, select, textarea { font-family: inherit; }
</style></head>
<body>

<div class="app" id="app">
    <header class="header">
        <div class="header-left">
            <span class="logo"><span class="logo-icon">📎</span> PDF合并</span>
            <span class="badge">拖拽排序 · 批量合并</span>
        </div>
        <div class="header-right">
            <span>⚡ 纯前端 · 本地处理</span>
        </div>
    </header>

<div class="upload-zone" id="uploadZone">
        <span class="icon">📤</span>
        <h3>拖拽 PDF 文件到此处，或点击上传（支持多份）</h3>
        <p>支持 .pdf 格式，单文件最大 50 MB，最多 10 个文件</p>
        <div class="hint">⬆ 上传后可拖拽文件列表调整合并顺序</div>
        <div class="file-types">📁 选择多份 PDF</div>
        <input type="file" id="fileInput" accept=".pdf,application/pdf" multiple />
    </div>

<div class="controls" id="controls">
        <div class="control-group" style="flex:1;">
            <span style="font-size:13px;color:var(--text-secondary);">
                💡 拖拽文件调整顺序，排在上面的先合并
            </span>
        </div>
        <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-left:auto;">
            <button class="btn-download-all btn-clear-all" id="clearAllBtn">🗑️ 清除全部</button>
            <button class="btn-download-all" id="mergeBtn" disabled>🔄 开始合并</button>
            <button class="btn-download-all" id="downloadBtn" disabled>⬇️ 下载合并文件</button>
        </div>
    </div>

<footer class="footer">
        <div class="stats">
            <span>🔒 本地处理 · PDF 不上传服务器</span>
            <span id="fileCount">📎 共 0 个文件</span>
            <span id="statusMsg" class="status-msg"></span>
            <span id="engineStatus" class="engine-warn" style="display:none;"></span>
        </div>
        <div class="action-hint">
            <span>⚡ 合并仅复制页面，不改变原内容质量</span>
        </div>
    </footer>
</div>

/* ============================================================
     *  一、依赖检测
     * ============================================================ */
    const engineStatusEl = document.getElementById('engineStatus');

function missingLibs() {
        const missing = [];
        if (typeof window.PDFLib === 'undefined') missing.push('pdf-lib');
        return missing;
    }

/* ============================================================
     *  二、DOM 引用与状态
     * ============================================================ */
    const uploadZone = document.getElementById('uploadZone');
    const fileInput = document.getElementById('fileInput');
    const fileListEl = document.getElementById('fileList');
    const listEmpty = document.getElementById('listEmpty');
    const fileCountEl = document.getElementById('fileCount');
    const statusMsgEl = document.getElementById('statusMsg');
    const mergeBtn = document.getElementById('mergeBtn');
    const downloadBtn = document.getElementById('downloadBtn');
    const clearAllBtn = document.getElementById('clearAllBtn');
    const progressContainer = document.getElementById('progressContainer');
    const progressFill = document.getElementById('progressFill');
    const progressText = document.getElementById('progressText');

let filesData = [];
    let idCounter = 0;
    let merging = false;
    let mergedBlob = null;
    let dragSourceIndex = -1;

function showStatus(msg, type) {
        if (!statusMsgEl) return;
        statusMsgEl.textContent = msg;
        statusMsgEl.style.color = type === 'error' ? '#c62828'
            : type === 'success' ? '#2e7d32'
            : 'var(--primary)';
        clearTimeout(showStatus._t);
        showStatus._t = setTimeout(() => {
            if (statusMsgEl.textContent === msg) statusMsgEl.textContent = '';
        }, 5000);
    }

function formatFileSize(bytes) {
        if (!bytes || bytes === 0) return '0 B';
        const units = ['B', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(1024));
        const size = (bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1);
        return size + ' ' + units[i];
    }

/* ============================================================
     *  三、上传处理
     * ============================================================ */
    async function handleFiles(fileList) {
        if (!checkLibsReady(true)) return;

for (const file of valid) {
            const f = {
                id: ++idCounter,
                file: file,
                arrayBuffer: null,
                pageCount: 0,
                status: 'loading',
                error: null
            };
            filesData.push(f);
            renderList();

try {
                const buf = await file.arrayBuffer();
                f.arrayBuffer = buf;
                const { PDFDocument } = window.PDFLib;
                const pdfDoc = await PDFDocument.load(buf, { ignoreEncryption: true });
                f.pageCount = pdfDoc.getPageCount();
                f.status = 'waiting';
            } catch (err) {
                console.error('PDF 解析失败:', err);
                f.status = 'error';
                f.error = '解析失败：' + (err && err.message ? err.message : '未知错误');
            }
            renderList();
        }
        resetMergedState();
    }

function resetMergedState() {
        mergedBlob = null;
        downloadBtn.disabled = true;
        mergeBtn.disabled = filesData.filter(f => f.status === 'waiting').length === 0;
    }

/* ============================================================
     *  四、文件列表渲染与拖拽排序
     * ============================================================ */
    function renderList() {
        fileListEl.querySelectorAll('.file-item').forEach(el => el.remove());

if (filesData.length === 0) {
            listEmpty.style.display = 'block';
            fileCountEl.textContent = '📎 共 0 个文件';
            mergeBtn.disabled = true;
            downloadBtn.disabled = true;
            return;
        }
        listEmpty.style.display = 'none';
        fileCountEl.textContent = `📎 共 ${filesData.length} 个文件`;

filesData.forEach((f, index) => {
            fileListEl.appendChild(createItem(f, index));
        });

const hasWaiting = filesData.some(f => f.status === 'waiting');
        mergeBtn.disabled = merging || !hasWaiting;
    }

function createItem(f, index) {
        const div = document.createElement('div');
        div.className = 'file-item';
        div.dataset.id = f.id;
        div.draggable = !merging;

const order = document.createElement('span');
        order.className = 'file-order';
        order.textContent = index + 1;
        div.appendChild(order);

const handle = document.createElement('span');
        handle.className = 'drag-handle';
        handle.textContent = '☰';
        div.appendChild(handle);

const thumb = document.createElement('div');
        thumb.className = 'file-thumb';
        const ph = document.createElement('span');
        ph.className = 'placeholder-thumb';
        ph.textContent = '📄';
        thumb.appendChild(ph);
        div.appendChild(thumb);

const info = document.createElement('div');
        info.className = 'file-info';

const name = document.createElement('span');
        name.className = 'name';
        name.textContent = f.file.name;
        name.title = f.file.name;
        info.appendChild(name);

const size = document.createElement('span');
        size.className = 'size';
        size.textContent = formatFileSize(f.file.size) + (f.pageCount ? ` · ${f.pageCount} 页` : '');
        info.appendChild(size);

const actions = document.createElement('div');
        actions.className = 'file-actions';

const delBtn = document.createElement('button');
        delBtn.className = 'btn-sm danger';
        delBtn.textContent = '✕';
        delBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            if (merging) { showStatus('合并进行中，暂不可删除', 'error'); return; }
            removeFile(f.id);
        });
        actions.appendChild(delBtn);
        div.appendChild(actions);

div.addEventListener('dragstart', function (e) {
            if (merging) { e.preventDefault(); return; }
            dragSourceIndex = index;
            this.classList.add('dragging');
            e.dataTransfer.effectAllowed = 'move';
            try { e.dataTransfer.setData('text/plain', index); } catch (_) {}
        });

div.addEventListener('dragend', function () {
            this.classList.remove('dragging');
            fileListEl.querySelectorAll('.file-item').forEach(el => el.classList.remove('drag-over'));
        });

div.addEventListener('dragover', function (e) {
            e.preventDefault();
            if (dragSourceIndex === index) return;
            this.classList.add('drag-over');
            e.dataTransfer.dropEffect = 'move';
        });

div.addEventListener('dragleave', function () {
            this.classList.remove('drag-over');
        });

div.addEventListener('drop', function (e) {
            e.preventDefault();
            this.classList.remove('drag-over');
            if (dragSourceIndex < 0 || dragSourceIndex === index) return;
            if (merging) return;

const moved = filesData.splice(dragSourceIndex, 1)[0];
            filesData.splice(index, 0, moved);
            dragSourceIndex = -1;
            renderList();
            resetMergedState();
            showStatus('已调整合并顺序');
        });

return div;
    }

function removeFile(id) {
        const f = filesData.find(x => x.id === id);
        if (f) {
            filesData = filesData.filter(x => x.id !== id);
        }
        if (filesData.length === 0) fileInput.value = '';
        renderList();
        resetMergedState();
    }

/* ============================================================
     *  五、合并
     * ============================================================ */
    function updateProgress(done, total, label) {
        if (!progressContainer) return;
        progressContainer.style.display = 'block';
        const pct = total > 0 ? Math.round((done / total) * 100) : 0;
        progressFill.style.width = pct + '%';
        progressText.textContent = label || `正在合并 ${done}/${total}（${pct}%）`;
    }

function hideProgress() {
        if (!progressContainer) return;
        progressContainer.style.display = 'none';
        progressFill.style.width = '0%';
    }

async function mergePdfs() {
        if (!checkLibsReady(true)) return;

const validFiles = filesData.filter(f => f.status === 'waiting' && f.arrayBuffer);
        if (validFiles.length === 0) {
            showStatus('没有可合并的 PDF 文件', 'error');
            return;
        }

merging = true;
        mergeBtn.disabled = true;
        downloadBtn.disabled = true;

try {
            const { PDFDocument } = window.PDFLib;
            const mergedPdf = await PDFDocument.create();
            let totalPages = 0;

for (let i = 0; i < validFiles.length; i++) {
                const f = validFiles[i];
                updateProgress(i, validFiles.length, `正在合并：${f.file.name}（${i + 1}/${validFiles.length}）`);

try {
                    const srcPdf = await PDFDocument.load(f.arrayBuffer.slice(0), { ignoreEncryption: true });
                    const pageIndices = srcPdf.getPageIndices();
                    const copiedPages = await mergedPdf.copyPages(srcPdf, pageIndices);
                    copiedPages.forEach(page => mergedPdf.addPage(page));
                    totalPages += pageIndices.length;
                    f.status = 'done';
                } catch (err) {
                    console.error(`合并「${f.file.name}」失败:`, err);
                    f.status = 'error';
                    f.error = err && err.message ? err.message : '合并失败';
                }
                renderList();
                await new Promise(r => setTimeout(r, 30));
            }

if (totalPages === 0) {
                throw new Error('没有成功合并任何页面，请检查文件是否损坏或加密。');
            }

updateProgress(validFiles.length, validFiles.length, '正在生成合并文件...');
            const mergedBytes = await mergedPdf.save({ useObjectStreams: true });
            mergedBlob = new Blob([mergedBytes], { type: 'application/pdf' });

hideProgress();
            downloadBtn.disabled = false;
            showStatus(`✅ 合并完成！共 ${totalPages} 页`, 'success');
        } catch (err) {
            console.error('合并失败:', err);
            hideProgress();
            showStatus('❌ 合并失败：' + (err && err.message ? err.message : '未知错误'), 'error');
        } finally {
            merging = false;
            renderList();
        }
    }

function downloadMerged() {
        if (!mergedBlob) { showStatus('请先完成合并', 'error'); return; }

const url = URL.createObjectURL(mergedBlob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'merged.pdf';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        setTimeout(() => URL.revokeObjectURL(url), 5000);
        showStatus('✅ 已开始下载合并文件', 'success');
    }

function clearAll() {
        if (merging) { showStatus('合并进行中，暂不可清空', 'error'); return; }
        if (filesData.length === 0) return;
        if (!confirm('确定要移除所有 PDF 文件吗？')) return;

filesData = [];
        fileInput.value = '';
        mergedBlob = null;
        hideProgress();
        renderList();
        downloadBtn.disabled = true;
        showStatus('🗑️ 已清空所有文件');
    }

/* ============================================================
     *  六、事件绑定
     * ============================================================ */
    fileInput.addEventListener('change', function () {
        if (this.files && this.files.length > 0) handleFiles(this.files);
        this.value = '';
    });

uploadZone.addEventListener('dragover', function (e) {
        e.preventDefault();
        this.classList.add('dragover');
    });
    uploadZone.addEventListener('dragleave', function (e) {
        e.preventDefault();
        this.classList.remove('dragover');
    });
    uploadZone.addEventListener('drop', function (e) {
        e.preventDefault();
        this.classList.remove('dragover');
        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
            handleFiles(e.dataTransfer.files);
        }
    });

mergeBtn.addEventListener('click', mergePdfs);
    downloadBtn.addEventListener('click', downloadMerged);
    clearAllBtn.addEventListener('click', clearAll);

document.addEventListener('keydown', function (e) {
        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
            if (!mergeBtn.disabled) mergeBtn.click();
        }
    });

/* ============================================================
     *  七、初始化
     * ============================================================ */
    function init() {
        checkLibsReady(false);

let tries = 0;
        const poll = setInterval(() => {
            const ok = missingLibs().length === 0;
            checkLibsReady(false);
            tries++;
            if (ok || tries >= 20) clearInterval(poll);
        }, 500);

renderList();
        console.log('📎 PDF合并工具已加载 — 拖拽排序，本地合并');
    }

if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();
</script>
</body>
</html>