PDF Elements

A Vue 3 component for rendering PDFs with draggable and resizable element overlays.

Demo · Examples

Development

• npm run dev - Run the demo with Vite
• npm run build - Build the library (ESM + types)
• npm run build:demo - Build the demo to dist-demo

API

Props

Prop	Type	Default	Description
width	String	'100%'	Container width
height	String	'100%'	Container height
initFiles	Array	[]	PDF files to load
initFileNames	Array	[]	Names for the PDF files
initialScale	Number	1	Initial zoom scale
showPageFooter	Boolean	true	Show page footer with document name and page number
hideSelectionUI	Boolean	false	Hide selection handles and actions UI
showSelectionHandles	Boolean	true	Show resize/move handles on selected elements
showElementActions	Boolean	true	Show action buttons on selected elements
readOnly	Boolean	false	Disable drag, resize, and actions for elements
ignoreClickOutsideSelectors	Array	[]	CSS selectors that keep the selection active when clicking outside the element
pageCountFormat	String	'{currentPage} of {totalPages}'	Format string for page counter
autoFitZoom	Boolean	false	Automatically adjust zoom to fit viewport on window resize
pdfjsOptions	Object	{}	Options passed to PDF.js getDocument (advanced)

PDF.js options

pdfjsOptions is forwarded to PDF.js getDocument(...) and can be used to tune performance.

Example:

<PDFElements
	:pdfjs-options="{
		disableFontFace: true,
		disableRange: true,
		disableStream: true,
	}"
/>

Events

• pdf-elements:end-init - Emitted when PDF is loaded
• pdf-elements:adding-ended - Emitted when interactive placement ends. Payload: { reason: 'placed', object, docIndex, pageIndex } on success or { reason: 'cancelled' } when the placement is cancelled.

Exposed methods

• startAddingElement(templateObject) - Starts interactive placement mode.
• cancelAdding() - Cancels the current placement session and emits pdf-elements:adding-ended with { reason: 'cancelled' } when a session was active.

Slots

• element-{type} - Custom element rendering (e.g., element-signature)
• custom - Fallback for elements without specific type
• actions - Custom action buttons

actions slot props

The actions slot receives:

• object
• onDelete
• onDuplicate
• toolbarClass (pdf-elements-actions-toolbar)
• actionClass (pdf-elements-action-btn)
• actionAttrs ({ 'data-pdf-elements-action': 'true' })

Use these hooks to style third-party button components consistently (for example, Nextcloud NcButton) without relying on internal scoped selectors.

Example:

<template #actions="slotProps">
	<NcButton
		:class="slotProps.actionClass"
		v-bind="slotProps.actionAttrs"
		type="button"
		variant="tertiary"
		@click.stop="slotProps.onDuplicate"
	>
		Duplicate
	</NcButton>
</template>

Theme variables

Action toolbar and action buttons can be themed via CSS variables and follow host theme tokens by default.

Variable	Description
--pdf-elements-toolbar-gap	Toolbar button gap
--pdf-elements-toolbar-padding	Toolbar padding
--pdf-elements-toolbar-background	Toolbar background color
--pdf-elements-toolbar-color	Toolbar text/icon color
--pdf-elements-toolbar-border-color	Toolbar border color
--pdf-elements-toolbar-border-radius	Toolbar border radius
--pdf-elements-toolbar-shadow	Toolbar shadow
--pdf-elements-action-btn-border	Action button border
--pdf-elements-action-btn-background	Action button background
--pdf-elements-action-btn-color	Action button text/icon color
--pdf-elements-action-btn-padding	Action button padding
--pdf-elements-action-btn-radius	Action button border radius
--pdf-elements-action-btn-min-height	Action button min height
--pdf-elements-action-btn-min-width	Action button min width
--pdf-elements-action-btn-shadow	Action button shadow
--pdf-elements-action-btn-hover-background	Action button hover background