vue-pdf-embed: A Robust PDF Embed Component for Vue 2 and Vue 3

Introduction

vue-pdf-embed is a versatile PDF embed component designed for Vue.js applications. It allows developers to easily display PDF documents directly within their Vue 2 and Vue 3 projects, providing a seamless user experience. This component stands out for its robust feature set, including controlled rendering of PDF documents, handling of password-protected files, and support for interactive text and annotation layers, making documents searchable and selectable. Built with TypeScript, vue-pdf-embed offers a reliable and type-safe solution for integrating PDF viewing capabilities.

Installation

Getting started with vue-pdf-embed is straightforward. You can install the package using npm or yarn, or include it directly via a script tag in your HTML.

npm install vue-pdf-embed

yarn add vue-pdf-embed

For direct browser usage, include the script:

<script src="https://unpkg.com/vue-pdf-embed"></script>

Examples

Integrating vue-pdf-embed into your Vue application is simple. Here is a basic usage example:

<script setup>
import VuePdfEmbed from 'vue-pdf-embed'

// Optional styles
import 'vue-pdf-embed/dist/styles/annotationLayer.css'
import 'vue-pdf-embed/dist/styles/textLayer.css'

// Either URL, Base64, binary, or document proxy
const pdfSource = '<PDF_URL>'
</script>

<template>
  <VuePdfEmbed annotation-layer text-layer :source="pdfSource" />
</template>

For more advanced scenarios and live demonstrations, explore the official JSFiddle examples:

• Basic Usage Demo
• Advanced Usage Demo
• Lazy Loading Demo

Why Use vue-pdf-embed?

vue-pdf-embed simplifies the complex task of embedding PDF documents into Vue applications. Its key advantages include:

• Comprehensive Features: It supports essential functionalities like text selection, annotations, and password protection right out of the box, enhancing user interaction with PDF content.
• Ease of Use: With no complex peer dependencies or additional configuration required, setup is quick and hassle-free.
• Vue 2 and Vue 3 Compatibility: The component is designed to work seamlessly across both major versions of Vue, ensuring broad applicability.
• Controlled Rendering: Developers have fine-grained control over document rendering, including specific pages, rotation, and scaling.
• Public Methods: It provides convenient public methods for downloading and printing documents directly from the component instance.

Links

• GitHub Repository: hrynko/vue-pdf-embed
• npm Package: vue-pdf-embed