vue-pdf-embed: Display PDF Documents in Vue Apps

Overview

vue-pdf-embed is a PDF viewer component for Vue applications. It handles rendering a document within the app and provides optional text and annotation layers, so users can select or search text and interact with links and annotations.

It is a fit for teams building document-centric interfaces that need control over which pages appear, how they are sized, or how users download and print files. The current package targets Vue 3; Vue 2 projects can use the separate v1 release.

Key Features

• Render a PDF from a URL, Base64 data, binary data, or a PDF document proxy.
• Display all pages or select specific pages, and configure page width, height, scale, and rotation.
• Enable selectable text and annotation layers, including links and interactive form fields.
• Support password-protected documents and expose loading progress and error events.
• Provide composables for loading documents and searching text matches.
• Offer download and browser-based print methods, plus slots for content before or after each page.

Use Cases

• Add an embedded document viewer to a Vue product or customer portal without navigating away from the application.
• Build a searchable document interface where users need selectable text and highlighted matches.
• Display a selected page or set of pages in a document review workflow.
• Provide download and print controls alongside invoices, reports, manuals, or other PDF content.

Getting Started

Install the package:

npm install vue-pdf-embed

See the repository README for usage, configuration, and examples.

Considerations

• The current package is for Vue 3. Vue 2 support is available through vue-pdf-embed@1 and its v1 documentation.
• This is a client-side library that relies on browser APIs, so it cannot be server-rendered. Applications using SSR need a client-only boundary and may also need to lazy-load the component.
• The PDF.js worker is bundled as a blob URL by default. Content security policies that block blob workers require manual worker configuration.
• Some documents need additional PDF.js resources, such as CMaps for non-Latin characters or WebAssembly decoders for JPEG 2000 and JBIG2 images.