Copy Pages in Vue PDF Viewer

14 Aug 20263 minutes to read

Overview

This guide explains how to duplicate pages within the current PDF using the Organize Pages UI.

Outcome: Copied pages are inserted adjacent to the selection and included in exported PDFs.

Prerequisites

  • EJ2 Vue PDF Viewer installed
  • PDF Viewer injected with PageOrganizer module

Steps

  1. Open the Organize Pages view

    • Click the Organize Pages button in the viewer toolbar to open the Organize Pages dialog.

  2. Select pages to duplicate

    • Click a single thumbnail or use Shift+click/Ctrl+click to select multiple pages.

  3. Duplicate selected pages

    • Click the Copy Pages button in the Organize Pages toolbar; duplicated pages are inserted to the right of the selected thumbnails. When multiple thumbnails are selected, every selected page is duplicated in order.

    Copy pages in organize view

  4. Undo or redo changes

    • Use Undo (Ctrl+Z) or Redo (Ctrl+Y) to revert or reapply recent changes.

    Undo and redo Organize Pages toolbar

  5. Persist duplicated pages

    • Click Save or Save As to include duplicated pages in the saved/downloaded PDF.

Expected result

  • Selected pages are duplicated and included in the saved PDF.

Enable or disable Copy Pages button

To enable or disable the Copy Pages button in the Organize Pages toolbar, update the pageOrganizerSettings. See Organize pages toolbar customization for the guidelines.

Code snippet

To enable the copy pages feature, use the following code snippet. The canCopy property defaults to true; set it to false to disable the Copy Pages button.

<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :pageOrganizerSettings="{ canCopy: true }">
    </ejs-pdfviewer>
  </div>
</template>

<script>
import {
  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
  Annotation, FormDesigner, FormFields, PageOrganizer
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: "App",
  components: {
    "ejs-pdfviewer": PdfViewerComponent
  },
  data() {
    return {
      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
      resourceUrl: "https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
    };
  },

  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
      Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer]
  }
}
</script>

Troubleshooting

  • If duplicates are not created: verify that the changes are persisted using Save.