PxDocumentViewer

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 { PxDocumentViewer } from 'praxis-vue-ui'
</script>

<template>
  <PxDocumentViewer 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.
• Configurable rendering: Use renderAllPages to render every page sequentially, or set it to false and pair it with initialPage to render a single page. scale controls the zoom level (default 1.5).
• 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.