kviewer 0.3.1 → 0.3.3

package/dist/runtime/annotation/engine/tools/highlight.js

@@ -2,6 +2,15 @@ import Konva from "konva";
 import { AnnotationType } from "../types.js";
 import { Editor } from "../editor/editor.js";
 export class EditorHighLight extends Editor {
+  get activeAnnotation() {
+    if (!this.currentAnnotation) throw new Error("Highlight editor is not active");
+    return this.currentAnnotation;
+  }
+  get activeStyle() {
+    const style = this.activeAnnotation.style;
+    if (!style) throw new Error("Highlight annotation has no style");
+    return style;
+  }
   /**
    * Creates an EditorHighLight instance.
    * @param EditorOptions Options used to initialize the editor
@@ -16,8 +25,9 @@ export class EditorHighLight extends Editor {
    * @param fixElement Element used as the positioning reference
    */
   convertTextSelection(elements, fixElement) {
-    this.currentShapeGroup = this.createShapeGroup();
-    this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
+    const shapeGroup = this.createShapeGroup();
+    this.currentShapeGroup = shapeGroup;
+    this.getBgLayer().add(shapeGroup.konvaGroup);
     const fixBounding = fixElement.getBoundingClientRect();
     elements.forEach((spanEl) => {
       const bounding = spanEl.getBoundingClientRect();
@@ -26,14 +36,14 @@ export class EditorHighLight extends Editor {
         fixBounding
       );
       const shape = this.createShape(x, y, width, height);
-      this.currentShapeGroup.konvaGroup.add(shape);
+      shapeGroup.konvaGroup.add(shape);
     });
     this.setShapeGroupDone({
-      id: this.currentShapeGroup.id,
+      id: shapeGroup.id,
       contentsObj: {
         text: this.getElementOuterText(elements)
       },
-      color: this.currentAnnotation.style.color
+      color: this.activeStyle.color
     });
   }
   /**
@@ -67,7 +77,7 @@ export class EditorHighLight extends Editor {
    * @returns A concrete Konva.Shape instance
    */
   createShape(x, y, width, height) {
-    switch (this.currentAnnotation.type) {
+    switch (this.activeAnnotation.type) {
       case AnnotationType.HIGHLIGHT:
         return this.createHighlightShape(x, y, width, height);
       case AnnotationType.UNDERLINE:
@@ -76,7 +86,7 @@ export class EditorHighLight extends Editor {
         return this.createStrikeoutShape(x, y, width, height);
       default:
         throw new Error(
-          `Unsupported annotation type: ${this.currentAnnotation.type}`
+          `Unsupported annotation type: ${this.activeAnnotation.type}`
         );
     }
   }
@@ -95,7 +105,7 @@ export class EditorHighLight extends Editor {
       width,
       height,
       opacity: 0.5,
-      fill: this.currentAnnotation.style.color
+      fill: this.activeStyle.color
     });
   }
   /**
@@ -111,7 +121,7 @@ export class EditorHighLight extends Editor {
       x,
       y: height + y - 2,
       width,
-      stroke: this.currentAnnotation.style.color,
+      stroke: this.activeStyle.color,
       opacity: 1,
       strokeWidth: 1,
       hitStrokeWidth: 10,
@@ -131,7 +141,7 @@ export class EditorHighLight extends Editor {
       x,
       y: y + height / 2,
       width,
-      stroke: this.currentAnnotation.style.color,
+      stroke: this.activeStyle.color,
       opacity: 1,
       strokeWidth: 1,
       hitStrokeWidth: 10,

package/dist/runtime/annotation/engine/tools/note.js

@@ -11,10 +11,12 @@ export class EditorNote extends Editor {
   }
   async mouseUpHandler(e) {
     const color = "rgb(255, 222, 33)";
-    const { x, y } = this.konvaStage.getRelativePointerPosition();
     if (e.currentTarget !== this.konvaStage) {
       return;
     }
+    const pos = this.konvaStage.getRelativePointerPosition();
+    if (!pos) return;
+    const { x, y } = pos;
     this.isPainting = true;
     this.currentShapeGroup = this.createShapeGroup();
     this.getBgLayer().add(this.currentShapeGroup.konvaGroup);

package/dist/runtime/annotation/engine/tools/rectangle.js

@@ -23,11 +23,15 @@ export class EditorRectangle extends Editor {
     if (e.currentTarget !== this.konvaStage) {
       return;
     }
+    const pos = this.konvaStage.getRelativePointerPosition();
+    const annotation = this.currentAnnotation;
+    const style = annotation?.style;
+    if (!pos || !annotation || !style) return;
     this.rect = null;
     this.isPainting = true;
-    this.currentShapeGroup = this.createShapeGroup();
-    this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
-    const pos = this.konvaStage.getRelativePointerPosition();
+    const shapeGroup = this.createShapeGroup();
+    this.currentShapeGroup = shapeGroup;
+    this.getBgLayer().add(shapeGroup.konvaGroup);
     this.vertex = { x: pos.x, y: pos.y };
     this.rect = new Konva.Rect({
       x: pos.x,
@@ -35,11 +39,11 @@ export class EditorRectangle extends Editor {
       width: 0,
       height: 0,
       visible: false,
-      stroke: this.currentAnnotation.style.color,
-      strokeWidth: this.currentAnnotation.style.strokeWidth || 2,
-      opacity: this.currentAnnotation.style.opacity
+      stroke: style.color,
+      strokeWidth: style.strokeWidth || 2,
+      opacity: style.opacity
     });
-    this.currentShapeGroup.konvaGroup.add(this.rect);
+    shapeGroup.konvaGroup.add(this.rect);
     window.addEventListener("mouseup", this.globalPointerUpHandler);
   }
   /**
@@ -51,8 +55,10 @@ export class EditorRectangle extends Editor {
       return;
     }
     e.evt.preventDefault();
+    if (!this.rect) return;
     this.rect.show();
     const pos = this.konvaStage.getRelativePointerPosition();
+    if (!pos) return;
     const areaAttr = {
       x: Math.min(this.vertex.x, pos.x),
       y: Math.min(this.vertex.y, pos.y),
@@ -69,7 +75,9 @@ export class EditorRectangle extends Editor {
       return;
     }
     this.isPainting = false;
+    if (!this.rect) return;
     const group = this.rect.getParent();
+    if (!group) return;
     if (!this.rect.isVisible() && group.getType() === "Group") {
       this.delShapeGroup(group.id());
       return;
@@ -80,9 +88,11 @@ export class EditorRectangle extends Editor {
       this.rect = null;
       return;
     }
+    const style = this.currentAnnotation?.style;
+    if (!style) return;
     this.setShapeGroupDone({
       id: group.id(),
-      color: this.currentAnnotation.style.color,
+      color: style.color,
       contentsObj: {
         text: ""
       }
@@ -103,6 +113,7 @@ export class EditorRectangle extends Editor {
    * @returns true if the rectangle is too small, false otherwise
    */
   isTooSmall() {
+    if (!this.rect) return true;
     const { width, height } = this.rect.size();
     return Math.max(width, height) < Editor.MinSize;
   }

package/dist/runtime/annotation/engine/tools/signature.js

@@ -11,7 +11,7 @@ import {
 import { cursorPreviewSize, placementSize } from "../../utils/placement_size.js";
 export class EditorSignature extends Editor {
   signatureUrl;
-  signatureImage;
+  signatureImage = null;
   constructor(editorOptions, defaultSignatureUrl) {
     super({ ...editorOptions, editorType: AnnotationType.SIGNATURE });
     this.signatureUrl = defaultSignatureUrl;
@@ -54,6 +54,7 @@ export class EditorSignature extends Editor {
       const crosshair = { x: newWidth / 2, y: newHeight / 2 };
       this.signatureImage = image;
       this.signatureImage.setAttrs({
+        image: image.image(),
         x: pos.x - crosshair.x,
         y: pos.y - crosshair.y,
         width: newWidth,

package/dist/runtime/annotation/engine/tools/stamp.js

@@ -14,7 +14,7 @@ import {
 } from "../../utils/placement_size.js";
 export class EditorStamp extends Editor {
   stampUrl;
-  stampImage;
+  stampImage = null;
   stampWidth = null;
   stampHeight = null;
   constructor(editorOptions, defaultStampUrl) {
@@ -92,6 +92,7 @@ export class EditorStamp extends Editor {
       const crosshair = { x: newWidth / 2, y: newHeight / 2 };
       this.stampImage = image;
       this.stampImage.setAttrs({
+        image: image.image(),
         x: pos.x - crosshair.x,
         y: pos.y - crosshair.y,
         width: newWidth,

package/dist/runtime/annotation/engine/utils.js

@@ -58,6 +58,7 @@ export function removeCssCustomProperty(propertyName) {
 }
 export async function base64ToImageBitmap(base64) {
   const base64Data = base64.split(",")[1];
+  if (!base64Data) throw new Error("Invalid base64 image data");
   const binaryString = atob(base64Data);
   const length = binaryString.length;
   const bytes = new Uint8Array(length);
@@ -134,7 +135,7 @@ export function getPDFDateTimestamp(dateString) {
   let tzOffset = 0;
   if (tzMatch) {
     const sign = tzMatch[1] === "+" ? 1 : -1;
-    const hours = Number.parseInt(tzMatch[2], 10) || 0;
+    const hours = Number.parseInt(tzMatch[2] ?? "0", 10) || 0;
     const minutes = Number.parseInt(tzMatch[3] || "0", 10) || 0;
     tzOffset = sign * (hours * 60 + minutes);
   }

package/dist/runtime/annotation/pdf-export/download.js

@@ -1,5 +1,5 @@
 export function downloadPdfBytes(data, fileName) {
-  const arrayBuffer = data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
+  const arrayBuffer = Uint8Array.from(data).buffer;
   const blob = new Blob([arrayBuffer], { type: "application/pdf" });
   const link = document.createElement("a");
   const url = URL.createObjectURL(blob);

package/dist/runtime/annotation/pdf-export/export-form-fields.js

@@ -322,14 +322,7 @@ async function buildSignedSignatureAppearance(pdfDoc, dataUrl, width, height) {
   const mimeType = match[1] ?? "";
   const base64 = match[2] ?? "";
   const image = mimeType.includes("jpeg") || mimeType.includes("jpg") ? await pdfDoc.embedJpg(base64) : await pdfDoc.embedPng(base64);
-  const imgAspect = image.width / image.height;
-  const boxAspect = width / height;
-  let drawW = width;
-  let drawH = height;
-  if (imgAspect > boxAspect) drawH = width / imgAspect;
-  else drawW = height * imgAspect;
-  const drawX = (width - drawW) / 2;
-  const drawY = (height - drawH) / 2;
+  const { drawX, drawY, drawW, drawH } = fitImageInBox(image, width, height);
   const ops = [
     "q",
     `${drawW.toFixed(3)} 0 0 ${drawH.toFixed(3)} ${drawX.toFixed(3)} ${drawY.toFixed(3)} cm`,
@@ -346,6 +339,20 @@ async function buildSignedSignatureAppearance(pdfDoc, dataUrl, width, height) {
   const stream = PDFRawStream.of(dict, new TextEncoder().encode(ops));
   return pdfDoc.context.register(stream);
 }
+function fitImageInBox(image, boxW, boxH) {
+  const imgAspect = image.width / image.height;
+  const boxAspect = boxW / boxH;
+  let drawW = boxW;
+  let drawH = boxH;
+  if (imgAspect > boxAspect) drawH = boxW / imgAspect;
+  else drawW = boxH * imgAspect;
+  return {
+    drawX: (boxW - drawW) / 2,
+    drawY: (boxH - drawH) / 2,
+    drawW,
+    drawH
+  };
+}
 async function embedSignatureImage(pdfDoc, field) {
   const dataUrl = field.value;
   const match = dataUrl.match(/^data:(image\/[a-zA-Z0-9.+-]+);base64,(.+)$/);
@@ -370,11 +377,12 @@ async function embedSignatureImage(pdfDoc, field) {
         const pageRef = page.ref;
         const widgetPage = widget.P();
         if (widgetPage === pageRef || !widgetPage) {
+          const { drawX, drawY, drawW, drawH } = fitImageInBox(image, rect.width, rect.height);
           page.drawImage(image, {
-            x: rect.x,
-            y: rect.y,
-            width: rect.width,
-            height: rect.height
+            x: rect.x + drawX,
+            y: rect.y + drawY,
+            width: drawW,
+            height: drawH
           });
           break;
         }

package/dist/runtime/annotation/pdf-export/export.js

@@ -192,7 +192,7 @@ async function flattenPageAnnotations(pdfDoc, page, annotations) {
   for (const annotation of annotations) {
     try {
       const node = Konva.Node.create(annotation.konvaString);
-      if (node instanceof Konva.Node) {
+      if (node instanceof Konva.Group || node instanceof Konva.Shape) {
         layer.add(node);
         imageLoaders.push(...loadImagesForNode(node));
       }

package/dist/runtime/annotation/pdf-export/parse_polyline.js

@@ -12,7 +12,11 @@ function parseSvgPathToPoints(data) {
     const nums = cmd.slice(1).trim().split(/[\s,]+/).map((value) => Number.parseFloat(value));
     if (type === "M" || type === "L") {
       for (let i = 0; i < nums.length; i += 2) {
-        points.push(nums[i], nums[i + 1]);
+        const x = nums[i];
+        const y = nums[i + 1];
+        if (x !== void 0 && y !== void 0) {
+          points.push(x, y);
+        }
       }
     } else if (type === "Q") {
       if (nums.length >= 4) {

package/dist/runtime/annotation/pdf-export/parse_stamp.js

@@ -177,10 +177,10 @@ export class StampParser extends AnnotationParser {
       ...this.ownerDateEntries(annotation.title, annotation.date),
       Open: false
     };
-    if (apDict) {
-      stampAnnDict.AP = apDict;
-    }
-    const stampAnn = context.obj(stampAnnDict);
+    const stampAnn = context.obj({
+      ...stampAnnDict,
+      ...apDict ? { AP: apDict } : {}
+    });
     const stampAnnRef = context.register(stampAnn);
     this.addAnnotationToPage(page, stampAnnRef);
     for (const comment of annotation.comments || []) {

package/dist/runtime/annotation/pdf-export/print.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Print a PDF by handing the actual (vector) bytes to the browser's native
+ * PDF pipeline, instead of letting the print dialog rasterize the on-screen
+ * canvases: a hidden iframe loads the blob and `contentWindow.print()` opens
+ * the dialog with the full-resolution document.
+ *
+ * On iOS/iPadOS Safari an iframe renders only the first PDF page, so there
+ * the blob opens in a new tab and the user prints from the native preview
+ * (share sheet → Print). Same fallback if `print()` throws (some browsers
+ * refuse to script-print plugin documents).
+ */
+export declare function printPdfBytes(data: Uint8Array): Promise<void>;

package/dist/runtime/annotation/pdf-export/print.js

@@ -0,0 +1,63 @@
+import { isIPad } from "../../annotation/engine/input-device.js";
+let activeFrame = null;
+let activeUrl = null;
+function reclaimPrevious() {
+  activeFrame?.remove();
+  activeFrame = null;
+  if (activeUrl) {
+    URL.revokeObjectURL(activeUrl);
+    activeUrl = null;
+  }
+}
+function openInNewTab(url) {
+  const win = window.open(url, "_blank");
+  if (!win) {
+    throw new Error(
+      "Could not open the PDF for printing \u2014 the popup was blocked. Allow popups for this site and try again."
+    );
+  }
+}
+export async function printPdfBytes(data) {
+  reclaimPrevious();
+  const arrayBuffer = Uint8Array.from(data).buffer;
+  const blob = new Blob([arrayBuffer], { type: "application/pdf" });
+  const url = URL.createObjectURL(blob);
+  activeUrl = url;
+  const isAppleMobile = isIPad() || /iPhone|iPod/.test(navigator.userAgent);
+  if (isAppleMobile) {
+    openInNewTab(url);
+    return;
+  }
+  const frame = document.createElement("iframe");
+  frame.style.position = "fixed";
+  frame.style.right = "0";
+  frame.style.bottom = "0";
+  frame.style.width = "1px";
+  frame.style.height = "1px";
+  frame.style.border = "0";
+  frame.style.visibility = "hidden";
+  frame.src = url;
+  activeFrame = frame;
+  await new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      reject(new Error("Timed out loading the PDF for printing"));
+    }, 15e3);
+    frame.addEventListener(
+      "load",
+      () => {
+        clearTimeout(timer);
+        resolve();
+      },
+      { once: true }
+    );
+    document.body.appendChild(frame);
+  });
+  try {
+    const win = frame.contentWindow;
+    if (!win) throw new Error("Print frame has no window");
+    win.focus();
+    win.print();
+  } catch {
+    openInNewTab(url);
+  }
+}

package/dist/runtime/annotation/pdf-export/unicode-font.js

@@ -1,10 +1,7 @@
 import fontkit from "@pdf-lib/fontkit";
 let fontBytesPromise = null;
 let loadFontBytes = async () => {
-  const { default: fontUrl } = await import(
-    // @ts-expect-error -- Vite asset import, no type declaration
-    "../../assets/fonts/LiberationSans-Regular.ttf?url"
-  );
+  const { default: fontUrl } = await import("../../assets/fonts/LiberationSans-Regular.ttf?url");
   const response = await fetch(fontUrl);
   if (!response.ok) {
     throw new Error(`Failed to load Unicode fallback font (${response.status})`);

package/dist/runtime/annotation/pdf-import/decode_stamp.js

@@ -16,13 +16,14 @@ export function decodeStampAnnotation(annotation, context) {
     return null;
   }
   const group = createGhostGroup(annotation.id);
-  group.add(new Konva.Image({
+  const imageConfig = {
     x: rect.x,
     y: rect.y,
     width: rect.width > 0 ? rect.width : appearance.width,
     height: rect.height > 0 ? rect.height : appearance.height,
     base64: appearance.dataUrl
-  }));
+  };
+  group.add(new Konva.Image(imageConfig));
   const store = createAnnotationStore({
     annotation,
     allAnnotations: context.allAnnotations,

package/dist/runtime/annotation/pdf-import/extract_stamp_appearance.js

@@ -88,7 +88,7 @@ async function renderPageToCanvas(page, canvas, annotationMode, scale) {
   if (!context) throw new Error("Unable to create canvas context for stamp extraction");
   const viewport = page.getViewport({ scale });
   const task = page.render({
-    canvasContext: context,
+    canvas,
     viewport,
     annotationMode
   });

package/dist/runtime/annotation/pdf-import/utils.js

@@ -104,7 +104,7 @@ export function getComments(annotation, allAnnotations) {
     if (candidate.annotationType !== 1) continue;
     if (candidate.inReplyTo !== annotation.id) continue;
     comments.push({
-      id: candidate.id,
+      id: typeof candidate.id === "string" ? candidate.id : "",
       title: getAnnotationTitle(candidate),
       date: getAnnotationDate(candidate),
       content: getAnnotationText(candidate)

package/dist/runtime/components/FormFieldLayer.d.vue.ts

@@ -5,7 +5,7 @@ type __VLS_Props = {
     /** Carries displayed width/height plus the page's `/Rotate` and MediaBox
      *  origin — the single source of truth for mapping `/Rect` to canvas. */
     pageTransform: PageTransform;
-    pointerEvents: string;
+    pointerEvents: 'auto' | 'none';
     zIndex: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/FormFieldLayer.vue.d.ts

@@ -5,7 +5,7 @@ type __VLS_Props = {
     /** Carries displayed width/height plus the page's `/Rotate` and MediaBox
      *  origin — the single source of truth for mapping `/Rect` to canvas. */
     pageTransform: PageTransform;
-    pointerEvents: string;
+    pointerEvents: 'auto' | 'none';
     zIndex: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/PdfPage.vue

@@ -272,7 +272,7 @@ async function renderCanvas(opts) {
     tmp.height = viewport.height;
     try {
       currentRenderTask = proxy.render({
-        canvasContext: tmp.getContext("2d"),
+        canvas: tmp,
         viewport,
         annotationMode: PDFJS_ANNOTATION_MODE_DISABLE
       });
@@ -293,7 +293,7 @@ async function renderCanvas(opts) {
     canvas.height = viewport.height;
     try {
       currentRenderTask = proxy.render({
-        canvasContext: canvas.getContext("2d"),
+        canvas,
         viewport,
         annotationMode: PDFJS_ANNOTATION_MODE_DISABLE
       });
@@ -349,7 +349,7 @@ async function renderWindowCanvas() {
   tmp.height = Math.floor(h * k);
   try {
     windowRenderTask = proxy.render({
-      canvasContext: tmp.getContext("2d"),
+      canvas: tmp,
       viewport,
       transform: [1, 0, 0, 1, -x * k, -y * k],
       annotationMode: PDFJS_ANNOTATION_MODE_DISABLE

package/dist/runtime/components/Viewer.d.vue.ts

@@ -78,6 +78,11 @@ type __VLS_Props = {
     messages?: KviewerMessageOverrides;
 };
 declare function exportPdf(options?: ExportPdfOptions): Promise<Uint8Array>;
+/** Print via the real PDF instead of the on-screen canvases: export the
+ *  document (annotations + form values baked in) and hand the vector bytes
+ *  to the browser's native PDF print pipeline. Screen canvases are sized
+ *  for the monitor and would come out blurry on paper. */
+declare function printPdf(options?: ExportPdfOptions): Promise<void>;
 type ImportMode = 'replace' | 'merge';
 declare function importAnnotations(annotations: IAnnotationStore[], options?: {
     mode?: ImportMode;
@@ -100,6 +105,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     getAnnotations: () => IAnnotationStore[];
     importAnnotations: typeof importAnnotations;
     exportPdf: typeof exportPdf;
+    /** Export the document (same options as `exportPdf`, minus `download`)
+     *  and open the browser's print dialog on the resulting vector PDF —
+     *  full print quality, unlike printing the screen canvases. */
+    printPdf: typeof printPdf;
     getKonvaCanvasState: typeof getKonvaCanvasState;
     getFormFieldValues: () => import("../annotation/engine/types.js").FormFieldValue[];
     setFormFieldValue: (fieldName: string, value: string | boolean | string[]) => void;
@@ -180,6 +189,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     clickToSign: boolean;
     readonly: boolean;
     active: boolean;
+    formEditMode: boolean;
     locale: KviewerLocale;
     menuItems: ViewerMenuItem[];
     tools: ViewerToolEntry[];
@@ -188,7 +198,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     signatureHandlers: SignatureHandlers;
     viewMode: ViewMode;
     shapeDetection: boolean;
-    formEditMode: boolean;
     roleColors: Record<string, string>;
     activeRoleId: string | null;
     editablePlacedFields: boolean;

package/dist/runtime/components/Viewer.vue

@@ -214,6 +214,7 @@ import {
 } from "../annotation/pdf-import/decode";
 import { getTimestampString } from "../annotation/engine/utils";
 import { downloadPdfBytes } from "../annotation/pdf-export/download";
+import { printPdfBytes } from "../annotation/pdf-export/print";
 import { exportAnnotationsToPdf } from "../annotation/pdf-export/export";
 import { createPageVirtualization } from "../composables/usePageVirtualization";
 import { createPageProxyCache } from "../composables/usePageProxyCache";
@@ -260,7 +261,7 @@ const fieldPlacedCallbacks = /* @__PURE__ */ new Set();
 const signedStatusCallbacks = /* @__PURE__ */ new Set();
 const viewerRoot = ref(null);
 const scrollContainer = ref(null);
-const { state: viewerState, setScrollToPageFn, setDownloadPdfFn, setApplyScaleFn } = provideViewerState();
+const { state: viewerState, setScrollToPageFn, setDownloadPdfFn, setPrintPdfFn, setApplyScaleFn } = provideViewerState();
 watchEffect(() => {
   viewerState.readonly.value = props.readonly ?? false;
 });
@@ -806,6 +807,18 @@ async function exportPdf(options = {}) {
   }
   return bytes;
 }
+async function printPdf(options = {}) {
+  if (scriptingManager?.isReady()) {
+    await scriptingManager.dispatchWillPrint().catch(() => {
+    });
+  }
+  const bytes = await exportPdf({ ...options, download: false });
+  await printPdfBytes(bytes);
+  if (scriptingManager?.isReady()) {
+    scriptingManager.dispatchDidPrint().catch(() => {
+    });
+  }
+}
 async function importAnnotations(annotations, options) {
   const mode = options?.mode ?? "replace";
   const normalized = normalizeImportedAnnotations(
@@ -1022,7 +1035,12 @@ onMounted(() => {
   if (isIPad()) {
     viewerState.setStylusMode(true);
   }
-  setDownloadPdfFn(() => exportPdf({ download: true }));
+  setDownloadPdfFn(async () => {
+    await exportPdf({ download: true });
+  });
+  setPrintPdfFn(async () => {
+    await printPdf();
+  });
   loadDocument();
   window.addEventListener("keydown", onGlobalKeydown);
 });
@@ -1092,6 +1110,10 @@ defineExpose({
   getAnnotations: () => painter?.getData() ?? [],
   importAnnotations,
   exportPdf,
+  /** Export the document (same options as `exportPdf`, minus `download`)
+   *  and open the browser's print dialog on the resulting vector PDF —
+   *  full print quality, unlike printing the screen canvases. */
+  printPdf,
   getKonvaCanvasState,
   getFormFieldValues: () => formFieldsState.getAllFieldValues(),
   setFormFieldValue: (fieldName, value) => formFieldsState.setFieldValueByName(fieldName, value),

package/dist/runtime/components/Viewer.vue.d.ts

@@ -78,6 +78,11 @@ type __VLS_Props = {
     messages?: KviewerMessageOverrides;
 };
 declare function exportPdf(options?: ExportPdfOptions): Promise<Uint8Array>;
+/** Print via the real PDF instead of the on-screen canvases: export the
+ *  document (annotations + form values baked in) and hand the vector bytes
+ *  to the browser's native PDF print pipeline. Screen canvases are sized
+ *  for the monitor and would come out blurry on paper. */
+declare function printPdf(options?: ExportPdfOptions): Promise<void>;
 type ImportMode = 'replace' | 'merge';
 declare function importAnnotations(annotations: IAnnotationStore[], options?: {
     mode?: ImportMode;
@@ -100,6 +105,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     getAnnotations: () => IAnnotationStore[];
     importAnnotations: typeof importAnnotations;
     exportPdf: typeof exportPdf;
+    /** Export the document (same options as `exportPdf`, minus `download`)
+     *  and open the browser's print dialog on the resulting vector PDF —
+     *  full print quality, unlike printing the screen canvases. */
+    printPdf: typeof printPdf;
     getKonvaCanvasState: typeof getKonvaCanvasState;
     getFormFieldValues: () => import("../annotation/engine/types.js").FormFieldValue[];
     setFormFieldValue: (fieldName: string, value: string | boolean | string[]) => void;
@@ -180,6 +189,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     clickToSign: boolean;
     readonly: boolean;
     active: boolean;
+    formEditMode: boolean;
     locale: KviewerLocale;
     menuItems: ViewerMenuItem[];
     tools: ViewerToolEntry[];
@@ -188,7 +198,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     signatureHandlers: SignatureHandlers;
     viewMode: ViewMode;
     shapeDetection: boolean;
-    formEditMode: boolean;
     roleColors: Record<string, string>;
     activeRoleId: string | null;
     editablePlacedFields: boolean;

package/dist/runtime/components/ViewerTabs.vue

@@ -48,7 +48,7 @@
         class="absolute inset-0"
       >
         <Viewer
-          :ref="(el) => setViewerRef(activeTab.id, el)"
+          :ref="(el) => setViewerRef(activeTab?.id ?? '', el)"
           :source="activeTab.source"
           :active="true"
           :stamps="stamps"