Skip to content
Guides

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/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here'
}, viewer)
.then((core) => {
  const docViewer = core.docViewer;
  docViewer.addEvent('documentloaded', () => {
    console.log('ComPDFKit Web Demo loaded');

    // Sample 1: Insert blank page
    docViewer.saveDocumentEdit({
        type: "insert",
        pageIndex: 0,
        size: {
            width: 595,
            height: 842
        }
    });

    // Sample 2: Insert PDF page
    docViewer.saveDocumentEdit({
        type: "insert",
        pageIndex: 0,
        file: {...}, // File Object.
        password: "",
        range: "all" // Insert the range of PDF pages.
    });

    // Sample 3: Remove pages
    docViewer.saveDocumentEdit({
        type: "delete",
        selectedPageIndexArray: [0]
    });

    // Sample 4: Rotate page
    docViewer.saveDocumentEdit({
        type: "rotate",
        selectedPageIndexArray: [0],
        rotation: 1
    });

    // Sample 5: Repalce pages
    docViewer.saveDocumentEdit({
        type: "delete",
        selectedPageIndexArray: [0]
    });
    docViewer.saveDocumentEdit({
        type: "insert",
        pageIndex: 0,
        file: {...}, // File Object.
        password: "",
        range: "all" // Insert the range of PDF pages.
    })

    // Sample 6: Extract pages
    docViewer.saveDocumentEdit({
        type: "extract",
        range: "1,3-4", // Extract the range of the page.
        separateFile: false // Each page in a separate file.
    });

    // Sample 7: Move page
    docViewer.saveDocumentEdit({
        type: "move",
        pageIndex: 0,
        targetPageIndex: 1
    })

    // Sample 8: Copy page
    docViewer.saveDocumentEdit({
        type: "copy",
        selectedPageIndexArray: [0]
    })
  })
})