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]
})
})
})