Home
Other
PDF Document Embed Component For Vue

PDF Document Embed Component For Vue

hrynko First listed on March 20, 2024
Live Demo Download Source Code

Install & Download:

# Yarn
$ yarn add vue-pdf-embed
# NPM
$ npm i vue-pdf-embed

Description:

A Vue 3/2 component to embed PDF documents into your app.

How to use it:

1. Import and register the component.

import VuePdfEmbed from 'vue-pdf-embed'
// core styles
import 'vue-pdf-embed/dist/style/index.css'
// optional styles
import 'vue-pdf-embed/dist/style/annotationLayer.css'
import 'vue-pdf-embed/dist/style/textLayer.css'
// either URL, Base64, binary, or document proxy
const pdfSource = '/path/to/pdf/'

2. Embed a PDF in your app.

<vue-pdf-embed :source="pdfSource" />

3. Available props.

/**
 * Whether to enable an annotation layer.
 */
annotationLayer?: boolean
/**
 * Desired page height.
 */
height?: number
/**
 * Root element identifier (inherited by page containers with page number
 * postfixes).
 */
id?: string
/**
 * Path for annotation icons, including trailing slash.
 */
imageResourcesPath?: string
/**
 * Number of the page to display.
 */
page?: number
/**
 * Desired page rotation angle.
 */
rotation?: number
/**
 * Desired ratio of canvas size to document size.
 */
scale?: number
/**
 * Source of the document to display.
 */
source: Source
/**
 * Whether to enable a text layer.
 */
textLayer?: boolean
/**
 * Desired page width.
 */
width?: number

4. Events.

  • @loading-failed: failed to load the document
  • @loaded: finished loading the document
  • @password-requested: retry flag password is needed to display the document
  • @rendering-failed: failed to render the document
  • @rendered: finished rendering the document
  • @internal-link-clicked: internal link was clicked
  • @progress: tracking document loading progress

5. API methods.

  • download(filename): download document
  • print: print resolution (number) print document via browser interface

Preview:

PDF Document Embed Component For Vue

Changelog:

v2.0.3 (03/20/2024)

  • Bugfixes

v2.0.2 (01/22/2024)

  • Fix package installation lifecycle

v2.0.1 (01/21/2024)

  • Bugfixes

v2.0.0 (01/20/2024)

  • Switch to Vite and stop building for Vue 2
  • Introduce TypeScript
  • Introduce composable function for PDF load
  • Update pdf.js to 3.11.174
  • Remove fallback prop types
  • Export styles (essential, text layer and annotation layer separately) instead of injecting
  • Introduce the essential build (exposing GlobalWorkerOptions instead of internal worker loading)

v1.2.1 (09/28/2023)

  • Fix rendering in Vue 3

v1.1.6 (04/30/2023)

  • Bugfixes

v1.1.5 (11/08/2022)

  • Add scale prop
  • Update print method signature
  • Update canvas releasing

v1.1.4 (06/21/2022)

  • Update transpiler configuration to support ES5
  • Release canvases on unmount

v1.1.3 (06/20/2022)

  • Add filename argument to print method
  • Fix source sharing issue
  • Optimize canvas utilization in Safari
  • Add separate Vue 2 typing
  • Fix Vue 3 typing

v1.1.2 (05/26/2022)

  • Add rotation prop
  • Add loaded event
  • Fix issue with stale annotations and text layers when re-rendering
  • Make imageResourcesPath configurable
  • Fix crash on multiple simultaneous rendering calls
  • Add print method
  • Allow source reuse between component instances

v1.1.1 (03/30/2022)

  • Fix Safari support issue
  • Add a prepare script to build the library when installing from the repository
  • Update source prop to accept Uint8Array

v1.1.0 (02/28/2022)

  • Add page width and height props
  • Add text layer
  • Add annotation layer

v1.0.8 (02/09/2022)

  • Fix broken build

v1.0.7 (02/09/2022)

  • Add page specific IDs
  • Downgrade PDF.js to 2.9.359

v1.0.6 (01/17/2022)

  • Update PDF.js to 2.10.377 (support for digital signatures)

v1.0.5 (11/08/2021)

  • Rearrange dependencies
  • Optimize the build
  • Adjust typing for Vue 3

More Like This

Tags:

Add Comment