Components

Link

The <Link> component creates a clickable hyperlink inside the PDF document. Links can point to external URLs or internal page anchors.

Props

Prop	Type	Default	Description
`src`*	`string`	—	The URL or internal anchor target ('#page-3', '#my-anchor').
`style`	`Style`	—	Standard style object for the link container.

External Links

vue

<template>
  <Document>
    <Page size="A4">
      <Text :style="{ fontSize: 12 }">
        Visit our website at{' '}
        <Link src="https://example.com">
          <Text :style="{ color: '#2563eb', textDecoration: 'underline' }">
            example.com
          </Text>
        </Link>
        {' '}for more information.
      </Text>
    </Page>
  </Document>
</template>

Internal Links

Link to other pages or anchored elements within the document:

vue

<template>
  <Document>
    <Page size="A4">
      <Text :style="{ fontSize: 14 }">
        See the{' '}
        <Link src="#conclusion">
          <Text :style="{ color: '#2563eb' }">Conclusion</Text>
        </Link>
        {' '}section for a summary.
      </Text>

      <!-- Later in the document... -->
      <View :id="'conclusion'" :style="{ marginTop: 200 }">
        <Text :style="{ fontSize: 20, fontWeight: 'bold' }">
          Conclusion
        </Text>
        <Text :style="{ fontSize: 12 }">
          Summary of the document content...
        </Text>
      </View>
    </Page>
  </Document>
</template>

To link to a specific page number, use the format #page-3 as the src prop.