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

731 lines
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<meta
name="title"
content="PDF Booklet Online Free - PDF Booklet Tool | BentoPDF"
/>
<meta
name="description"
content="Rearrange pages for double-sided booklet printing. Fold and staple to create a booklet. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta name="keywords" content="pdf booklet, online pdf" />
<meta name="author" content="BentoPDF" />
<meta
name="robots"
content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
/>
<!-- Canonical URL -->
<link rel="canonical" href="https://www.bentopdf.com/pdf-booklet" />
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.bentopdf.com/pdf-booklet" />
<meta
property="og:title"
content="PDF Booklet Online Free - PDF Booklet Tool | BentoPDF"
/>
<meta
property="og:description"
content="Rearrange pages for double-sided booklet printing. Fold and staple to create a booklet. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta
property="og:image"
content="https://www.bentopdf.com/images/og-pdf-booklet.png"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="BentoPDF" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://www.bentopdf.com/pdf-booklet" />
<meta name="twitter:title" content="PDF Booklet Free" />
<meta
name="twitter:description"
content="Rearrange pages for double-sided booklet printing. Fold and staple to create a booklet. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta
name="twitter:image"
content="https://www.bentopdf.com/images/twitter-pdf-booklet.png"
/>
<meta name="twitter:site" content="@BentoPDF" />
<!-- Mobile Web App -->
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="PDF Booklet" />
<title>PDF Booklet - BentoPDF</title>
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest" />
<!-- Favicons -->
<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">
{{> navbar }}
<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-4xl 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:pdfBooklet.name"
>
PDF Booklet
</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:pdfBooklet.subtitle">
Rearrange pages for double-sided booklet printing. Fold and staple to
create a booklet.
</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 class="ph ph-upload-simple text-4xl 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="tool-options" class="hidden mt-6">
<div class="p-3 bg-gray-900 rounded-lg border border-gray-700 mb-4">
<p class="text-sm text-gray-300">
<strong class="text-white" data-i18n="tools:pdfBooklet.howItWorks"
>How it works:</strong
>
</p>
<ul
class="list-disc list-inside text-xs text-gray-400 mt-1 space-y-1"
>
<li data-i18n="tools:pdfBooklet.step1">Upload a PDF file.</li>
<li data-i18n="tools:pdfBooklet.step2">
Pages will be rearranged in booklet order.
</li>
<li data-i18n="tools:pdfBooklet.step3">
Print double-sided, flip on short edge, fold and staple.
</li>
</ul>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div class="bg-gray-900 rounded-lg border border-gray-700 p-4">
<label class="block mb-3 text-sm font-medium text-white"
>Source Rotation</label
>
<div class="space-y-2">
<label
class="flex items-center gap-2 cursor-pointer text-sm text-gray-300"
>
<input
type="radio"
name="rotation"
value="none"
checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600"
/>
<span>No rotation</span>
</label>
<label
class="flex items-center gap-2 cursor-pointer text-sm text-gray-300"
>
<input
type="radio"
name="rotation"
value="90cw"
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600"
/>
<span>Rotate clockwise (90°)</span>
</label>
<label
class="flex items-center gap-2 cursor-pointer text-sm text-gray-300"
>
<input
type="radio"
name="rotation"
value="90ccw"
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600"
/>
<span>Rotate counter-clockwise (90°)</span>
</label>
<label
class="flex items-center gap-2 cursor-pointer text-sm text-gray-300"
>
<input
type="radio"
name="rotation"
value="alternate"
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600"
/>
<span>Alternate (odd→CW, even→CCW)</span>
</label>
</div>
</div>
<div class="bg-gray-900 rounded-lg border border-gray-700 p-4">
<div class="mb-4">
<label
for="paper-size"
class="block mb-2 text-sm font-medium text-white"
data-i18n="tools:pdfBooklet.paperSize"
>Paper Size</label
>
<select
id="paper-size"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2"
>
<optgroup label="US Sizes">
<option value="Letter" selected>Letter (8.5" × 11")</option>
<option value="Legal">Legal (8.5" × 14")</option>
<option value="Tabloid">Tabloid (11" × 17")</option>
<option value="Ledger">Ledger (17" × 11")</option>
<option value="Executive">Executive (7.25" × 10.5")</option>
<option value="Folio">Folio (8.5" × 13")</option>
</optgroup>
<optgroup label="A Series (ISO 216)">
<option value="4A0">4A0 (1682 × 2378 mm)</option>
<option value="2A0">2A0 (1189 × 1682 mm)</option>
<option value="A0">A0 (841 × 1189 mm)</option>
<option value="A1">A1 (594 × 841 mm)</option>
<option value="A2">A2 (420 × 594 mm)</option>
<option value="A3">A3 (297 × 420 mm)</option>
<option value="A4">A4 (210 × 297 mm)</option>
<option value="A5">A5 (148 × 210 mm)</option>
<option value="A6">A6 (105 × 148 mm)</option>
</optgroup>
<optgroup label="B Series (ISO 216)">
<option value="B0">B0 (1000 × 1414 mm)</option>
<option value="B1">B1 (707 × 1000 mm)</option>
<option value="B2">B2 (500 × 707 mm)</option>
<option value="B3">B3 (353 × 500 mm)</option>
<option value="B4">B4 (250 × 353 mm)</option>
<option value="B5">B5 (176 × 250 mm)</option>
</optgroup>
<optgroup label="C Series (Envelopes)">
<option value="C0">C0 (917 × 1297 mm)</option>
<option value="C1">C1 (648 × 917 mm)</option>
<option value="C2">C2 (458 × 648 mm)</option>
<option value="C3">C3 (324 × 458 mm)</option>
<option value="C4">C4 (229 × 324 mm)</option>
<option value="C5">C5 (162 × 229 mm)</option>
<option value="C6">C6 (114 × 162 mm)</option>
<option value="C7">C7 (81 × 114 mm)</option>
</optgroup>
</select>
</div>
<label class="block mb-3 text-sm font-medium text-white"
>Grid Mode</label
>
<div class="space-y-2">
<label
class="flex items-center gap-2 cursor-pointer text-sm text-gray-300"
>
<input
type="radio"
name="grid-mode"
value="1x2"
checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600"
/>
<span>1×2 (Booklet)</span>
</label>
<label
class="flex items-center gap-2 cursor-pointer text-sm text-gray-300"
>
<input
type="radio"
name="grid-mode"
value="2x2"
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600"
/>
<span>2×2</span>
</label>
<label
class="flex items-center gap-2 cursor-pointer text-sm text-gray-300"
>
<input
type="radio"
name="grid-mode"
value="2x4"
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600"
/>
<span>2×4</span>
</label>
<label
class="flex items-center gap-2 cursor-pointer text-sm text-gray-300"
>
<input
type="radio"
name="grid-mode"
value="4x4"
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600"
/>
<span>4×4</span>
</label>
</div>
<label class="block mt-4 mb-3 text-sm font-medium text-white"
>Orientation</label
>
<div class="space-y-2">
<label
class="flex items-center gap-2 cursor-pointer text-sm text-gray-300"
>
<input
type="radio"
name="orientation"
value="auto"
checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600"
/>
<span>Auto (best for layout)</span>
</label>
<label
class="flex items-center gap-2 cursor-pointer text-sm text-gray-300"
>
<input
type="radio"
name="orientation"
value="portrait"
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600"
/>
<span>Portrait</span>
</label>
<label
class="flex items-center gap-2 cursor-pointer text-sm text-gray-300"
>
<input
type="radio"
name="orientation"
value="landscape"
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600"
/>
<span>Landscape</span>
</label>
</div>
</div>
</div>
<div class="flex gap-4 mb-6">
<button
id="preview-btn"
class="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors"
disabled
>
<i data-lucide="eye" class="w-4 h-4 inline-block mr-2"></i>
Generate Preview
</button>
<button
id="download-btn"
class="flex-1 btn-gradient"
disabled
data-i18n="tools:pdfBooklet.createBooklet"
>
<i data-lucide="download" class="w-4 h-4 inline-block mr-2"></i>
Create Booklet
</button>
</div>
<div
id="booklet-preview"
class="bg-gray-900 rounded-lg border border-gray-700 p-4 min-h-[200px] overflow-auto"
>
<p class="text-gray-400 text-center py-8">
Upload a PDF and click "Generate Preview" to see the booklet
layout
</p>
</div>
</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"
data-i18n="tools:pdfBooklet.processing"
>
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"
data-i18n="alert.title"
>
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>
<!-- 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">Upload File</h3>
<p class="text-gray-400" data-i18n="howItWorks.step1">
Click or drag and drop your file to begin
</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">Process</h3>
<p class="text-gray-400" data-i18n="howItWorks.step2">
Click the process button to start
</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">Download</h3>
<p class="text-gray-400" data-i18n="howItWorks.step3">
Save your processed file instantly
</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="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="compress-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">Compress PDF</h3>
<p class="text-gray-400 text-sm">Free online compress PDF tool</p>
</a>
<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="edit-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">Edit PDF</h3>
<p class="text-gray-400 text-sm">Free online edit PDF tool</p>
</a>
<a
href="rotate-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">Rotate PDF</h3>
<p class="text-gray-400 text-sm">Free online rotate PDF 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">
How does booklet page order work when I print?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
In the default 1x2 (Booklet) mode, two pages sit side by side on
each side of a sheet in saddle-stitch order: the first sheet's front
carries the last page and page 1, its back carries page 2 and the
second-to-last page, and so on inward. Print double-sided with the
flip-on-short-edge setting, fold the stack in half, and the pages
read in sequence.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
What if my page count isn't a multiple of 4?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
The count is rounded up to the next multiple of 4 and the missing
slots are left blank, which lands them at the end of the booklet. A
10-page document becomes a 12-page booklet on three sheets, and the
preview marks the empty slots as blank.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Which paper sizes can I use?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Pick from Letter, Legal, Tabloid, Ledger, Executive, Folio, and the
ISO A, B, and C series from A0 down to C7. Letter is the default,
and each source page is scaled to fit its slot on the sheet with a
small margin.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Should the output be portrait or landscape?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Auto picks landscape for booklet mode, so two portrait pages sit
side by side on a landscape sheet, and portrait for the grid modes.
You can force either orientation; the source pages are scaled
proportionally to fit whichever you choose.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
What are the 2x2, 2x4, and 4x4 grid modes?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
They place 4, 8, or 16 pages per sheet in reading order rather than
booklet order, which is useful for handouts or thumbnail proof
sheets. Only 1x2 reorders pages for folding; for more grid layouts
see
<a href="/n-up-pdf" class="text-indigo-300 hover:text-indigo-400"
>N-Up PDF</a
>.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I rotate landscape pages so they fit the booklet?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
The Source Rotation option turns every page 90 degrees clockwise or
counter-clockwise before imposition, or alternates the direction
between odd and even pages for documents scanned head-to-head. Click
Generate Preview to check the layout before downloading.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Does the booklet lose quality?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. Pages are embedded as vector content from the original PDF
rather than rasterized, so text stays sharp at any zoom and the file
prints at full quality.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Is my PDF uploaded to create the booklet?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. The page reordering, scaling, and preview rendering all run in
your browser, and the finished booklet PDF is saved from your device
without passing through a server.
</p>
</details>
</div>
</section>
{{> footer }}
<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/pdf-booklet-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": "PDF Booklet - 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 pdf booklet online",
"description": "Learn how to pdf booklet using BentoPDF",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Upload File",
"text": "Click or drag and drop your file"
},
{
"@type": "HowToStep",
"position": 2,
"name": "Process",
"text": "Click the process button"
},
{
"@type": "HowToStep",
"position": 3,
"name": "Download",
"text": "Download your processed file"
}
]
}
</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": "PDF Booklet",
"item": "https://www.bentopdf.com/pdf-booklet"
}
]
}
</script>
</body>
</html>