Rasterex APINPM Package/docs/components/files/export

Export & Print

Generate downloadable versions of documents or trigger browser-native print flows.

Overview

File Export allows your application to command the canvas 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 canvas 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 active annotations and measurements burned into the document.
  • Secure URLs: Receive temporary, direct-download links for the resulting files.

Quick Examples

Trigger an export and open the resulting file:

typescript
const result = await viewer.documents.export();
window.open(result.fileUrl, "_blank");
Quick Examples

Control Flow

Document generation follows an asynchronous request-completion pattern inside the SDK:

Host Sends

1. Host Requests Export

The host application invokes the export method on the viewer documents surface.

typescript
const result = await viewer.documents.export({
  timeoutMs: 60000 // Custom timeout for large drawings
});
Canvas Emits

2. Canvas Returns Link

The canvas completes rendering and returns the direct-download URL in the promise result.

typescript
// Result Shape
type DocumentExportResult = {
  fileUrl: string;
};

Printing

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

  • Browser Native: Triggers the standard browser print dialog for the current document view.
  • WYSIWYG: Markups and annotations are preserved exactly as shown on the canvas.
typescript
viewer.documents.print();
Printing

Vanilla Integration

Copy these project setup files to configure mounting, document loading, printing and export hooks:

import { createViewer } from "@rasterex/viewer";
import "./style.css";

const viewer = createViewer({
  container: "#viewer"
});

const statusEl = document.querySelector("#status");

function setStatus(message) {
  if (statusEl) statusEl.textContent = message;
}

async function startViewer() {
  await viewer.mount();
  await viewer.ready();

  await viewer.documents.open({
    url: "https://pdfobject.com/pdf/sample.pdf",
    displayName: "sample.pdf"
  });
  setStatus("Viewer ready");
}

async function handleExport() {
  setStatus("Generating export...");
  try {
    const result = await viewer.documents.export({ timeoutMs: 60000 });
    setStatus(`Export ready: ${result.fileUrl}`);
    window.open(result.fileUrl, "_blank");
  } catch (error) {
    console.error(error);
    setStatus("Export failed");
  }
}

document.querySelector("#export-file")?.addEventListener("click", () => {
  handleExport().catch(console.error);
});

document.querySelector("#print-file")?.addEventListener("click", () => {
  viewer.documents.print();
});

startViewer().catch((error) => {
  console.error(error);
  setStatus("Viewer failed to start");
});
Vanilla Integration

React Integration

Trigger document print and async exports inside a React hook lifecycle component:

import { useEffect, useRef, useState } from "react";
import { createViewer, type RasterexViewer } from "@rasterex/viewer";
import "./style.css";

export function ExportPrintExample() {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const viewerRef = useRef<RasterexViewer | null>(null);
  const [status, setStatus] = useState("Starting viewer...");

  useEffect(() => {
    if (!containerRef.current) return undefined;

    const viewer = createViewer({ container: containerRef.current });
    viewerRef.current = viewer;

    async function start(): Promise<void> {
      await viewer.mount();
      await viewer.ready();
      await viewer.documents.open({
        url: "https://pdfobject.com/pdf/sample.pdf",
        displayName: "sample.pdf"
      });
      setStatus("Viewer ready");
    }

    void start().catch((error) => {
      console.error(error);
      setStatus("Viewer failed to start");
    });

    return () => {
      viewer.destroy();
      viewerRef.current = null;
    };
  }, []);

  async function exportFile(): Promise<void> {
    setStatus("Generating export...");
    try {
      const result = await viewerRef.current?.documents.export({
        timeoutMs: 60000
      });

      if (result) {
        setStatus(`Export ready: ${result.fileUrl}`);
        window.open(result.fileUrl, "_blank");
      }
    } catch (error) {
      setStatus("Export failed");
    }
  }

  function printFile(): void {
    viewerRef.current?.documents.print();
  }

  return (
    <div>
      <div ref={containerRef} style={{ height: 600 }} />
      <button type="button" onClick={() => void exportFile()}>Export</button>
      <button type="button" onClick={printFile}>Print</button>
      <pre>{status}</pre>
    </div>
  );
}
React Integration

Vue Integration

Trigger document print and async exports inside a Vue Composition template:

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
import { createViewer, type RasterexViewer } from "@rasterex/viewer";
import "./style.css";

const containerRef = ref<HTMLElement | null>(null);
const viewerRef = shallowRef<RasterexViewer | null>(null);
const status = ref("Starting viewer...");

onMounted(async () => {
  if (!containerRef.value) return;

  const viewer = createViewer({ container: containerRef.value });
  viewerRef.value = viewer;

  try {
    await viewer.mount();
    await viewer.ready();
    await viewer.documents.open({
      url: "https://pdfobject.com/pdf/sample.pdf",
      displayName: "sample.pdf"
    });
    status.value = "Viewer ready";
  } catch (error) {
    console.error(error);
    status.value = "Viewer failed to start";
  }
});

onBeforeUnmount(() => {
  viewerRef.value?.destroy();
  viewerRef.value = null;
});

async function exportFile() {
  status.value = "Generating export...";
  try {
    const result = await viewerRef.value?.documents.export({ timeoutMs: 60000 });
    if (result) {
      status.value = `Export ready: ${result.fileUrl}`;
      window.open(result.fileUrl, "_blank");
    }
  } catch (error) {
    status.value = "Export failed";
  }
}

function printFile() {
  viewerRef.value?.documents.print();
}
</script>

<template>
  <div>
    <div ref="containerRef" style="height: 600px" />
    <button type="button" @click="exportFile">Export</button>
    <button type="button" @click="printFile">Print</button>
    <pre>{{ status }}</pre>
  </div>
</template>
Vue Integration

Angular Integration

Trigger document print and async exports inside an Angular template structure:

import {
  AfterViewInit,
  Component,
  ElementRef,
  OnDestroy,
  ViewChild
} from "@angular/core";
import { createViewer, type RasterexViewer } from "@rasterex/viewer";

@Component({
  selector: "app-export-print",
  templateUrl: "./export-print.component.html"
})
export class ExportPrintComponent implements AfterViewInit, OnDestroy {
  @ViewChild("viewerContainer", { static: true })
  viewerContainer!: ElementRef<HTMLElement>;

  status = "Starting viewer...";
  private viewer: RasterexViewer | null = null;

  async ngAfterViewInit(): Promise<void> {
    const viewer = createViewer({
      container: this.viewerContainer.nativeElement
    });

    this.viewer = viewer;

    try {
      await viewer.mount();
      await viewer.ready();
      await viewer.documents.open({
        url: "https://pdfobject.com/pdf/sample.pdf",
        displayName: "sample.pdf"
      });
      this.status = "Viewer ready";
    } catch (error) {
      console.error(error);
      this.status = "Viewer failed to start";
    }
  }

  async exportFile(): Promise<void> {
    if (!this.viewer) return;
    this.status = "Generating export...";

    try {
      const result = await this.viewer.documents.export({
        timeoutMs: 60000
      });

      this.status = `Export ready: ${result.fileUrl}`;
      window.open(result.fileUrl, "_blank");
    } catch (error) {
      this.status = "Export failed";
    }
  }

  printFile(): void {
    this.viewer?.documents.print();
  }

  ngOnDestroy(): void {
    this.viewer?.destroy();
  }
}
Angular Integration

Live Preview

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

Interactive Workbench

File export preview

Trigger an export and review the resulting file URL as soon as it is ready.

Additional Resources

Explore related file workflows and payload references.