Render Plugin

The Render Plugin is the visual heart of the PDF viewer. It’s responsible for taking the PDF data from the core engine and “painting” it onto the screen for the user to see. Its primary feature is the fundamental <RenderLayer /> component.

Installation

The plugin is available as a separate NPM package and is essential for any visual viewer.

npm install @embedpdf/plugin-render

pnpm add @embedpdf/plugin-render

yarn add @embedpdf/plugin-render

bun add @embedpdf/plugin-render

Registration

Import RenderPluginPackage and add it to the plugins array. This plugin has no configuration options.

import { createPluginRegistration } from '@embedpdf/core'
// ... other imports
import { RenderPluginPackage } from '@embedpdf/plugin-render/vue'
 
const plugins = [
  // ... other essential plugins
  createPluginRegistration(LoaderPluginPackage, { /* ... */ }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
 
  // Register the render plugin
  createPluginRegistration(RenderPluginPackage),
]

Usage

The plugin can be used in two ways: the simple <RenderLayer /> component for displaying pages within the viewer, and the useRenderCapability composable for more advanced, on-demand rendering tasks.

Primary Usage: The <RenderLayer /> Component

This is the most common and straightforward way to render a PDF page. You should place the <RenderLayer /> component inside the default scoped slot of your <Scroller />. It will automatically render the correct page at the correct size and resolution as the user scrolls.

<template>
  <Scroller>
    <template #default="{ page }">
      <div :style="{ width: `${page.width}px`, height: `${page.height}px`, position: 'relative' }">
        <RenderLayer :page-index="page.pageIndex" :scale="page.scale" />
      </div>
    </template>
  </Scroller>
</template>

Advanced Usage: On-Demand Rendering

For custom features that require rendering a page outside the main viewer—such as exporting a page as a high-resolution image—you can use the useRenderCapability composable. This gives you direct access to the plugin’s rendering functions.

<script setup lang="ts">
import { ref } from 'vue';
import { useRenderCapability } from '@embedpdf/plugin-render/vue';
 
const { provides: render } = useRenderCapability();
const isExporting = ref(false);
 
const exportPage = () => {
  if (!render.value) return;
  isExporting.value = true;
  const task = render.value.renderPage({ pageIndex: 0, options: { scaleFactor: 3.0 } });
  task.wait(blob => {
    // ... trigger download from the blob ...
    isExporting.value = false;
  });
};
</script>
 
<template>
  <button @click="exportPage" :disabled="isExporting">
    {{ isExporting ? '...' : 'Export Page' }}
  </button>
</template>

Live Example

This example shows a standard PDF viewer, but with a toolbar button that uses the useRenderCapability composable to export the first page as a high-resolution PNG file.

API Reference

Component: <RenderLayer />

The component that renders a single PDF page as an image.

Composable: useRenderCapability()

Connects your component to the render plugin’s low-level functions.

Returns

RenderCapability Methods

PdfRenderPageOptions