@fiscozen/pdf-viewer
Vue 3 component for rendering PDF files with zoom, page navigation, and optional PDF/XML view mode toggle.
Installation
npm install @fiscozen/pdf-viewer
Usage
<script setup>
import { FzPdfViewer } from '@fiscozen/pdf-viewer'
</script>
<template>
<FzPdfViewer src="https://example.com/document.pdf" width="100%" />
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Required. URL of the PDF file. |
xmlSrc | string | — | URL of the XML file. When provided alongside toolbarVariant="advanced", enables the PDF/XML view mode toggle. In XML mode, the XML is rendered in an iframe and zoom/page controls are hidden. |
environment | "frontoffice" | "backoffice" | "frontoffice" | Environment variant for sizing. |
height | string | "768px" | Height of the viewer container. |
width | string | "512px" | Width of the viewer container. |
toolbarVariant | "basic" | "advanced" | "basic" | "basic" shows zoom and page navigation. "advanced" adds download button and, when xmlSrc is provided, a PDF/XML view mode toggle. |
toolbarPosition | "top" | "bottom" | "bottom" | Position of the toolbar relative to the PDF. When "top", the toolbar is only revealed on hover. |
initialPage | number | 1 | Starting page. |
initialScale | number | 1 | Starting zoom level (1 = 100%). |
minScale | number | 0.25 | Minimum zoom level. |
maxScale | number | 2 | Maximum zoom level. |
scaleStep | number | 0.25 | Zoom increment per step. |
selectable | boolean | false | When true, renders a text layer that allows users to select and copy text. |
rotatable | boolean | false | When true, shows a rotate button in the advanced toolbar. Only applies when toolbarVariant="advanced". |
containerClass | string | — | Custom CSS class for the outer container. |
pdfContainerClass | string | — | Custom CSS class for the PDF/content container. |
v-model
| Model | Type | Default | Description |
|---|---|---|---|
viewMode | "pdf" | "xml" | "pdf" | Current view mode. Only active when toolbarVariant="advanced" and xmlSrc is provided. |
Events
| Event | Payload | Description |
|---|---|---|
download | — | Emitted when the download button is clicked. The parent is responsible for handling the actual download (e.g. downloading PDF or XML depending on current viewMode). |
Examples
Basic toolbar
<FzPdfViewer
src="https://example.com/document.pdf"
width="100%"
/>
Advanced toolbar with download
<FzPdfViewer
src="https://example.com/document.pdf"
toolbarVariant="advanced"
width="100%"
@download="handleDownload"
/>
PDF/XML toggle
When xmlSrc is provided alongside toolbarVariant="advanced", the component shows a tab switcher to toggle between PDF view and XML view. In XML mode, the XML is rendered in an iframe; zoom and page controls are hidden while the download button remains visible.
<script setup>
import { ref } from 'vue'
import { FzPdfViewer } from '@fiscozen/pdf-viewer'
const viewMode = ref('pdf')
function handleDownload() {
const url = viewMode.value === 'pdf' ? pdfUrl : xmlUrl
// trigger download...
}
</script>
<template>
<FzPdfViewer
src="https://example.com/document.pdf"
xmlSrc="https://example.com/document.xml"
toolbarVariant="advanced"
v-model:viewMode="viewMode"
width="100%"
@download="handleDownload"
/>
</template>
Note: The
downloadevent does not automatically download anything. UseviewModeto determine whether to download the PDF or the XML.