Export & Print

File Export allows your application to command the viewer to generate a persistent version of the current session. This includes all active markups, measurements, and annotations.

The process is asynchronous: you dispatch an export request, and the viewer notifies your application when the file is ready for download.

• Asynchronous Processing: High-speed document generation without blocking the UI.
• Markup Integration: Exported files include all interactive annotations and measurements.
• Secure URLs: Receive temporary, direct-download links for the resulting files.

Trigger an export and handle the completion event.

iframe.contentWindow.postMessage({ type: 'export' }, viewerOrigin);

window.addEventListener('message', (event) => {
  if (event.data.type === 'exportComplete') {
    window.open(event.data.payload.fileUrl, '_blank');
  }
});

Document generation follows a command-event pattern. You initiate the process from your application, and the viewer responds with the resulting file link.

// 1. Get a handle to the viewer iframe
const iframe = document.querySelector('[data-viewer-iframe]');

// 2. Command the viewer to export the current state
iframe.contentWindow.postMessage({
  type: 'export'
}, '*');

// Listen for export completion
window.addEventListener('message', (event) => {
  if (event.data.type === 'exportComplete') {
    const { fileUrl } = event.data.payload;
    console.log(`Export ready: ${fileUrl}`);
    // Example: Open in new tab
    window.open(fileUrl, '_blank');
  }
});

Printing allows users to generate a high-quality print preview of the active document with all markups and annotations rendered.

• Browser Native: Triggers the standard browser print dialog for the current document view.
• Wysiwyg: Marks up and annotations are preserved exactly as shown on the canvas.

iframe.contentWindow.postMessage({ type: 'print' }, '*');

Request an export and open the resulting file when it is ready.

const VIEWER_ORIGIN = 'https://your-canvas-domain.com';
const iframe = document.querySelector('[data-viewer-iframe]');

function requestExport() {
  iframe.contentWindow.postMessage({ type: 'export' }, VIEWER_ORIGIN);
}

window.addEventListener('message', (event) => {
  if (event.origin !== VIEWER_ORIGIN) return;
  if (event.data.type === 'exportComplete') {
    window.open(event.data.payload.fileUrl, '_blank');
  }
});

Try the interactive preview below to generate an export and capture the completion event.

Explore related file workflows and payload references.

• Viewer Setup: Canvas Iframe Initialization
• File Upload: File Upload
• File API: API References