Components API
vue-pdf implements custom Component types that allow you to structure your PDF document.
<Document>
This component represents the PDF document itself. It must be the root of your tree element structure, and under no circumstances should it be used as child of another vue-pdf component. In addition, it should only have children of type <Page />.
- Props
ts
type PageMode =
| 'useNone'
| 'useOutlines'
| 'useThumbs'
| 'fullScreen'
| 'useOC'
| 'useAttachments'
type PageLayout =
| 'singlePage'
| 'oneColumn'
| 'twoColumnLeft'
| 'twoColumnRight'
| 'twoPageLeft'
| 'twoPageRight'
interface DocumentProps {
/**
* Sets title info on the document's metadata
*/
title?: string
/**
* Sets author info on the document's metadata
*/
author?: string
/**
* Sets subject info on the document's metadata
*/
subject?: string
/**
* Sets keywords associated info on the document's metadata
*/
keywords?: string
/**
* Sets creator info on the document's metadata
* @default 'vue-pdf'
*/
creator?: string
/**
* Sets producer info on the document's metadata
* @default 'vue-pdf'
*/
producer?: string
/**
* Sets PDF version for generated document
* @default '1.3'
*/
pdfVersion?: string
/**
* Sets PDF default language
*/
language?: string
/**
* Specifying how the document should be displayed when opened
* @default 'useNone'
*/
pageMode?: PageMode
/**
* This controls how (some) PDF viewers choose to show pages
* @default 'singlePage'
*/
pageLayout?: PageLayout
}<Page>
Represents single page inside the PDF documents, or a subset of them if using the wrapping feature. A <Document /> can contain as many pages as you want, but ensures not rendering a page inside any component besides Document.
- Props
ts
interface ExpandedBookmark {
title: string
top?: number
left?: number
zoom?: number
fit?: true | false
expanded?: true | false
}
type Bookmark = string | ExpandedBookmark
interface PageProps {
/**
* Defines page size. If String, must be one of the available page sizes. Height is optional, if omitted it will behave as "auto"
* @default 'A4'
*/
size?: string | string[] | number | object
/**
* Defines page orientation. Valid values: "portrait" or "landscape"
* @default 'portrait'
*/
orientation?: 'portrait' | 'landscape'
/**
* Enables page wrapping for this page
* @default true
*/
wrap?: boolean
/**
* Defines page styles
*/
style?: Style | Style[]
/**
* Enables debug mode on page bounding box
* @default false
*/
debug?: boolean
/**
* Enables setting a custom DPI for page contents
* @default 72
*/
dpi?: number
/**
* Destination ID to be linked to
*/
id?: string
/**
* Attach bookmark to element
*/
bookmark?: string | Bookmark
}<View>
The most fundamental component for building a UI and is designed to be nested inside other views and can have 0 to many children.
- Props
ts
interface ViewProps {
/**
* Enable/disable page wrapping for element
*/
wrap?: boolean
/**
* Defines view styles
*/
style?: Style | Style[]
/**
* Enables debug mode on view bounding box
*/
debug?: boolean
/**
* Render component in all wrapped pages
*/
fixed?: boolean
/**
* Destination ID to be linked to
*/
id?: string
/**
* Attach bookmark to element
*/
bookmark?: string | Bookmark
/**
*
* Render dynamic text based on the context the element is rendered
*/
render?: (args: {
pageNumber: number
subPageNumber: string
}) => string
}<Image>
A Vue component for displaying network or local (Node only) JPG or PNG images, as well as base64 encoded image strings.
- Props
ts
type HTTPMethod = 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
type SourceURL = string
type SourceBuffer = Buffer
type SourceBlob = Blob
type SourceDataBuffer = { data: Buffer; format: 'png' | 'jpg' }
type SourceURLObject = {
uri: string
method?: HTTPMethod
body?: any
headers?: any
credentials?: 'omit' | 'same-origin' | 'include'
}
type Source =
| SourceURL
| SourceBuffer
| SourceBlob
| SourceDataBuffer
| SourceURLObject
| undefined
type SourceFactory = () => Source
type SourceAsync = Promise<Source>
type SourceAsyncFactory = () => Promise<Source>
export type SourceObject =
| Source
| SourceFactory
| SourceAsync
| SourceAsyncFactory
interface ImageProps {
/**
* Source of the image.
* todo: add link
*/
src?: Source
/**
* Alias of src.
* todo: add @see link
*/
source?: Source
/**
* Defines view styles
*/
style?: Style | Style[]
/**
* Enables debug mode on view bounding box
* @default false
*/
debug?: boolean
/**
* Renders component in all wrapped pages
* @default false
*/
fixed?: boolean
/**
* Enables image caching between consecutive renders
* @default true
*/
cache?: boolean
/**
* Attach bookmark to element
*/
bookmark?: string | Bookmark
}<Text>
A Vue component for displaying text. Text supports nesting of other Text or Link components to create inline styling.
- Props
ts
interface TextProps {
/**
* Enables/disables page wrapping for element
* @default true
*/
wrap?: boolean
/**
* Defines view styles
*/
style?: Style | Style[]
/**
* Enables debug mode on view bounding box
* @default false
*/
debug?: boolean
/**
* Renders component in all wrapped pages
* @default false
*/
fixed?: boolean
/**
* Specify hyphenation callback at a text level
*/
hyphenationCallback?: (word: string) => string[]
/**
* Destination ID to be linked to
*/
id?: string
/**
* Attach bookmark to element
*/
bookmark?: string | Bookmark
/**
*
* Render dynamic text based on the context the element is rendered
*/
render?: (args: {
pageNumber: number
totalPages: number
subPageNumber: string
subPageTotalPages: number
}) => string
}<Link>
A Vue component for displaying an hyperlink. Link’s can be nested inside a Text component, or being inside any other valid primitive.
- Props
ts
interface LinkProps {
/**
* Valid URL or destination ID. ID must be prefixed with `#`
*/
src?: string
/**
* Enable/disable page wrapping for element
* @default true
*/
wrap?: boolean
/**
* Defines view styles
*/
style?: Style | Style[]
/**
* Enables debug mode on view bounding box
* @default false
*/
debug?: boolean
/**
* Renders component in all wrapped pages
* @default false
*/
fixed?: boolean
/**
* Attach bookmark to element
*/
bookmark?: string | Bookmark
}<Note>
A Vue component for displaying a note annotation inside the document.
- Props
ts
interface NoteProps {
/**
* Defines view styles
*/
style?: Style | Style[]
/**
* Renders component in all wrapped pages
* @default false
*/
fixed?: boolean
}<Canvas>
A Vue component for freely drawing any content on the page.
- Props
ts
interface CanvasProps {
/**
* Defines view styles
*/
style?: Style | Style[]
/**
* Painter function
*/
paint?: (
painter?: any,
availableWidth?: number,
availableHeight?: number,
) => null
/**
* Enables debug mode on view bounding box
* @default false
*/
debug?: boolean
/**
* Renders component in all wrapped pages
* @default false
*/
fixed?: boolean
/**
* Attach bookmark to element
*/
bookmark?: string | Bookmark
}SVG
<Svg>
- Props
ts
interface SvgProps {
/**
* The displayed width of the rectangular viewport
*/
width?: string | number
/**
* The displayed height of the rectangular viewport
*/
height?: string | number
/**
* The SVG viewport coordinates for the current SVG fragment
*/
viewBox?: string
/**
* How the svg fragment must be deformed if it is displayed with a different aspect ratio
*/
preserveAspectRatio?: string
/**
* Defines SVG styles
*/
style?: Style | Style[]
}<SvgText>
- Props
ts
interface SvgTextProps {
/**
* The x coordinate of the starting point of the text baseline.
*/
x?: string | number
/**
* The y coordinate of the starting point of the text baseline.
*/
y?: string | number
}<Tspan>
The SVG <Tspan /> element defines a subtext within a <Text /> element or another <Tspan /> element. It allows for adjustment of the style and/or position of that subtext as needed.
- Props
ts
interface TspanProps {
/**
* The x coordinate of the starting point of the text baseline.
*/
x?: string | number
/**
* The y coordinate of the starting point of the text baseline.
*/
y?: string | number
}<Path>
- Props
ts
interface PathProps extends PresentationAttributes {
style?: PresentationAttributes
d?: string
}
interface PresentationAttributes {
/**
* Provides a potential indirect value for the fill or stroke attributes.
*/
color?: string
/**
* Defines the baseline used to align the box’s text and inline-level contents.
* @default auto
*/
dominantBaseline?:
| 'auto'
| 'middle'
| 'central'
| 'hanging'
| 'mathematical'
| 'text-after-edge'
| 'text-before-edge'
/**
* It defines the color of the inside of the graphical element it applies to.
*/
fill?: string
/**
* It specifies the opacity of the color or the content the current object is filled with.
* @default 1
*/
fillOpacity?: string | number
/**
* It indicates how to determine what side of a path is inside a shape.
* @default nonzero
*/
fillRule?: 'nonzero' | 'evenodd'
/**
* It specifies the transparency of an object or a group of objects.
* @default 1
*/
opacity?: string | number
/**
* Defines the color used to paint the outline of the shape.
*/
stroke?: string
/**
* Defines the width of the stroke to be applied to the shape.
* @default 1
*/
strokeWidth?: string | number
/**
* Defines the opacity of the stroke of a shape.
* @default 1
*/
strokeOpacity?: string | number
/**
* Defines the shape to be used at the end of open subpaths when they are stroked.
* @default butt
*/
strokeLinecap?: 'butt' | 'round' | 'square'
/**
* Defines the shape to be used at the corners of paths when they are stroked.
* @default miter
*/
strokeLinejoin?: 'butt' | 'round' | 'square' | 'miter' | 'bevel'
/**
* Defines the pattern of dashes and gaps used to paint the outline of the shape.
*/
strokeDasharray?: string
/**
* Defines a list of transform definitions that are applied to an element and its children.
*/
transform?: string
/**
* Defines the horizontal alignment of a string of text.
*/
textAnchor?: 'start' | 'middle' | 'end'
/**
* Lets you control the visibility of graphical elements.
* @default visible
*/
visibility?: 'visible' | 'hidden' | 'collapse'
}<Rect>
- Props
ts
interface RectProps {
/**
* The x coordinate of the rect.
*/
x?: string | number
/**
* The y coordinate of the rect.
*/
y?: string | number
/**
* The width of the rect.
*/
width?: string | number
/**
* The height of the rect.
*/
height?: string | number
/**
* The horizontal corner radius of the rect.
*/
rx?: string | number
/**
* The vertical corner radius of the rect.
*/
ry?: string | number
}<Circle>
- Props
ts
interface CircleProps {
/**
* The x-axis coordinate of the center of the circle.
*/
cx?: string | number
/**
* The y-axis coordinate of the center of the circle.
*/
cy?: string | number
/**
* The radius of the circle.
*/
r?: string | number
}<Ellipse>
- Props
ts
interface EllipseProps {
/**
* The x position of the ellipse.
*/
cx?: string | number
/**
* The y position of the ellipse.
*/
cy?: string | number
/**
* The radius of the ellipse on the x axis.
*/
rx?: string | number
/**
* The radius of the ellipse on the y axis.
*/
ry?: string | number
}<Line>
- Props
ts
interface LineProps {
/**
* Defines the x-axis coordinate of the line starting point.
*/
x1?: string | number
/**
* Defines the x-axis coordinate of the line ending point.
*/
x2?: string | number
/**
* Defines the y-axis coordinate of the line starting point.
*/
y1?: string | number
/**
* Defines the y-axis coordinate of the line ending point.
*/
y2?: string | number
}<Polyline>
- Props
ts
interface PolylineProps {
/**
* Defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline.
*/
points?: string
}<Polygon>
- Props
ts
interface PolygonProps {
/**
* Defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon.
*/
points?: string
}<Stop>
- Props
ts
interface StopProps {
/**
* Defines where the gradient stop is placed along the gradient vector.
*/
offset?: string | number
/**
* Defines the color of the gradient stop.
*/
stopColor?: string
/**
* Defines the opacity of the gradient stop.
* @default 1
*/
stopOpacity?: string | number
}<Defs>
No props
<G>
- Props
ts
interface GProps extends PresentationAttributes {}<LinearGradient>
- Props
ts
interface LinearGradientProps {
/**
* Defines the x coordinate of the starting point of the vector gradient.
*/
x1?: string | number
/**
* Defines the x coordinate of the ending point of the vector gradient.
*/
x2?: string | number
/**
* Defines the y coordinate of the starting point of the vector gradient.
*/
y1?: string | number
/**
* Defines the y coordinate of the ending point of the vector gradient.
*/
y2?: string | number
xlinkHref?: string
gradientTransform?: string
gradientUnits?: 'userSpaceOnUse' | 'objectBoundingBox'
}<RadialGradient>
- Props
ts
interface RadialGradientProps {
/**
* Defines the x coordinate of the end circle of the radial gradient.
*/
cx?: string | number
/**
* Defines the y coordinate of the end circle of the radial gradient.
*/
cy?: string | number
/**
* Defines the radius of the start circle of the radial gradient.
*/
fr?: string | number
/**
* Defines the x coordinate of the start circle of the radial gradient.
*/
fx?: string | number
/**
* Defines the y coordinate of the start circle of the radial gradient.
*/
fy?: string | number
xlinkHref?: string
gradientTransform?: string
gradientUnits?: 'userSpaceOnUse' | 'objectBoundingBox'
}