VuePDF

https://tato30.github.io/vue-pdf/
Admin
VuePDF is an easy-to-use Vue 3 component for rendering PDF pages dynamically on websites. It offers...
Tokens:12,691
Snippets:70
Trust Score:8.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install VuePDF using yarn

Source: https://tato30.github.io/vue-pdf/guide/introduction

This command installs the VuePDF package, `@tato30/vue-pdf`, into your project using the yarn package manager. It serves the same purpose as the npm installation but uses yarn's syntax.

```sh
yarn add @tato30/vue-pdf
```

--------------------------------

### Contribution Workflow: Clone, Install, and Run vue-pdf

Source: https://tato30.github.io/vue-pdf/guide/introduction

These shell commands outline the standard workflow for contributing to the `vue-pdf` project, including cloning the repository, installing dependencies, and running development servers for both the main code and documentation.

```sh
# Clone the repository
git clone https://github.com/TaTo30/vue-pdf.git
# Change to code folder
cd vue-pdf
# Install node_modules
npm install
# Run code with hot reload
npm run dev
# Run docs
npm run dev:docs
```

--------------------------------

### Install VuePDF using npm

Source: https://tato30.github.io/vue-pdf/guide/introduction

This command installs the VuePDF package, `@tato30/vue-pdf`, into your project using the npm package manager. It's the standard way to add the library as a dependency.

```sh
npm i @tato30/vue-pdf
```

--------------------------------

### Implement Dynamic Text Watermark in VuePDF

Source: https://tato30.github.io/vue-pdf/examples/advanced/watermark

This Vue.js component demonstrates how to load a PDF and apply a dynamic text watermark using the VuePDF library. It utilizes the Composition API with `<script setup>` to manage reactive state for the PDF document, watermark text, and various styling options like columns, rows, color, rotation, and font size. The template includes input fields that allow users to modify these watermark properties in real-time, which are then passed as props to the `VuePDF` component.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import { ref } from 'vue'

const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')

const pdfRef = ref(null)
const watermarkText = ref('sample')
const watermarkOptions = ref({
  columns: 4,
  rows: 4,
  color: 'rgba(211, 210, 211, 0.8)',
  rotation: 45,
  fontSize: 18,
})

function reload() {
  pdfRef.value.reload()
}
</script>

<template>
  <div>
    <div>
      <input v-model="watermarkText">
      <input v-model="watermarkOptions.color">
      <input v-model="watermarkOptions.columns">
      <input v-model="watermarkOptions.rows">
      <input v-model="watermarkOptions.rotation">
      <input v-model="watermarkOptions.fontSize">
    </div>
    <VuePDF ref="pdfRef" :pdf="pdf" :watermark-text="watermarkText" :watermark-options="watermarkOptions" />
  </div>
</template>
```

--------------------------------

### usePDF `options` Parameter with Callbacks in JavaScript

Source: https://tato30.github.io/vue-pdf/guide/composables

Provides a JavaScript example demonstrating the use of the `options` parameter for `usePDF`. It includes callback functions for `onPassword` (to handle password requests), `onProgress` (to monitor loading progress), and `onError` (to catch loading errors), allowing for custom handling of PDF loading events and user feedback.

```js
function onPassword(updatePassword, reason) {
  console.log(`Reason for callback: ${reason}`)
  updatePassword('password1234')
}

function onProgress({ loaded, total }) {
  console.log(`${loaded / total * 100}% Loaded`)
}

function onError(reason) {
  console.error(`PDF loading error: ${reason}`)
}

const { pdf, pages, info } = usePDF('sample.pdf', {
  onPassword,
  onProgress,
  onError
})
```

--------------------------------

### Handle VuePDF Annotation Link Events in Vue.js

Source: https://tato30.github.io/vue-pdf/examples/annotation_events/annotation_links

This Vue.js example demonstrates how to integrate VuePDF to display a PDF document and capture annotation events, specifically focusing on links. It imports `VuePDF` and `usePDF` from `@tato30/vue-pdf`, loads a PDF from a specified path, and defines an `onAnnotation` function to log event values when an annotation is interacted with. The `VuePDF` component is configured to enable the annotation layer and emit events via the `@annotation` prop.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf } = usePDF('/45.pdf')
function onAnnotation(value) {
  console.log(value)
}
</script>

<template>
  <div>
    <VuePDF :pdf="pdf" annotation-layer @annotation="onAnnotation" />
  </div>
</template>
```

--------------------------------

### VuePDF Component for Dynamic PDF Scaling

Source: https://tato30.github.io/vue-pdf/examples/basic/scale

This Vue.js snippet demonstrates how to integrate VuePDF to display a PDF document and control its scale dynamically. It uses `ref` for reactive scaling, `usePDF` to load the document from a URL, and provides UI buttons to increment or decrement the zoom level, ensuring the scale stays within a reasonable range (0.25 to 2).

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const scale = ref(1)
const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
</script>

<template>
  <div>
    <div>
      <button @click="scale = scale > 0.25 ? scale - 0.25 : scale">
        -
      </button>
      <span>{{ scale * 100 }}%</span>
      <button @click="scale = scale < 2 ? scale + 0.25 : scale">
        +
      </button>
    </div>
    <VuePDF :pdf="pdf" :scale="scale" />
  </div>
</template>
```

--------------------------------

### usePDF `src` Parameter Example in JavaScript

Source: https://tato30.github.io/vue-pdf/guide/composables

Shows a simple JavaScript example of passing a string literal as the `src` parameter to the `usePDF` composable. This parameter specifies the path or source of the PDF document to be loaded, supporting various types like string, URL, TypedArray, or DocumentInitParameters.

```js
const { pdf, pages, info } = usePDF('sample.pdf')
```

--------------------------------

### Enable Text and Annotation Layers in VuePDF

Source: https://tato30.github.io/vue-pdf/guide/introduction

This example shows how to enable interactive text selection and annotation layers in VuePDF. It requires importing the default CSS styles from `@tato30/vue-pdf/style.css` and setting the `text-layer` and `annotation-layer` props on the `<VuePDF>` component. This allows users to interact with text and annotations within the rendered PDF.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF('sample.pdf')
</script>

<template>
  <VuePDF :pdf="pdf" text-layer annotation-layer />
</template>
```

--------------------------------

### usePDF `info` Property JSON Structure Example

Source: https://tato30.github.io/vue-pdf/guide/composables

Illustrates the expected JSON structure of the `info` property returned by the `usePDF` composable. This object contains various metadata and structural information about the loaded PDF document, including metadata, attachments, embedded JavaScript, and outline objects.

```json
{
  "metadata": {...}, 
  "attachments": {...}, 
  "javascript": [...], 
  "outline": {...}
}
```

--------------------------------

### Implement Text Highlighting in VuePDF Component

Source: https://tato30.github.io/vue-pdf/examples/advanced/highlight_text

This Vue.js example demonstrates how to implement dynamic text highlighting in a PDF viewer using the VuePDF component. It sets up reactive variables for the text to highlight and its options (completeWords, ignoreCase), and binds them to input fields and the VuePDF component's properties. The component fetches a PDF from a URL and displays it with the configured text layer and highlighting.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf';
import '@tato30/vue-pdf/style.css';
import { ref } from 'vue';

const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')

const highlightText = ref('javascript')
const highlightOptions = ref({
  completeWords: false,
  ignoreCase: true,
})
</script>

<template>
  <div>
    <div>
      <input v-model="highlightText">
      <input v-model="highlightOptions.completeWords" type="checkbox">
      <input v-model="highlightOptions.ignoreCase" type="checkbox">
    </div>
    <VuePDF :pdf="pdf" text-layer :highlight-text="highlightText" :highlight-options="highlightOptions" />
  </div>
</template>
```

--------------------------------

### VuePDF Component Prop: page

Source: https://tato30.github.io/vue-pdf/guide/props

The `page` prop is an `int`, optional, and defaults to `1`. It specifies the page number to render, starting from 1.

```APIDOC
page:
  Type: int
  Required: false
  Default: 1
  Description: Page to render, this prop must be a page number starting at 1.
```

```vue
<VuePDF :pdf="pdf" :page="1" />
```

--------------------------------

### VuePDF Component for File Attachment Annotation Handling

Source: https://tato30.github.io/vue-pdf/examples/annotation_events/annotation_attachment

This Vue.js component showcases the integration of VuePDF to display a PDF and capture annotation events, particularly for file attachments. It imports necessary functions from 'vue' and '@tato30/vue-pdf', loads a PDF using 'usePDF', and defines an 'onAnnotation' method to log event data. The 'VuePDF' component is configured with 'annotation-layer' enabled and a specified 'image-resources-path' to ensure proper rendering of annotations.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf } = usePDF('/41.pdf')
function onAnnotation(value) {
  console.log(value)
}
</script>

<template>
  <div>
    <VuePDF :pdf="pdf" annotation-layer image-resources-path="https://unpkg.com/pdfjs-dist@latest/web/images/" @annotation="onAnnotation" />
  </div>
</template>
```

--------------------------------

### Toggle VuePDF Annotation Layer Dynamically

Source: https://tato30.github.io/vue-pdf/examples/basic/annotation_layer

This Vue.js component showcases how to dynamically enable or disable the annotation layer of a PDF document displayed with VuePDF. It utilizes Vue's `ref` for reactive state management and a button to toggle the `annotation-layer` prop of the `VuePDF` component. The `usePDF` composable is used to load the PDF document from a specified path.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const annotation_layer = ref(false)
const { pdf } = usePDF('example_014.pdf')
</script>

<template>
  <div>
    <div>
      <button @click="annotation_layer = !annotation_layer">
        Change to {{ !annotation_layer }}
      </button>
    </div>
    <VuePDF :pdf="pdf" :annotation-layer="annotation_layer" />
  </div>
</template>
```

--------------------------------

### Implement PDF Table of Content with VuePDF

Source: https://tato30.github.io/vue-pdf/examples/advanced/toc

This Vue.js component demonstrates how to extract and display the table of content (outline) from a PDF document using the `@tato30/vue-pdf` library. It utilizes `usePDF` to get PDF information, processes the outline into a reactive tree structure, and renders it using a custom `ChaptersList` component. The `onChapterClick` function is a placeholder for handling navigation when a chapter is selected.

```vue
<script setup>
import { ref, triggerRef, watchEffect } from 'vue'

import { VuePDF, usePDF } from '@tato30/vue-pdf'

import ChaptersList from './ChaptersList.vue'

const { pdf, info, getPDFDestination } = usePDF('/45.pdf')
const outlineTree = ref([])

watchEffect(() => {
  if (info.value.outline !== undefined) {
    outlineTree.value = info.value.outline.map(function convert(node) {
      return {
        title: node.title,
        destination: getPDFDestination(node.dest),
        items: node.items.map((item) => {
          return convert(item)
        }),
      }
    })
  }
})
triggerRef(info)

function onChapterClick(value) {
  value.then((v) => {
    console.log(v)
  })
}
</script>

<template>
  <div id="toc_wrapper">
    <div class="toc">
      <ChaptersList
        :items="outlineTree"
        @chapterClick="onChapterClick"
      />
    </div>
    <div class="container">
      <VuePDF :pdf="pdf" />
    </div>
  </div>
</template>
```

--------------------------------

### Reload VuePDF Component Render Task

Source: https://tato30.github.io/vue-pdf/guide/methods

Demonstrates how to use the `reload` method on a VuePDF component instance. This method is useful for re-rendering the PDF, for example, when the parent container's width changes and `fit-parent` prop is used.

```vue
<script setup>
import { ref } from 'vue'

const VPDF = ref({})
function someEvent() {
  VPDF.value.reload()
}
</script>

<template>
  <VuePDF ref="VPDF" :pdf="pdf" />
</template>
```

--------------------------------

### VuePDF annotations-filter Prop Configuration and Usage

Source: https://tato30.github.io/vue-pdf/guide/props

Defines the `annotations-filter` prop for the `VuePDF` component, allowing control over which annotation types are displayed. It accepts an array of strings corresponding to specific annotation types. The example demonstrates how to set up a filter to display only 'Link', 'Text', and 'Widget' annotations.

```APIDOC
annotations-filter:
  Type: array
  Required: false
  Default: null
  Description: Allows to choose which annotations display on page.
  Available Options:
    - Link
    - Text
    - Stamp
    - Popup
    - FreeText
    - Line
    - Square
    - Circle
    - PolyLine
    - Caret
    - Ink
    - Polygon
    - Highlight
    - Underline
    - Squiggly
    - StrikeOut
    - FileAttachment
    - Widget (includes Widget.Tx, Widget.Btn, Widget.Ch, Widget.Sig)
```

```vue
<script setup>
const filter = ref(['Link', 'Text', 'Widget'])
</script>

<VuePDF :pdf="pdf" annotation-layer :annotations-filter="filter" />
```

--------------------------------

### VuePDF annotations-map Prop Configuration and Usage

Source: https://tato30.github.io/vue-pdf/guide/props

Defines the `annotations-map` prop for the `VuePDF` component, enabling modification of annotation data before rendering. It accepts an object where keys map to annotation IDs and values are objects containing the modified data. The example shows how to map a specific annotation ID ('7R') to a new value.

```APIDOC
annotations-map:
  Type: object
  Required: false
  Default: null
  Description: Allows to map values to annotation's storage, useful for edit annotation's data before rendering.
```

```vue
<script setup>
const annotationMap = ref({ '7R': { value: 'Modified value' } })
</script>

<VuePDF :pdf="pdf" annotation-layer :annotations-map="annotationMap" />
```

--------------------------------

### Handle Text Loaded Event with VuePDF

Source: https://tato30.github.io/vue-pdf/examples/loaded_events/text_loaded

This Vue.js example demonstrates how to listen for the `text-loaded` event when using the VuePDF component. It imports `VuePDF` and `usePDF` to load a PDF document from a URL. The `onLoaded` function is triggered when the text layer is loaded, logging the event payload to the console. Note that the payload can be very large and is best viewed in the browser's developer console.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
function onLoaded(value) {
  console.log(value)
}
</script>

<template>
  <div>
    <VuePDF :pdf="pdf" text-layer @text-loaded="onLoaded" />
  </div>
</template>
```

--------------------------------

### Handle Annotation Loaded Event in Vue.js with VuePDF

Source: https://tato30.github.io/vue-pdf/examples/loaded_events/annotation_loaded

This Vue.js example demonstrates how to use the `annotation-loaded` event provided by VuePDF. It imports `VuePDF` and `usePDF`, loads a sample PDF, and defines an `onLoaded` function that logs the event's payload to the console when annotations are loaded. The `VuePDF` component is configured with `annotation-layer` and the `@annotation-loaded` listener to trigger the `onLoaded` function.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf } = usePDF('/14.pdf')
function onLoaded(value) {
  console.log(value)
}
</script>

<template>
  <div>
    <VuePDF :pdf="pdf" annotation-layer @annotation-loaded="onLoaded" />
  </div>
</template>
```

--------------------------------

### Toggle Text Layer Visibility in VuePDF Component

Source: https://tato30.github.io/vue-pdf/examples/basic/text_layer

This Vue 3 Composition API example demonstrates how to dynamically control the visibility of the text layer in a VuePDF component. It imports `VuePDF` and `usePDF` from `@tato30/vue-pdf`, loads a sample PDF from a URL, and uses a button to toggle the `text-layer` prop, enabling or disabling text selection and interaction within the rendered PDF.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const text_layer = ref(false)
const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
</script>

<template>
  <div>
    <div>
      <button @click="text_layer = !text_layer">
        Change to {{ !text_layer }}
      </button>
    </div>
    <VuePDF :pdf="pdf" :text-layer="text_layer" />
  </div>
</template>
```

--------------------------------

### Filter PDF Annotations in Vue.js with VuePDF

Source: https://tato30.github.io/vue-pdf/examples/advanced/annotation_filter

This Vue.js component demonstrates how to filter annotations displayed in a PDF using the `@tato30/vue-pdf` library. It imports `VuePDF` and `usePDF`, loads a PDF from a specified path, defines a list of available annotation filter types, and allows the user to select a filter via a dropdown. When a new filter is selected, the `VuePDF` component is reloaded to apply the chosen filter, showcasing dynamic annotation filtering capabilities.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf } = usePDF('/14.pdf')

const filters = ref(['Widget', 'Widget.Tx', 'Widget.Btn', 'Widget.Ch'])
const selectedFilter = ref(['Widget'])
const vuePDFRef = ref(null)

function reloadPage() {
  vuePDFRef.value.reload()
}
</script>

<template>
  <div>
    <div>
      <select v-model="selectedFilter[0]" class="select-example" @change="reloadPage">
        <option v-for="flt in filters" :key="flt" :value="flt">
          {{ flt }}
        </option>
      </select>
    </div>
    <VuePDF ref="vuePDFRef" :pdf="pdf" annotation-layer :annotations-filter="selectedFilter" />
  </div>
</template>
```

--------------------------------

### Vue.js Component for Dynamic PDF Parent Fit

Source: https://tato30.github.io/vue-pdf/examples/advanced/fit_parent

This Vue.js component demonstrates how to dynamically adjust the width of a PDF viewer (`VuePDF`) to fit its parent container. It utilizes the `usePDF` composable to load a PDF document and `ref` for reactive state management. The example includes buttons to modify the parent container's width, showcasing the `fit-parent` prop on `VuePDF` and the `reload` method to re-render the PDF when the parent's dimensions change.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')

const vuePDFRef = ref(null)
const parentWidth = ref(300)

function fitParentWidth(pxs) {
  parentWidth.value = parentWidth.value + pxs
  vuePDFRef.value.reload()
}
</script>

<template>
  <div>
    <div>
      <button @click="fitParentWidth(-50)">
        Remove 50px
      </button>
      <span>Parent width: {{ parentWidth }}px</span>
      <button @click="fitParentWidth(50)">
        Add 50px
      </button>
    </div>
    <div :style="`width: ${parentWidth}px`">
      <VuePDF ref="vuePDFRef" :pdf="pdf" fit-parent />
    </div>
  </div>
</template>
```

--------------------------------

### Basic VuePDF Component Usage

Source: https://tato30.github.io/vue-pdf/guide/introduction

This snippet demonstrates the fundamental usage of VuePDF. It imports `VuePDF` and `usePDF` from the library, uses `usePDF` to load a sample PDF, and then renders it within a `<VuePDF>` component. This is the simplest way to display a PDF document.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf } = usePDF('sample.pdf')
</script>

<template>
  <VuePDF :pdf="pdf" />
</template>
```

--------------------------------

### Basic usePDF Composable Integration in Vue

Source: https://tato30.github.io/vue-pdf/guide/composables

Demonstrates the fundamental usage of the `usePDF` composable to load a PDF document and display it using the `VuePDF` component. It imports `VuePDF` and `usePDF` from `@tato30/vue-pdf` and initializes `pdf`, `pages`, and `info` from a static PDF source.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf, pages, info } = usePDF('sample.pdf')
</script>

<template>
  <VuePDF :pdf="pdf" />
</template>
```

--------------------------------

### Display All PDF Pages with VuePDF

Source: https://tato30.github.io/vue-pdf/examples/basic/all_pages

This Vue.js snippet illustrates how to load a PDF document from a URL and render every page using the VuePDF component. It utilizes the `usePDF` composable to fetch the PDF object and determine the total number of pages, then dynamically creates a `VuePDF` instance for each page.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf, pages } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
</script>

<template>
  <div v-for="page in pages" :key="page">
    <VuePDF :pdf="pdf" :page="page" />
  </div>
</template>
```

--------------------------------

### usePDF Composable Returned Properties API Documentation

Source: https://tato30.github.io/vue-pdf/guide/composables

API documentation for the properties returned by the `usePDF` composable. All returned values are `shallowRef` objects, ensuring efficient reactivity. This section details `pdf` (the document loading task), `pages` (the number of pages), `info` (document metadata), and utility functions like `getPDFDestination`, `print`, and `download`.

```APIDOC
usePDF Returned Properties:
  All values are shallowRef objects.

  pdf: PDFDocumentLoadingTask
    Document's loading task. See PDFDocumentLoadingTask for more details.

  pages: int
    Document's number of pages.

  info: object
    Document's information object.

  getPDFDestination: function
    Returns the page number referenced by 'dest' object used by internal-links or outline object.

  print: function
    Open the browser's print dialog with current PDF loaded.
    Parameters:
      dpi: number (default: 150) - Pages resolution.
      filename: string (default: 'filename') - Filename of the printed file.

  download: function
    Trigger a downloading action using an HTMLAnchorElement.
    Parameters:
      filename: string (default: 'filename') - Filename of the downloaded file.
```

--------------------------------

### PDF.js Document API Reference (from text)

Source: https://tato30.github.io/vue-pdf/guide/composables

Reference for key objects and methods mentioned in the `pdf.js` documentation, including `PDFDocumentProxy` and `PDFDocumentLoadingTask`.

```APIDOC
PDFDocumentProxy:
  - annotationStorage (property)
  - saveDocument() (method)
  - cleanup() (method)
  - getData() (method)

PDFDocumentLoadingTask (object)
```

--------------------------------

### Configure Vite for Top-Level Await Support

Source: https://tato30.github.io/vue-pdf/guide/introduction

This configuration snippet for `vite.config.js` resolves the 'Top-level await is not available' error by enabling support for top-level await in ESBuild optimization and build processes.

```json
optimizeDeps: {
  esbuildOptions: {
    supported: {
      'top-level-await': true,
    },
  },
},
esbuild: {
  supported: {
    'top-level-await': true,
  },
}
```

--------------------------------

### Configure Legacy PDF.js Worker for VuePDF

Source: https://tato30.github.io/vue-pdf/guide/introduction

This Vue.js script block shows how to set up the legacy worker for `pdfjs-dist` to ensure compatibility with older browser environments. It's crucial to set `PDFJS.GlobalWorkerOptions.workerSrc` to the legacy worker URL before `usePDF` is called, as the worker runs in a separate thread.

```vue
<script setup lang="ts">
import * as PDFJS from 'pdfjs-dist';
import LegacyWorker from 'pdfjs-dist/legacy/build/pdf.worker.min?url';
import { VuePDF, usePDF } from '@tato30/vue-pdf';

PDFJS.GlobalWorkerOptions.workerSrc = LegacyWorker

const { pdf } = usePDF(/** */)
</script>
```

--------------------------------

### Enable XFA Forms in VuePDF

Source: https://tato30.github.io/vue-pdf/guide/introduction

This snippet illustrates how to enable support for XFA (XML Forms Architecture) forms within VuePDF. It involves passing an object to `usePDF` with the PDF URL and setting `enableXfa` to `true`. This allows the component to correctly render and interact with XFA-based PDF forms.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF({
  url: '/xfa.pdf',
  enableXfa: true,
})
</script>

<template>
  <VuePDF :pdf="pdf" />
</template>
```

--------------------------------

### Creating a Custom Vue Composable for PDF Loading

Source: https://tato30.github.io/vue-pdf/guide/composables

Demonstrates how to manually load a PDF using the `pdfjs-dist` library within a Vue component. It shows how to obtain a `PDFDocumentLoadingTask` and pass it to the `VuePDF` component via a `ref` or `shallowRef`.

```vue
<script setup>
import { onMounted, ref } from 'vue'
import * as PDFJS from 'pdfjs-dist'

const pdf = ref()

function loadPDF() {
  const loadingTask = PDFJS.getDocument('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
  pdf.value = loadingTask
}

onMounted(() => {
  loadPDF()
})
</script>

<template>
  <div>
    <VuePDF :pdf="pdf" />
  </div>
</template>
```

--------------------------------

### Display and Cycle Through Multiple PDFs in Vue

Source: https://tato30.github.io/vue-pdf/examples/advanced/multiple_pdf

This Vue 3 component demonstrates how to dynamically load and display different PDF documents using the VuePDF library. It utilizes the `usePDF` composable to manage the PDF source and provides a button to cycle through a predefined list of PDF URLs. The component imports `VuePDF` for rendering and `usePDF` for PDF management from `@tato30/vue-pdf`.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import { ref } from 'vue'

const pdfSources = [
  '/14.pdf',
  '/36.pdf',
  '/41.pdf',
  '/45.pdf',
  'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
]
// Setting the first (or default) PDF
const pdfSource = ref(pdfSources[0])
const pdfSourceIdx = ref(0)

const { pdf } = usePDF(pdfSource)

function nextPdf() {
  pdfSourceIdx.value += 1
  if (pdfSourceIdx.value >= pdfSources.length)
    pdfSourceIdx.value = 0
  pdfSource.value = pdfSources[pdfSourceIdx.value]
}
</script>

<template>
  <div>
    <div>
      <button @click="nextPdf">
        Next PDF (Current index: {{ pdfSourceIdx }})
      </button>
    </div>
    <VuePDF :pdf="pdf" />
  </div>
</template>
```

--------------------------------

### Accessing PDF Document API with usePDF

Source: https://tato30.github.io/vue-pdf/guide/composables

Illustrates how to obtain the `PDFDocumentProxy` object from a PDF loaded via `usePDF` and interact with its methods such as `saveDocument`, `cleanup`, and `getData`.

```js
const { pdf } = usePDF('document.pdf')

function doSomething() {
  pdf.value.promise.then((doc) => {
    // doc.annotationsStorage
    // doc.saveDocument()
    // doc.cleanup()
    // doc.getData()
    // ...
  })
}
```

--------------------------------

### Render XFA PDF Forms in Vue.js with VuePDF

Source: https://tato30.github.io/vue-pdf/examples/basic/xfa_layer

This Vue.js code snippet demonstrates how to display a PDF document containing XFA forms using the VuePDF library. It imports `VuePDF` and `usePDF` from `@tato30/vue-pdf`, then initializes the PDF instance with a specified URL (`/xfa.pdf`) and explicitly enables XFA support via the `enableXfa: true` option. The `VuePDF` component is subsequently used in the template to render the loaded PDF document within a container.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF({
  url: '/xfa.pdf',
  enableXfa: true,
})
</script>

<template>
  <div class="container">
    <VuePDF :pdf="pdf" />
  </div>
</template>
```

--------------------------------

### Handle Highlight Event with VuePDF Component

Source: https://tato30.github.io/vue-pdf/examples/text_events/text_highlight

This Vue.js snippet demonstrates how to integrate VuePDF, load a PDF, define text to highlight, configure highlighting options (case-insensitivity, complete words), and capture the 'highlight' event payload. The event payload, which contains detailed information about the highlighted text, is logged to the console.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'
import { ref } from 'vue'

const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')

const highlightText = ref('Trace-based')
const highlightOptions = ref({
  completeWords: false,
  ignoreCase: true,
})

function onHighlight(value) {
  console.log(value)
}
</script>

<template>
  <div>
    <input v-model="highlightText">
    <VuePDF :pdf="pdf" text-layer :highlight-text="highlightText" :highlight-options="highlightOptions" @highlight="onHighlight" />
  </div>
</template>
```

--------------------------------

### VuePDF Component Prop: intent

Source: https://tato30.github.io/vue-pdf/guide/props

The `intent` prop is a `string`, optional, and defaults to `display`. It defines the rendering intent, which can be `display`, `print`, or `any`.

```APIDOC
intent:
  Type: string
  Required: false
  Default: display
  Description: Rendering intent, can be display, print, or any.
```

```vue
<VuePDF :pdf="pdf" intent="print" />
```

--------------------------------

### Reactive usePDF Composable with Ref Source in Vue

Source: https://tato30.github.io/vue-pdf/guide/composables

Illustrates how `usePDF` can be used reactively by passing a `ref` as the source. When the `currentPdf` ref changes, `pdf`, `pages`, and `info` values automatically update, enabling dynamic PDF loading based on reactive data.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'

// Changing currentPdf value will change pdf, pages and info values
const currentPdf = ref('sample.pdf')
const { pdf, pages, info } = usePDF(currentPdf)
</script>

<template>
  <VuePDF :pdf="pdf" />
</template>
```

--------------------------------

### Handle PDF Form Fields with VuePDF Annotation Event

Source: https://tato30.github.io/vue-pdf/examples/annotation_events/annotation_forms

This Vue.js component demonstrates how to render a PDF document and capture interactions with form fields using the `annotation` event. It imports `VuePDF` and `usePDF` from `@tato30/vue-pdf`, loads a specified PDF file ('/14.pdf'), and logs the value of any triggered annotation events to the console.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf } = usePDF('/14.pdf')
function onAnnotation(value) {
  console.log(value)
}
</script>

<template>
  <div>
    <VuePDF :pdf="pdf" annotation-layer @annotation="onAnnotation" />
  </div>
</template>
```

--------------------------------

### Display Single PDF Page with Navigation in Vue

Source: https://tato30.github.io/vue-pdf/examples/basic/one_page

This Vue.js snippet demonstrates how to render a single page of a PDF document using the VuePDF library. It includes controls for navigating between pages (previous/next) and displays the current page number out of the total. It utilizes the `usePDF` composable to load the PDF from a URL and the `VuePDF` component for rendering, binding the current page number to the component's `page` prop.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const page = ref(1)
const { pdf, pages } = usePDF('https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf')
</script>

<template>
  <div>
    <div>
      <button @click="page = page > 1 ? page - 1 : page">
        Prev
      </button>
      <span>{{ page }} / {{ pages }}</span>
      <button @click="page = page < pages ? page + 1 : page">
        Next
      </button>
    </div>
    <VuePDF :pdf="pdf" :page="page" />
  </div>
</template>
```

--------------------------------

### VuePDF Loading Slot Custom Content

Source: https://tato30.github.io/vue-pdf/guide/slots

This Vue.js template demonstrates how to utilize the 'loading' slot within the VuePDF component. It allows developers to display custom content, such as a 'Loading...' message, while the PDF page is in the process of rendering. The snippet assumes the 'VuePDF' component is imported and a 'pdf' prop is available.

```vue
<template>
  <VuePDF :pdf="pdf">
    <div>
      Loading...
    </div>
  </VuePDF>
</template>
```

--------------------------------

### VuePDF Component Prop: highlight-options

Source: https://tato30.github.io/vue-pdf/guide/props

The `highlight-options` prop, introduced in v1.9, is an `object`, optional, and defaults to `{ completeWords: false, ignoreCase: true }`. It provides settings for how to find the `highlight-text` on the page's text.

```APIDOC
highlight-options:
  Type: object
  Required: false
  Default:
    completeWords: false
    ignoreCase: true
  Description: Settings for how to find the highlight-text on page's text.
```

```vue
<VuePDF :pdf="pdf" text-layer highlight-text="javascript" :highlight-options="{
    completeWords: true,
    ignoreCase: false
  }"
/>
```

--------------------------------

### VuePDF Component Prop: image-resources-path

Source: https://tato30.github.io/vue-pdf/guide/props

The `image-resources-path` prop is a `string`, optional, and defaults to `null`. It specifies the path to image resources required for rendering certain graphics.

```APIDOC
image-resources-path:
  Type: string
  Required: false
  Default: null
  Description: Path to image resources needed to render some graphics when required.
```

```vue
<VuePDF :pdf="pdf" image-resources-path="https://unpkg.com/pdfjs-dist@latest/web/images/" />
```

--------------------------------

### Handle XFA Loaded Event in VuePDF Component

Source: https://tato30.github.io/vue-pdf/examples/loaded_events/xfa_loaded

This Vue.js code snippet demonstrates how to load a PDF document with XFA (XML Forms Architecture) enabled using the `usePDF` composable from `@tato30/vue-pdf`. It then renders the PDF using the `VuePDF` component and listens for the `xfa-loaded` event, which fires when the XFA content within the PDF is fully processed and ready.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF({
  url: '/xfa.pdf',
  enableXfa: true,
})
function onLoaded() {
  console.log("XFA loaded")
}
</script>

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

--------------------------------

### VuePDF Component Loaded Event Handler

Source: https://tato30.github.io/vue-pdf/examples/loaded_events/loaded

This Vue.js snippet demonstrates how to integrate the `VuePDF` component and capture the `@loaded` event. It uses the `usePDF` composable to fetch a remote PDF and defines an `onLoaded` function that logs the event's payload, providing details about the loaded PDF document.

```Vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
function onLoaded(value) {
  console.log(value)
}
</script>

<template>
  <div>
    <VuePDF :pdf="pdf" @loaded="onLoaded" />
  </div>
</template>
```

--------------------------------

### VuePDF Component Prop: pdf

Source: https://tato30.github.io/vue-pdf/guide/props

The `pdf` prop is of type `PDFDocumentLoadingTask` and is required. It represents the PDF document loading task obtained from `usePDF`.

```APIDOC
pdf:
  Type: PDFDocumentLoadingTask
  Required: true
  Description: The PDFDocumentLoadingTask obtained from usePDF.
```

```vue
<VuePDF :pdf="pdf" />
```

--------------------------------

### VuePDF Component Prop: width

Source: https://tato30.github.io/vue-pdf/guide/props

The `width` prop is a `number`, optional, and defaults to `null`. It scales the page using a specified width in pixels, replacing `scale` and having precedence over `height` in size calculations.

```APIDOC
width:
  Type: number
  Required: false
  Default: null
  Description: Scale the page using a width in px. This prop replace scale in size calculation and has more precedence than height.
```

```vue
<VuePDF :pdf="pdf" :width="500" />
```

--------------------------------

### VuePDF Component Prop: height

Source: https://tato30.github.io/vue-pdf/guide/props

The `height` prop is a `number`, optional, and defaults to `null`. It scales the page using a specified height in pixels, replacing `scale` in size calculations.

```APIDOC
height:
  Type: number
  Required: false
  Default: null
  Description: Scale the page using a height in px. This prop replace scale in size calculation.
```

```vue
<VuePDF :pdf="pdf" :height="500" />
```

--------------------------------

### VuePDF Component Prop: highlight-text

Source: https://tato30.github.io/vue-pdf/guide/props

The `highlight-text` prop, introduced in v1.9, is of type `string | string[]`, optional, and defaults to `null`. It highlights the specified text or array of texts on the page.

```APIDOC
highlight-text:
  Type: string | string[]
  Required: false
  Default: null
  Description: Highlight on the page the searched text or the searched array of text.
```

```vue
<VuePDF :pdf="pdf" text-layer highlight-text="javascript" />

<VuePDF :pdf="pdf" text-layer :highlight-text="['javascript', 'trace-based']" />
```
Tokens:
Raw