Skip to content

Latest commit

 

History

History
281 lines (202 loc) · 4.83 KB

props.md

File metadata and controls

281 lines (202 loc) · 4.83 KB
Raw

Props

pdf

Type: PDFDocumentLoadingTask
Required: true

The PDFDocumentLoadingTask obtained from usePDF.

<VuePDF :pdf="pdf" />

page

Type: int
Required: false
Default: 1

Page to render, this prop must be a page number starting at 1.

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

intent

Type: string
Required: false
Default: display

Rendering intent, can be display, print, or any.

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

scale

Type: int
Required: false
Default: 1

Page's scale.

<VuePDF :pdf="pdf" :scale="0.5" />

fit-parent

Type: boolean
Required: false
Default: false

Fit the page's width with the parent width. This prop replace scale in size calculation and has more precedence than width.

<VuePDF :pdf="pdf" fit-parent />

width

Type: number
Required: false
Default: null

Scale the page using a width in px. This prop replace scale in size calculation and has more precedence than height.

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

height

Type: number
Required: false
Default: null

Scale the page using a height in px. This prop replace scale in size calculation.

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

rotation

Type: int
Required: false
Default: Document's Default

Rotate the page in 90° multiples eg. (90, 180, 270)

<VuePDF :pdf="pdf" :rotation="90" />

text-layer

Type: boolean
Required: false
Default: false

Enables text selection.

<VuePDF :pdf="pdf" text-layer />

highlight-text

Type: string | string[]
Required: false
Default: null

Highlight on the page the searched text or the searched array of text.

<VuePDF :pdf="pdf" text-layer hightlight-text="javascript" />

<VuePDF :pdf="pdf" text-layer :hightlight-text="['javascript', 'trace-based']" />

highlight-options

Type: object
Required: false
Default:

{
  completeWords: false,
  ignoreCase: true
}

Settings for how to find the highlight-text on page's text.

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

annotation-layer

Type: boolean
Required: false
Default: false

Enables document annotations like links, popups, widgets, etc.

<VuePDF :pdf="pdf" annotation-layer />

watermark-text

Type: string
Required: false
Default: null

Prints a watermark pattern over the canvas.

<VuePDF :pdf="pdf" watermark-text="Sample" />

watermark-options

Type: object
Required: false
Default:

{
  columns: 4,
  rows: 4,
  rotation: 45,
  fontSize: 18,
  color: 'rgba(211, 210, 211, 0.4)',
}

Customize how watermark is printed over the canvas.

<script setup>
const watermarkOptions = ref({
  columns: 1,
  rows: 1,
  color: '#23FFFF',
  rotation: 45,
  fontSize: 20,
})
</script>

<VuePDF :pdf="pdf" watermark-text="Sample" :watermark-options="watermarkOptions" />

image-resources-path

Type: string
Required: false
Default: null

Path to image resources needed to render some graphics when required.

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

hide-forms

Type: boolean
Required: false
Default: false

Hide AcroForms from annotation-layer.

<VuePDF :pdf="pdf" annotation-layer hide-forms />

annotations-filter

Type: array
Required: false
Default: null

Allows to choose which annotations display on page, the following options are available:

  • Link
  • Text
  • Stamp
  • Popup
  • FreeText
  • Line
  • Square
  • Circle
  • PolyLine
  • Caret
  • Ink
  • Polygon
  • Highlight
  • Underline
  • Squiggly
  • StrikeOut
  • FileAttachment
  • Widget
    • Widget.Tx
    • Widget.Btn
    • Widget.Ch
    • Widget.Sig

NOTE: Widget shows all Widget subtypes like Widget.Tx, Widget.Btn, etc.

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

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

annotations-map

Type: object
Required: false
Default: null

Allows to map values to annotation's storage, useful for edit annotation's data before rendering.

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

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