Message API/docs/components/pdf/page-replace

Page Replace

Replace pages in the current PDF with pages from another PDF using page-replace.

Overview

The `page-replace` action swaps pages in the current PDF with pages from another PDF file. Like insert, the parent provides a `File` object and the source pages to import.

This action is used when the target pages in the current document should be replaced, not just supplemented.

Required fields: `pageRange`, `file`, and `selectedPages`.
Use `pageRange` to identify the page or pages being replaced in the current file.
Use `selectedPages` to identify the source pages being inserted in their place.

Example

Replace page 4 in the current PDF with page 0 from a source PDF.

const file = input.files[0];

viewerWindow.postMessage({
  type: 'pageManipulation',
  payload: {
    requestId: 'replace-1',
    action: 'page-replace',
    pageRange: [[4]],
    file,
    selectedPages: [[0]]
  }
}, '*');

Example

Complete HTML Example

Use this full standalone HTML document when you want a minimal host page for replacing pages from another PDF.

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>PDF Page Replace 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 Viewer</button>
        <button id="loadPdfBtn">Load PDF</button>
      </div>
      <input id="targetRangeInput" value="[[0]]" />
      <input id="selectedPagesInput" value="[[0]]" />
      <input id="sourceFileInput" type="file" accept="application/pdf" />
      <button id="replaceBtn">Replace Pages</button>
      <div id="pages" class="pages"></div>
    </div>
    </div>
    <iframe id="viewerFrame" title="PDF Page Replace Demo Viewer"></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);

let sourceFile = null;
document.getElementById('sourceFileInput').addEventListener('change', (event) => {
  sourceFile = event.target.files && event.target.files[0] ? event.target.files[0] : null;
});
document.getElementById('replaceBtn').addEventListener('click', () => {
  const pageRange = parseRangeInput(document.getElementById('targetRangeInput').value);
  const selectedPages = parseRangeInput(document.getElementById('selectedPagesInput').value);
  post('pageManipulation', { requestId: 'replace-1', action: 'page-replace', pageRange, file: sourceFile, selectedPages });
});
function pageActions() { return ''; }
function wirePageActions() {}
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 replacement from another PDF file.

PDF Page Replace Demo

Focused live demo for page-replace.

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