Events

loaded

<VuePDF :pdf="pdf" @loaded="onLoaded" />

Emitted when the page has finished rendering. The payload contains the page's data.

Payload example:

{
  "viewBox": [0, 0, 595.276, 841.89],
  "scale": 1,
  "rotation": 90,
  "offsetX": 0,
  "offsetY": 0,
  "transform": [0, 1, 1, 0, 0, 0],
  "width": 841.89,
  "height": 595.276
}

text-loaded

<VuePDF :pdf="pdf" @text-loaded="onLoaded" />

Emitted when text layer has finished to render, the payload value contains the textDivs and textContent of the page.

Payload example:

{
  "textContent": {
    "items": [{
      "dir": "ltr",
      "fontName": "g_d3_f1",
      "hasEOL": true,
      "height": 17.9328,
      "str": "Trace-based Just-in-Time Type Specialization for Dynamic",
      "transform": [17.9328, 0, 0, 17.9328, 90.5159, 700.6706],
      "width": 449.09111040000033
    }], // ... more text items
    "styles": {
      "g_d3_f1": {
        "fontFamily": "sans-serif",
        "ascent": 0.69,
        "descent": -0.209,
        "vertical": false
      } // ... more objects
    }
  },
  "textDivs": ["<SPANElement>", "<SPANElement>", "..."]
}

annotation-loaded

<VuePDF :pdf="pdf" @annotation-loaded="onLoaded" />

Emitted when annotation layer has finished to render, the payload value contains the annotations of the page.

Payload example:

[
  {
    "annotationFlags": 4,
    "annotationType": 20,
    "rotation": 0,
    "fieldType": "Tx",
    "subType": "Widget"
    // more properties...
  }
] // more annotations

xfa-loaded

<VuePDF :pdf="pdf" @xfa-loaded="onLoaded" />

Emitted when the XFA page has finished rendering.

highlight

<VuePDF :pdf="pdf" @highlight="onHighlight" />

Emitted when a text has been searched in page using highlight-text and highlight-options, this event return a list of matches and the page where the text was found with its textDivs and textContent.

Check the example: Highlight Event

annotation

<VuePDF :pdf="pdf" @annotation="onAnnotation" />

Emitted when user has an interaction with any annotation.

Annotation event data depends on what type of annotation has triggered the event, in general, the events value follows this structure:

Property	Value
type	Possible values: internal-link, link, file-attachment, form-text, form-select, form-checkbox, form-radio, form-button
data	Annotation's associated data

internal-link

internal-link emitted when the user clicks on a link that redirects to another content within the document.

{
  "type": "internal-link",
  "data": {
    "referencedPage": 3,
    "offset": {
      "left": 82,
      "bottom": 716
    },
    "dest": [{ "num": 2, "gen": 0 }, { "name": "XYZ" }, 82, 716, null]
  }
}

Property	Description
referencedPage	The 1-based page number the link points to
offset	The left and bottom coordinates within the target page
dest	The raw PDF destination array resolved from the link (see PDF spec)

link

link emitted when the user clicks on an external link.

{
  "type": "link",
  "data": {
    "url": "mailto:aor@testmail.com",
    "unsafeUrl": "mailto:aor@testmail.com"
  }
}

file-attachment

file-attachment emitted when the user double-clicks an attachment annotation.

{
  "type": "file-attachment",
  "data": {
    "filename": "utf8test.txt",
    "content": [83, 101, 110] // Uint8Array
  }
}

form-text

form-text is emitted when the user enters a value in a text-field element.

{
  "type": "form-text",
  "data": {
    "fieldName": "firstname",
    "value": "Aldo Hernandez"
  }
}

form-select

form-select is emitted when the user selects a value in a single-select or multi-select element.

{
  "type": "form-select",
  "data": {
    "fieldName": "gender",
    "value": [
      {
        "value": "M",
        "label": "Male"
      }
    ],
    "options": [
      {
        "value": "",
        "label": "-"
      },
      {
        "value": "M",
        "label": "Male"
      },
      {
        "value": "F",
        "label": "Female"
      }
    ]
  }
}

form-checkbox

form-checkbox emitted when the user changes a checkbox field element.

{
  "type": "form-checkbox",
  "data": {
    "fieldName": "newsletter",
    "checked": true
  }
}

form-radio

form-radio emitted when the user changes a radio field.

{
  "type": "form-radio",
  "data": {
    "fieldName": "drink",
    "value": "Wine",
    "defaultValue": "Beer",
    "options": ["Water", "Beer", "Wine", "Milk"]
  }
}

form-button

form-button emitted when the user clicks on a push button element.

{
  "type": "form-button",
  "data": {
    "fieldName": "Print",
    "actions": {
      "Mouse Down": ["Print()"]
    },
    "reset": false
  }
}