feat: add support for multiple blank pages insertion

This commit is contained in:
Keshav Singh
2025-10-18 11:14:04 +05:30
parent d98e18b51f
commit f8579fb291
2 changed files with 28 additions and 9 deletions

View File

@@ -6,12 +6,21 @@ import { PDFDocument as PDFLibDocument } from 'pdf-lib';
export async function addBlankPage() {
// @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
const pageNumberInput = document.getElementById('page-number').value;
// @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
const pageCountInput = document.getElementById('page-count').value;
if (pageNumberInput.trim() === '') {
showAlert('Invalid Input', 'Please enter a page number.');
return;
}
if (pageCountInput.trim() === '') {
showAlert('Invalid Input', 'Please enter the number of pages to insert.');
return;
}
const position = parseInt(pageNumberInput);
const pageCount = parseInt(pageCountInput);
const totalPages = state.pdfDoc.getPageCount();
if (isNaN(position) || position < 0 || position > totalPages) {
showAlert(
@@ -21,7 +30,12 @@ export async function addBlankPage() {
return;
}
showLoader('Adding page...');
if (isNaN(pageCount) || pageCount < 1) {
showAlert('Invalid Input', 'Please enter a valid number of pages (1 or more).');
return;
}
showLoader(`Adding ${pageCount} blank page${pageCount > 1 ? 's' : ''}...`);
try {
const newPdf = await PDFLibDocument.create();
const { width, height } = state.pdfDoc.getPage(0).getSize();
@@ -35,7 +49,10 @@ export async function addBlankPage() {
copied.forEach((p: any) => newPdf.addPage(p));
}
newPdf.addPage([width, height]);
// Add the specified number of blank pages
for (let i = 0; i < pageCount; i++) {
newPdf.addPage([width, height]);
}
if (indicesAfter.length > 0) {
const copied = await newPdf.copyPages(state.pdfDoc, indicesAfter);
@@ -45,11 +62,11 @@ export async function addBlankPage() {
const newPdfBytes = await newPdf.save();
downloadFile(
new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }),
'page-added.pdf'
`blank-page${pageCount > 1 ? 's' : ''}-added.pdf`
);
} catch (e) {
console.error(e);
showAlert('Error', 'Could not add a blank page.');
showAlert('Error', `Could not add blank page${pageCount > 1 ? 's' : ''}.`);
} finally {
hideLoader();
}

View File

@@ -707,15 +707,17 @@ export const toolTemplates = {
</div>
`,
'add-blank-page': () => `
<h2 class="text-2xl font-bold text-white mb-4">Add Blank Page</h2>
<p class="mb-6 text-gray-400">Insert a new blank page at a specific position in your document.</p>
<h2 class="text-2xl font-bold text-white mb-4">Add Blank Pages</h2>
<p class="mb-6 text-gray-400">Insert one or more blank pages at a specific position in your document.</p>
${createFileInputHTML()}
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="blank-page-options" class="hidden mt-6">
<p class="mb-2 font-medium text-white">Total Pages: <span id="total-pages"></span></p>
<label for="page-number" class="block mb-2 text-sm font-medium text-gray-300">Insert blank page after page number:</label>
<input type="number" id="page-number" min="0" class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 mb-6" placeholder="Enter 0 to add to the beginning">
<button id="process-btn" class="btn-gradient w-full">Add Page & Download</button>
<label for="page-number" class="block mb-2 text-sm font-medium text-gray-300">Insert blank pages after page number:</label>
<input type="number" id="page-number" min="0" class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 mb-4" placeholder="Enter 0 to add to the beginning">
<label for="page-count" class="block mb-2 text-sm font-medium text-gray-300">Number of blank pages to insert:</label>
<input type="number" id="page-count" min="1" value="1" class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 mb-6" placeholder="Enter number of pages">
<button id="process-btn" class="btn-gradient w-full">Add Pages & Download</button>
</div>
`,
'extract-pages': () => `