Rasterex API/docs/components/pdf/move-pages

Move Pages

Reorder pages in the active PDF using move-top, move-bottom, move-up, and move-down.

Overview

The move actions reorder existing pages in the active PDF. All move actions use pageRange to identify which pages should move.

Choose the move action based on the destination behavior you need: top, bottom, up by one step, or down by one step.

  • move-top: Moves the selected pages to the beginning of the document.
  • move-bottom: Moves the selected pages to the end of the document.
  • move-up: Moves the selected pages one position earlier.
  • move-down: Moves the selected pages one position later.

Examples

All move actions share the same payload structure. Only the action value changes.

Move pages to top

viewerWindow.postMessage({
  type: 'pageManipulation',
  payload: {
    requestId: 'move-top-1',
    action: 'move-top',
    pageRange: [[3, 4]]
  }
}, '*');

Move a page down

viewerWindow.postMessage({
  type: 'pageManipulation',
  payload: {
    requestId: 'move-down-1',
    action: 'move-down',
    pageRange: [[1]]
  }
}, '*');

Complete HTML Example

Use this full standalone HTML document when you want a minimal host page for moving pages.

html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>PDF Move Pages Demo</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #0b1220;
      color: #e5e7eb;
    }
    .app {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 12px;
      min-height: 100vh;
      padding: 12px;
    }
    .panel {
      border: 1px solid #2f3b4f;
      border-radius: 12px;
      background: #111827;
      padding: 12px;
      display: grid;
      gap: 10px;
      align-content: start;
    }
    .stack {
      display: grid;
      gap: 8px;
    }
    .row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    input, button, select {
      width: 100%;
      border: 1px solid #2f3b4f;
      border-radius: 8px;
      background: #0f172a;
      color: #e5e7eb;
      padding: 8px 10px;
      font: inherit;
      box-sizing: border-box;
    }
    button {
      width: auto;
      cursor: pointer;
    }
    .pages {
      display: grid;
      gap: 8px;
      max-height: 60vh;
      overflow: auto;
    }
    .page {
      border: 1px solid #2f3b4f;
      border-radius: 10px;
      background: #0d1728;
      padding: 8px;
      display: grid;
      gap: 8px;
    }
    .page.active {
      border-color: #22d3ee;
    }
    iframe {
      width: 100%;
      height: calc(100vh - 24px);
      border: 1px solid #2f3b4f;
      border-radius: 12px;
      background: #04101c;
    }
    img {
      max-width: 100%;
      height: auto;
      display: block;
      background: #fff;
      border-radius: 8px;
    }
    .meta {
      font-size: 12px;
      color: #9ca3af;
    }
  </style>
</head>
<body>
  <div class="app">
    <div class="panel">
      <div class="stack">
      <input id="viewerUrl" value="http://localhost:5173" />
      <input id="fileUrl" placeholder="Public PDF URL" />
      <div class="row">
        <button id="loadViewerBtn">Load Canvas</button>
        <button id="loadPdfBtn">Load PDF</button>
      </div>
      <div id="pages" class="pages"></div>
    </div>
    </div>
    <iframe id="viewerFrame" title="PDF Move Pages Demo Canvas"></iframe>
  </div>
  <script>
const viewerFrame = document.getElementById('viewerFrame');
const viewerUrlInput = document.getElementById('viewerUrl');
const fileUrlInput = document.getElementById('fileUrl');
const pagesEl = document.getElementById('pages');
let latestPageList = null;

function post(type, payload) {
  viewerFrame.contentWindow.postMessage({ type, payload }, '*');
}

function loadViewer() {
  viewerFrame.src = viewerUrlInput.value.trim();
}

function loadPdf() {
  post('view', {
    fileUrl: fileUrlInput.value.trim(),
    displayName: 'Demo User',
    username: 'demo.user',
    email: 'demo@example.com'
  });
}

window.addEventListener('message', (event) => {
  if (event.source !== viewerFrame.contentWindow) return;
  const data = event.data;
  if (!data || typeof data !== 'object') return;
  if (data.type === 'pageList') {
    latestPageList = data.payload;
    renderPages(data.payload.pages);
  }
  onViewerMessage(data);
});

function renderPages(pages) {
  if (!pagesEl) return;
  pagesEl.innerHTML = '';
  pages.forEach((page) => {
    const item = document.createElement('div');
    item.className = page.isSelected ? 'page active' : 'page';
    const actions = pageActions(page);
    item.innerHTML = [
      page.thumbnailDataUrl
        ? '<img src="' + page.thumbnailDataUrl + '" width="' + (page.thumbnailWidth || 120) + '" height="' + (page.thumbnailHeight || 160) + '" />'
        : '<div class="meta">No thumbnail data</div>',
      '<div><strong>' + (page.label || ('Page ' + (page.index + 1))) + '</strong></div>',
      '<div class="meta">' + (page.title || 'Default') + '</div>',
      actions
    ].join('');
    wirePageActions(item, page);
    pagesEl.appendChild(item);
  });
}

document.getElementById('loadViewerBtn').addEventListener('click', loadViewer);
document.getElementById('loadPdfBtn').addEventListener('click', loadPdf);

function pageActions() {
  return '<div class="row"><button data-action="move-up">Move Up</button><button data-action="move-down">Move Down</button></div>';
}
function wirePageActions(item, page) {
  item.querySelector('[data-action="move-up"]').addEventListener('click', () => {
    post('pageManipulation', { requestId: 'move-up-' + page.index, action: 'move-up', pageRange: [[page.index]] });
  });
  item.querySelector('[data-action="move-down"]').addEventListener('click', () => {
    post('pageManipulation', { requestId: 'move-down-' + page.index, action: 'move-down', pageRange: [[page.index]] });
  });
}
function onViewerMessage(data) {
  if (data.type === 'pageManipulationResult') console.log(data.payload);
}
  </script>
</body>
</html>
Complete HTML Example

Live Preview

Open the focused demo to test page move actions against a live PDF.

PDF Move Pages Demo

Focused live demo for move-top, move-bottom, move-up, and move-down.

Preview opens in a large modal for zoom-friendly review.