Files
bentopdf/src/pages/pdf-multi-tool.html
T
2026-09-05 12:55:31 +05:30

681 lines
25 KiB
HTML

<!doctype html>
<html lang="en" class="overflow-hidden">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<meta
name="title"
content="PDF Multi Tool Online Free - PDF Multi Tool | BentoPDF"
/>
<meta
name="description"
content="Merge, Split, Organize, Delete, Rotate, Add Blank Pages, Extract and Duplicate in a unified interface. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta name="keywords" content="pdf multi tool, 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-multi-tool" />
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.bentopdf.com/pdf-multi-tool" />
<meta
property="og:title"
content="PDF Multi Tool Online Free - PDF Multi Tool | BentoPDF"
/>
<meta
property="og:description"
content="Merge, Split, Organize, Delete, Rotate, Add Blank Pages, Extract and Duplicate in a unified interface. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta
property="og:image"
content="https://www.bentopdf.com/images/og-pdf-multi-tool.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-multi-tool"
/>
<meta name="twitter:title" content="PDF Multi Tool Free" />
<meta
name="twitter:description"
content="Merge, Split, Organize, Delete, Rotate, Add Blank Pages, Extract and Duplicate in a unified interface. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta
name="twitter:image"
content="https://www.bentopdf.com/images/twitter-pdf-multi-tool.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 Multi Tool" />
<title>PDF Multi Tool - BentoPDF</title>
<link href="/src/css/styles.css" rel="stylesheet" />
<style>
/* Hide scrollbar for toolbar overflow */
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Fix for mobile toolbar to prevent movement during drag operations */
.toolbar-container {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transform: translateZ(0);
will-change: transform;
}
/* Prevent layout shifts during dragging */
body.dragging {
overflow: hidden;
}
</style>
<!-- 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 h-[100dvh] overflow-hidden flex flex-col"
>
{{> navbar }}
<!-- SEO H1 (visually hidden but present for search engines) -->
<h1 class="sr-only">PDF Multi Tool Free Online - Edit & Organize PDFs</h1>
<!-- Main Container -->
<div class="flex flex-col flex-1 overflow-hidden relative">
<!-- Toolbar -->
<div
class="bg-gray-800 border-b border-gray-700 p-2 sm:p-3 toolbar-container flex-none z-20"
>
<div
class="flex flex-wrap items-center justify-center sm:justify-start gap-2 bg-gray-900 p-2 sm:p-4 rounded-lg w-full"
>
<!-- Upload -->
<button
id="upload-pdfs-btn"
class="flex items-center gap-1 sm:gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
>
<i data-lucide="upload" class="w-3 h-3 sm:w-4 sm:h-4"></i>
<span class="hidden sm:inline" data-i18n="multiTool.uploadPdfs"
>Upload PDFs</span
>
<span class="sm:hidden" data-i18n="multiTool.upload">Upload</span>
</button>
<div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
<!-- Add Blank -->
<button
id="add-blank-page-btn"
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
>
<i data-lucide="file-plus" class="w-3 h-3 sm:w-4 sm:h-4"></i>
<span class="hidden sm:inline" data-i18n="multiTool.addBlankPage"
>Add Blank Page</span
>
</button>
<div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
<span
class="text-gray-400 text-xs sm:text-sm md:inline"
data-i18n="multiTool.edit"
>Edit:</span
>
<!-- Undo / Redo / Reset -->
<button
id="undo-btn"
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
>
<i data-lucide="undo-2" class="w-3 h-3 sm:w-4 sm:h-4"></i>
<span class="hidden lg:inline" data-i18n="multiTool.undo"
>Undo</span
>
</button>
<button
id="redo-btn"
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
>
<i data-lucide="redo-2" class="w-3 h-3 sm:w-4 sm:h-4"></i>
<span class="hidden lg:inline" data-i18n="multiTool.redo"
>Redo</span
>
</button>
<button
id="reset-btn"
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
>
<i data-lucide="refresh-ccw" class="w-3 h-3 sm:w-4 sm:h-4"></i>
<span class="hidden lg:inline" data-i18n="multiTool.reset"
>Reset</span
>
</button>
<div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
<!-- Selection -->
<span
class="text-gray-400 text-xs sm:text-sm md:inline"
data-i18n="multiTool.selection"
>Selection:</span
>
<button
id="select-all-btn"
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
>
<i data-lucide="check-square" class="w-3 h-3 sm:w-4 sm:h-4"></i>
<span class="hidden lg:inline" data-i18n="multiTool.selectAll"
>Select All</span
>
</button>
<button
id="deselect-all-btn"
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
>
<i data-lucide="square" class="w-3 h-3 sm:w-4 sm:h-4"></i>
<span class="hidden lg:inline" data-i18n="multiTool.deselectAll"
>Deselect All</span
>
</button>
<div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
<!-- Rotate -->
<span
class="text-gray-400 text-xs sm:text-sm md:inline"
data-i18n="multiTool.rotate"
>Rotate:</span
>
<button
id="bulk-rotate-left-btn"
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
>
<i data-lucide="rotate-ccw" class="w-3 h-3 sm:w-4 sm:h-4"></i>
<span class="hidden xl:inline" data-i18n="multiTool.rotateLeft"
>Left</span
>
</button>
<button
id="bulk-rotate-btn"
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
>
<i data-lucide="rotate-cw" class="w-3 h-3 sm:w-4 sm:h-4"></i>
<span class="hidden xl:inline" data-i18n="multiTool.rotateRight"
>Right</span
>
</button>
<div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
<span
class="text-gray-400 text-xs sm:text-sm md:inline"
data-i18n="multiTool.transform"
>Transform:</span
>
<!-- Duplicate / Split -->
<button
id="bulk-duplicate-btn"
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
>
<i data-lucide="copy" class="w-3 h-3 sm:w-4 sm:h-4"></i>
<span class="hidden xl:inline" data-i18n="multiTool.duplicate"
>Duplicate</span
>
</button>
<button
id="bulk-split-btn"
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
>
<i data-lucide="scissors" class="w-3 h-3 sm:w-4 sm:h-4"></i>
<span class="hidden xl:inline" data-i18n="multiTool.split"
>Split</span
>
</button>
<div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
<span
class="text-gray-400 text-xs sm:text-sm md:inline"
data-i18n="multiTool.clear"
>Clear:</span
>
<!-- Delete -->
<button
id="bulk-delete-btn"
class="flex items-center gap-1 sm:gap-2 bg-red-500 hover:bg-red-700 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
>
<i data-lucide="trash-2" class="w-3 h-3 sm:w-4 sm:h-4"></i>
<span class="hidden xl:inline" data-i18n="multiTool.delete"
>Delete</span
>
</button>
<div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
<!-- Download -->
<span
class="text-gray-400 text-xs sm:text-sm md:inline"
data-i18n="multiTool.download"
>Download:</span
>
<button
id="bulk-download-btn"
class="flex items-center gap-1 sm:gap-2 bg-green-600 hover:bg-green-700 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
>
<i data-lucide="download" class="w-3 h-3 sm:w-4 sm:h-4"></i>
<span
class="hidden xl:inline"
data-i18n="multiTool.downloadSelected"
>Download Selected</span
>
</button>
<button
id="export-pdf-btn"
class="flex items-center gap-1 sm:gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
>
<i data-lucide="download" class="w-3 h-3 sm:w-4 sm:h-4"></i>
<span class="hidden xl:inline" data-i18n="multiTool.exportPdf"
>Export PDF</span
>
</button>
<div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
<button
id="faq-open-btn"
type="button"
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
aria-label="FAQ"
aria-haspopup="dialog"
aria-controls="faq-modal"
aria-expanded="false"
>
<i data-lucide="circle-help" class="w-3 h-3 sm:w-4 sm:h-4"></i>
<span class="hidden sm:inline">FAQ</span>
</button>
<button
id="close-tool-btn"
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
aria-label="Close"
>
<i data-lucide="x" class="w-3 h-3 sm:w-4 sm:h-4"></i>
<span class="hidden sm:inline" data-i18n="common.close">Close</span>
</button>
</div>
</div>
<!-- Content Area -->
<div
id="main-scroll-container"
class="flex-1 overflow-auto p-3 pb-24 sm:p-4 sm:pb-8 md:pt-4 md:pb-4"
>
<div
id="upload-area"
class="hidden border-2 border-dashed border-gray-600 rounded-lg p-6 sm:p-12 text-center max-w-full cursor-pointer"
>
<i
class="ph ph-upload-simple inline-block text-5xl sm:text-6xl text-gray-400 mb-3 sm:mb-4"
></i>
<p
class="text-gray-300 text-base sm:text-lg mb-1 sm:mb-2"
data-i18n="multiTool.uploadPdfFiles"
>
Select PDF or image files
</p>
<p
class="text-gray-400 text-xs sm:text-sm mb-3 sm:mb-4"
data-i18n="multiTool.dragAndDrop"
>
Drag and drop PDF or image files here, or click to select
</p>
<input
type="file"
id="pdf-file-input"
accept="application/pdf,image/*,.heic,.heif,.jpg,.jpeg,.png,.bmp,.gif,.tiff,.tif,.webp,.svg,.psd,.jp2,.jpx,.jxr,.pnm,.pgm,.pbm,.ppm,.pam"
multiple
class="hidden"
/>
<button
id="pdf-file-input-select-btn"
class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 sm:px-6 py-2 rounded text-sm sm:text-base"
data-i18n="multiTool.selectFiles"
>
Select Files
</button>
</div>
<div
id="pages-container"
class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 sm:gap-4"
></div>
</div>
</div>
{{> footer-compact }}
<!-- Loading Overlay -->
<div
id="loading-overlay"
class="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center"
>
<div class="bg-gray-800 rounded-lg p-8 max-w-md w-full mx-4">
<div class="flex items-center justify-center mb-4">
<i
data-lucide="loader"
class="w-12 h-12 text-indigo-400 animate-spin"
></i>
</div>
<p
id="loading-text"
class="text-white text-center text-lg mb-4"
data-i18n="multiTool.renderingPages"
>
Rendering pages...
</p>
<div class="w-full bg-gray-700 rounded-full h-2.5">
<div
id="loading-progress"
class="bg-indigo-600 h-2.5 rounded-full transition-all duration-300"
style="width: 0%"
></div>
</div>
</div>
</div>
<!-- Modal -->
<div
id="modal"
class="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center"
>
<div
class="bg-gray-800 rounded-lg p-8 max-w-md w-full mx-4 border border-gray-700"
>
<div class="flex items-center justify-center mb-4">
<div id="modal-icon"></div>
</div>
<h3
id="modal-title"
class="text-xl font-bold text-white text-center mb-2"
></h3>
<p id="modal-message" class="text-gray-300 text-center mb-6"></p>
<button
id="modal-close-btn"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded"
>
Close
</button>
</div>
</div>
<!-- Hidden File Input -->
<input
type="file"
id="insert-pdf-input"
accept="application/pdf"
class="hidden"
/>
<!-- Scripts -->
<!-- FAQ Modal -->
<div
id="faq-modal"
class="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4"
role="dialog"
aria-modal="true"
aria-labelledby="faq-modal-title"
aria-hidden="true"
>
<div
class="bg-gray-800 rounded-lg w-full max-w-3xl max-h-[85vh] overflow-y-auto relative border border-gray-700 shadow-2xl"
>
<button
id="faq-close-btn"
type="button"
class="absolute top-3 right-3 z-10 flex items-center justify-center w-9 h-9 rounded-lg bg-gray-700 hover:bg-gray-600 text-white"
aria-label="Close FAQ"
>
<i data-lucide="x" class="w-5 h-5"></i>
</button>
<section class="max-w-4xl mx-auto px-6 pt-12 pb-8">
<h2
id="faq-modal-title"
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 can I do with the PDF Multi Tool that the single-purpose
tools can't?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
It puts merging, reordering, rotating, duplicating, deleting,
inserting, and splitting in one page grid, so you can do several
of them in a single pass without downloading and re-uploading
between steps. Every action is covered by undo and redo, so you
can experiment before you export.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
How do I combine pages from several PDFs into one document?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Upload all the source files and their pages appear together in
one grid, in upload order. Drag pages into the order you want,
delete the ones you don't need, and click Export PDF to download
the result as a single file.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I add images as pages?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Drop JPG, PNG, WebP, HEIC, TIFF, BMP, GIF, or SVG files
alongside your PDFs and each image becomes a page you can move,
rotate, or delete like any other. Blank A4 pages can also be
appended with the Add Blank Page button.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
How do I split one PDF into several files?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Click the scissors icon on a page to place a split marker after
it; a dashed line shows where the document will be divided.
Export then produces split-documents.zip containing document -
1.pdf, document - 2.pdf, and so on.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Does rotating pages here reduce quality?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. Rotation is stored as a page attribute in 90-degree steps
rather than re-rendering the content, so text, vectors, and
images are untouched. For angles other than 90, 180, or 270
degrees, use
<a
href="/rotate-custom"
class="text-indigo-300 hover:text-indigo-400"
>Rotate by Custom Degrees</a
>.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I export only some of the pages?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Tick the checkboxes on the pages you want and use Download
selected to get just those pages as selected-pages.pdf. The
workspace stays as it is, so you can keep working and export the
rest later.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
What happens to bookmarks when I export?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
The export rebuilds the document page by page, so bookmarks from
the source files aren't carried into the new PDF. Page content,
including text and images, is copied as-is.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Are my PDFs uploaded when I use the Multi Tool?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. Page thumbnails are rendered and the final PDF or ZIP is
assembled in your browser, and damaged files are repaired
locally before loading too. Nothing you drop into the grid
leaves your computer.
</p>
</details>
</div>
</section>
</div>
</div>
<script type="module" src="/src/js/logic/pdf-multi-tool.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<script type="module" src="/src/js/faqModal.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "PDF Multi Tool - 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 multi tool online",
"description": "Learn how to pdf multi tool 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 Multi Tool",
"item": "https://www.bentopdf.com/pdf-multi-tool"
}
]
}
</script>
</body>
</html>