Skip to content

PDF Generation Template Editor

Open-source visual PDF generation engine with customizable templates and developer-friendly APIs.

View on GitHub

Document Editor ​

This sample shows how to manipulate multiple pages of a pdf document, including insert, replace, extract, rotate and so on.

javascript
// Import the JS file of ComPDFKit Web Demo.
import ComPDFKitViewer from "@compdfkit_pdf_sdk/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer({
  path: '/',
  initialDoc: 'Your PDF Url',
  licenseKey: 'Input your license here'
}, viewer)
.then((instance) => {
  const { documentViewer, createDocument, PageRotation } = instance.Core;
  documentViewer.addEventListener('documentLoaded', async () => {
    console.log('ComPDFKit Web Demo loaded');

    const doc = documentViewer.getDocument();

    // Sample 1: Insert blank page
    await doc.insertBlankPages([1], 595, 842);

    // Sample 2: Insert PDF page
    const insertDocument = await createDocument(file, { password: '' }); // File Object.
    await doc.insertPages(insertDocument, undefined, 1); // Insert all pages of the PDF.

    // Sample 3: Remove pages
    await doc.removePages([1]);

    // Sample 4: Rotate page
    await doc.rotatePages([1], PageRotation.E_90);

    // Sample 5: Repalce pages
    await doc.removePages([1]);
    const replaceDocument = await createDocument(file, { password: '' }); // File Object.
    await doc.insertPages(replaceDocument, undefined, 1); // Insert all pages of the PDF.

    // Sample 6: Extract pages
    const extractedData = await doc.extractPages('1,3-4'); // Extract the range of the page into a new PDF.
    const extractedFiles = await doc.extractPages('1,3-4', undefined, { separateFile: true }); // Each page in a separate file.

    // Sample 7: Move page
    await doc.movePages([1], 3); // Move page 1 to the position before page 3.

    // Sample 8: Copy page
    await doc.copyPages([1]);
  })
})