Guides

Insert Pages

Insert a Blank Pages

Here is an example of inserting a blank page:

const pdfReaderRef = useRef<CPDFReaderView>(null);

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({})}
/>

const insertResult = await pdfReaderRef.current?._pdfDocument.insertBlankPage(1, CPDFPageSize.a4);

Insert Pages from other PDFs

This example shows how to insert pages from other PDFs:

const pdfReaderRef = useRef<CPDFReaderView>(null);

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({})}
/>

// Define the file path of the document to import
// For local files (e.g., from app cache):
const filePath = '/data/user/0/com.compdfkit.flutter.example/cache/temp/PDF_Document.pdf';
// For Android content URIs (e.g., from media storage):
const filePath = 'content://media/external/file/1000045118';

// Specify the pages to import. An empty array [] imports all pages.
// In this example, only the first page (index 0) is imported.
const pages = [0]; 

// Define the position to insert the imported pages.
// 0 means inserting at the beginning of the document.
const insertPosition = 0; 

// Provide the document password if encrypted. Leave empty if not required.
const password = '';

// Import the document into the PDF reader.
const importResult = await pdfReaderRef.current?._pdfDocument.importDocument(
  filePath, 
  pages, 
  insertPosition, 
  password
);

Insert Image Page

SDK supports inserting pictures as a PDF page. The following are the different ways to insert picture pages:

• Android File Path

const imagePath = 'file:///storage/emulated/0/Download/photo.jpg';

const success = await pdfReaderRef.current?._pdfDocument.insertImagePage(2, imagePath, CPDFPageSize.custom(imageWidth, imageHeight));

if (success) {   
  await pdfReaderRef.current?.reloadPages2();
}

• Android content URI

const imagePath = 'content://media/external/images/media/12345';

const success = await pdfReaderRef.current?._pdfDocument.insertImagePage(2, imagePath, CPDFPageSize.custom(imageWidth, imageHeight));

if (success) {   
  await pdfReaderRef.current?.reloadPages2();
}

• Android asset path:

const imagePath = 'file:///assets/photo.jpg';

const success = await pdfReaderRef.current?._pdfDocument.insertImagePage(2, imagePath, CPDFPageSize.custom(imageWidth, imageHeight));

if (success) {   
  await pdfReaderRef.current?.reloadPages2();
}

• iOS File Path

const imagePath = 'var/mobile/Containers/Data/Application/.../Documents/photo.jpg';

const success = await pdfReaderRef.current?._pdfDocument.insertImagePage(2, imagePath, CPDFPageSize.custom(imageWidth, imageHeight));

if (success) {   
  await pdfReaderRef.current?.reloadPages2();
}