Insert Blank Pages in Vue PDF Viewer

14 Aug 20263 minutes to read

Overview

This guide describes inserting new blank pages into a PDF using the Organize Pages UI in the EJ2 Vue PDF Viewer.

Outcome: A blank page is added at the chosen position and will appear in thumbnails and exports.

Prerequisites

  • EJ2 Vue PDF Viewer installed
  • PageOrganizer services injected into the PDF Viewer component
  • resourceUrl for standalone mode or serviceUrl for server-backed mode configured as required

Steps

  1. Open the Organize Pages view

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

  2. Select insertion point

    • Hover over the thumbnail before or after which you want the blank page added.

  3. Insert a blank page

    • Click the Insert Left / Insert Right option to add the blank page at the chosen position (Before / After). A new blank thumbnail appears in the sequence.

    Insert pages in Organize Pages

  4. Adjust and confirm

    • Reposition or remove the inserted blank page if needed using drag-and-drop or delete options.

  5. Persist the change

    • Click Save or Save As to include the blank page in the exported PDF.

Expected result

  • A blank page thumbnail appears at the chosen position and is present in any saved or downloaded PDF.

Enable or disable Insert Pages button

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

Code snippet

To enable the insert blank pages feature, use the following code snippet:

<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :pageOrganizerSettings="{ canInsert: 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

  • Organize Pages button missing: Verify PageOrganizer is included in the modules and Toolbar is enabled.
  • Inserted page not saved: Confirm resourceUrl or serviceUrl is configured for your selected processing mode.
  • Insert options disabled: Ensure pageOrganizerSettings.canInsert is set to true to enable insert option.