Files
bentopdf/src/pages/duplex-collate.html
T
2026-09-04 16:26:08 +05:30

654 lines
23 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Duplex Collate - Reorder Front/Back Scan Blocks | BentoPDF</title>
<meta
name="title"
content="Duplex Collate - Reorder Front/Back Scan Blocks | BentoPDF"
/>
<meta
name="description"
content="Reorder duplex scan PDFs that contain front pages and back pages in separate blocks. Create one collated PDF or grouped output files, directly in your browser."
/>
<meta
name="keywords"
content="duplex collate, adf scan reorder, front back pdf, collate scanned pdf, duplex sort pdf"
/>
<meta name="author" content="BentoPDF" />
<meta
name="robots"
content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
/>
<link rel="canonical" href="https://www.bentopdf.com/duplex-collate" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.bentopdf.com/duplex-collate" />
<meta
property="og:title"
content="Duplex Collate - Reorder Front/Back Scan Blocks"
/>
<meta
property="og:description"
content="Turn front-block/back-block scan output into a correctly collated PDF."
/>
<meta
property="og:image"
content="https://www.bentopdf.com/images/og-pdf-workflow.png"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:url"
content="https://www.bentopdf.com/duplex-collate"
/>
<meta name="twitter:title" content="Duplex Collate" />
<meta
name="twitter:description"
content="Reorder front/back scan blocks into collated page order."
/>
<link href="/src/css/styles.css" rel="stylesheet" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/images/favicon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="512x512"
href="/images/favicon-512x512.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/images/apple-touch-icon.png"
/>
<link rel="icon" href="/favicon.ico" sizes="32x32" />
</head>
<body class="antialiased bg-gray-900">
<!-- htmlhint spec-char-escape:false -->
{{> navbar }}
<!-- htmlhint spec-char-escape:true -->
<div
id="uploader"
class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900"
>
<div
id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700"
>
<button
id="back-to-tools"
class="flex items-center gap-2 text-indigo-300 hover:text-indigo-400 mb-6 font-semibold"
>
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"
>Back to Tools</span
>
</button>
<h1
class="text-2xl font-bold text-white mb-2"
data-i18n="tools:duplexCollate.name"
>
Duplex Collate
</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:duplexCollate.subtitle">
Reorder a PDF scanned as two blocks (all fronts, then all backs) into
proper front/back order.
</p>
<div
id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300"
>
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i
data-lucide="upload-cloud"
class="w-10 h-10 mb-3 text-gray-400"
></i>
<p class="mb-2 text-sm text-gray-400">
<span class="font-semibold" data-i18n="upload.clickToSelect"
>Click to select a file</span
>
<span data-i18n="upload.orDragAndDrop">or drag and drop</span>
</p>
<p class="text-xs text-gray-500" data-i18n="upload.hints.singlePdf">
A single PDF file
</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">
Your files never leave your device.
</p>
</div>
<input
id="file-input"
type="file"
class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf"
/>
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div
id="odd-page-banner"
class="hidden mt-3 p-3 bg-yellow-900/50 border border-yellow-600 text-yellow-300 text-sm rounded-lg"
></div>
<div id="duplex-options" class="hidden mt-6 space-y-4">
<div class="p-3 bg-gray-900 rounded-lg border border-gray-700">
<p class="text-sm text-gray-300">
<span data-i18n="tools:duplexCollate.totalPagesLabel"
>Total pages:</span
>
<span id="total-pages" class="text-white">0</span>
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<label
for="split-page"
class="block mb-2 text-sm font-medium text-gray-300"
data-i18n="tools:duplexCollate.splitAfterPageLabel"
>Split after page</label
>
<input
id="split-page"
type="number"
min="1"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5"
placeholder="e.g. 50"
data-i18n-placeholder="tools:duplexCollate.splitAfterPagePlaceholder"
/>
</div>
<div>
<label
for="back-order"
class="block mb-2 text-sm font-medium text-gray-300"
data-i18n="tools:duplexCollate.backBlockOrderLabel"
>Back block order</label
>
<select
id="back-order"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5"
>
<option
value="reverse"
selected
data-i18n="tools:duplexCollate.backBlockReverseOption"
>
Reverse back block (common for flipped stacks)
</option>
<option
value="keep"
data-i18n="tools:duplexCollate.backBlockKeepOption"
>
Keep back block as-is
</option>
</select>
</div>
</div>
<button
id="auto-split-btn"
class="w-full bg-gray-700 hover:bg-gray-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
data-i18n="tools:duplexCollate.autoSplitButton"
>
Auto-detect split (half)
</button>
<div class="p-3 bg-gray-900 rounded-lg border border-gray-700">
<p id="duplex-preview-summary" class="text-sm text-gray-300"></p>
<p
id="duplex-warning"
class="text-sm text-yellow-400 mt-2 hidden"
></p>
</div>
<label
class="flex items-center gap-2 text-sm text-gray-300 cursor-pointer"
>
<input
id="export-grouped"
type="checkbox"
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded"
/>
<span data-i18n="tools:duplexCollate.exportGroupedLabel"
>Export grouped files by original document length</span
>
</label>
<div id="grouped-options" class="hidden">
<label
for="pages-per-document"
class="block mb-2 text-sm font-medium text-gray-300"
data-i18n="tools:duplexCollate.pagesPerDocumentLabel"
>Pages per original document</label
>
<input
id="pages-per-document"
type="number"
min="1"
value="2"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5"
/>
<p
class="text-xs text-gray-400 mt-2"
data-i18n="tools:duplexCollate.groupedHelp"
>
If enabled, output is a ZIP containing one PDF per grouped
document.
</p>
</div>
<button
id="process-btn"
class="btn-gradient w-full mt-2"
data-i18n="tools:duplexCollate.collateButton"
>
Collate PDF
</button>
</div>
</div>
</div>
<div
id="loader-modal"
class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
>
<div
class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl"
>
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
Processing...
</p>
</div>
</div>
<div
id="alert-modal"
class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden"
>
<div
class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700"
>
<h3 id="alert-title" class="text-xl font-bold text-white mb-2">
Alert
</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button
id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
>
OK
</button>
</div>
</div>
<div
id="confirm-modal"
class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden"
>
<div
class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700"
>
<h3
id="confirm-title"
class="text-xl font-bold text-white mb-2"
data-i18n="tools:duplexCollate.unevenConfirmTitle"
>
Uneven Blocks
</h3>
<p
id="confirm-message"
class="text-gray-300 mb-6 whitespace-pre-line"
></p>
<div class="flex gap-3">
<button
id="confirm-cancel"
class="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
data-i18n="common.cancel"
>
Cancel
</button>
<button
id="confirm-proceed"
class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
data-i18n="warning.proceed"
>
Proceed
</button>
</div>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-8 text-center"
data-i18n="howItWorks.title"
>
How It Works
</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
1
</div>
<div class="flex-1">
<h3
class="text-lg font-semibold text-white mb-1"
data-i18n="tools:duplexCollate.howItWorksStep1Title"
>
Upload the scan
</h3>
<p
class="text-gray-400"
data-i18n="tools:duplexCollate.howItWorksStep1"
>
Drop in the single PDF that holds all the front sides followed by
all the back sides.
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
2
</div>
<div class="flex-1">
<h3
class="text-lg font-semibold text-white mb-1"
data-i18n="tools:duplexCollate.howItWorksStep2Title"
>
Set the split point
</h3>
<p
class="text-gray-400"
data-i18n="tools:duplexCollate.howItWorksStep2"
>
Mark where the front block ends, then choose whether the back
block needs reversing.
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
3
</div>
<div class="flex-1">
<h3
class="text-lg font-semibold text-white mb-1"
data-i18n="tools:duplexCollate.howItWorksStep3Title"
>
Collate and download
</h3>
<p
class="text-gray-400"
data-i18n="tools:duplexCollate.howItWorksStep3"
>
Get one interleaved PDF, or a ZIP with a separate file per
original document.
</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
data-i18n="relatedTools.title"
>
Related PDF Tools
</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a
href="split-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Split PDF</h3>
<p class="text-gray-400 text-sm">Free online split PDF tool</p>
</a>
<a
href="merge-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Merge PDF</h3>
<p class="text-gray-400 text-sm">Free online merge PDF tool</p>
</a>
<a
href="alternate-merge.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Alternate Merge</h3>
<p class="text-gray-400 text-sm">Free online alternate merge tool</p>
</a>
<a
href="organize-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Organize PDF</h3>
<p class="text-gray-400 text-sm">Free online organize PDF tool</p>
</a>
<a
href="reverse-pages.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Reverse Pages</h3>
<p class="text-gray-400 text-sm">Free online reverse pages tool</p>
</a>
<a
href="extract-pages.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Extract Pages</h3>
<p class="text-gray-400 text-sm">Free online extract pages tool</p>
</a>
</div>
</section>
<!-- FAQ Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
data-i18n="faq.sectionTitle"
>
Frequently Asked Questions
</h2>
<div class="faq-list">
<details class="faq-d">
<summary class="faq-d-q">
What kind of scan is this tool for?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
A PDF produced by feeding a stack through a single-sided scanner
twice, once for the fronts and once for the backs, which gives one
file with all front pages first and all back pages after. The tool
interleaves the two blocks into front 1, back 1, front 2, back 2
order. If the fronts and backs are in two separate PDFs, use
<a
href="/alternate-merge"
class="text-indigo-300 hover:text-indigo-400"
>Alternate &amp; Mix Pages</a
>
instead.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
How do I know where to set the split point?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
The split is the last page of the front block, which for a normal
two-pass scan is exactly half the total. Click Auto-detect split
(half) to fill that in, then read the preview summary, which shows
the size of each block and the resulting page count before you
commit.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
What does the grouped export option do?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
If the stack held several short documents, such as two-page forms,
enter the pages per document and the collated output is cut into
chunks of that length. Multiple chunks download as a ZIP with one
PDF per document; a single chunk downloads as a plain PDF.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
What filename does the collated PDF get?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
A single collated file downloads under your original name with
_collated added, for example scan_collated.pdf. Grouped output is a
ZIP named scan_collated_grouped.zip containing the separate PDFs.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I preview the result before downloading?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
The page shows a summary line as you change the split point and back
order, including the front and back block sizes and the output page
count, and it warns when the blocks are uneven. There is no
thumbnail preview, so check the first few pages of the download and
switch the back block order if the backs come out reversed.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Does it keep bookmarks from the scanned PDF?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
The output is rebuilt page by page, so page content and rotation are
preserved but document-level bookmarks aren't carried across.
Scanner output rarely has any, but if yours does you can add them
again with
<a href="/bookmark" class="text-indigo-300 hover:text-indigo-400"
>Edit Bookmarks</a
>.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Is my scanned document uploaded to be reordered?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. The PDF is opened in your browser, the pages are copied into a
new document on your device, and the result is downloaded directly,
so scans of forms and records never leave your computer.
</p>
</details>
</div>
</section>
<!-- htmlhint spec-char-escape:false -->
{{> footer }}
<!-- htmlhint spec-char-escape:true -->
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/js/logic/duplex-collate-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Duplex Collate - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to collate a duplex scan online",
"description": "Learn how to reorder a two-block duplex scan using BentoPDF",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Upload the scan",
"text": "Drop in the single PDF that holds all the front sides followed by all the back sides."
},
{
"@type": "HowToStep",
"position": 2,
"name": "Set the split point",
"text": "Mark where the front block ends, then choose whether the back block needs reversing."
},
{
"@type": "HowToStep",
"position": 3,
"name": "Collate and download",
"text": "Get one interleaved PDF, or a ZIP with a separate file per original document."
}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.bentopdf.com"
},
{
"@type": "ListItem",
"position": 2,
"name": "Duplex Collate",
"item": "https://www.bentopdf.com/duplex-collate"
}
]
}
</script>
</body>
</html>