PdfViewer

Renders a PDF document inline using pdfjs-dist. It automatically renders all pages of the document sequentially and includes a built-in "Print PDF" action button.

Basic Usage

Demo

Loading PDF...

<script setup>
import { PdfViewer } from 'praxis-vue-ui'
</script>

<template>
  <PdfViewer url="https://example.com/document.pdf" />
</template>

Props

Props

Prop	Type	Default	Description
urlrequired	string	—	The URL of the PDF document to render.
scale	number	1.5	The zoom scale applied to the PDF pages.
height	string	'600px'	The CSS height of the viewer container.
renderAllPages	boolean	true	If true, renders all pages sequentially. If false, renders only the initialPage.
initialPage	number	1	The specific page to render when renderAllPages is false.

Features

• Automatic Worker: Automatically configures the pdfjs-dist web worker.
• Full Document Rendering: Parses the document and renders all pages sequentially inside <canvas> elements.
• Scale: The zoom scale is currently hardcoded to 1.5x for optimal readability.
• Print Support: Includes a built-in "Print PDF" button that downloads the file to memory as a Blob and opens the native browser print dialog.

(Note: The component does not currently accept dynamic zoom or pagination props. It renders the entire document at once.)