Socket
Socket
Sign inDemoInstall

vue-pdf-embed

Package Overview
Dependencies
21
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-pdf-embed

PDF embed component for Vue 2 and Vue 3


Version published
Maintainers
1
Weekly downloads
35,171
decreased by-9.26%

Weekly downloads

Readme

Source

📄 vue-pdf-embed

PDF embed component for Vue 2 and Vue 3

Awesome npm npm GitHub Repo stars npm

Features

  • Controlled rendering of PDF documents in Vue apps
  • Handles password protected documents
  • Includes text layer (searchable and selectable documents)
  • Includes annotation layer (annotations and links)
  • No peer dependencies or additional configuration required
  • Can be used directly in the browser (see Examples)

Compatibility

This package is compatible with both Vue 2 and Vue 3, but consists of two separate builds. The default exported build is for Vue 3, for Vue 2 import dist/vue2-pdf-embed.js (see Usage).

Installation

Depending on the environment, the package can be installed in one of the following ways:

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

Usage

<template>
  <div>
    <h1>File</h1>
    <vue-pdf-embed :source="source1" />

    <h1>Base64</h1>
    <vue-pdf-embed :source="source2" />
  </div>
</template>

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

// OR THE FOLLOWING IMPORT FOR VUE 2
// import VuePdfEmbed from 'vue-pdf-embed/dist/vue2-pdf-embed'

export default {
  components: {
    VuePdfEmbed,
  },
  data() {
    return {
      source1: '<PDF_URL>',
      source2: 'data:application/pdf;base64,<BASE64_ENCODED_PDF>',
    }
  }
}
</script>

Props

NameTypeAccepted valuesDescription
disableAnnotationLayerbooleantrue or falsewhether the annotation layer should be disabled
disableTextLayerbooleantrue or falsewhether the text layer should be disabled
heightnumber
string
natural numbersdesired page height in pixels (ignored if the width property is specified)
imageResourcesPathstringURL or path with trailing slashpath for icons used in the annotation layer
pagenumber1 to the last page numbernumber of the page to display (displays all pages if not specified)
rotationnumber
string
0, 90, 180 or 270 (multiples of 90)desired page rotation angle in degrees
sourcestring
object
Uint8Array
document URL or typed array pre-filled with datasource of the document to display
widthnumber
string
natural numbersdesired page width in pixels

Events

NameValueDescription
internal-link-clickeddestination page numberinternal link was clicked
loading-failederror objectfailed to load document
loadedPDF document proxyfinished loading the document
password-requestedcallback function, retry flagpassword is needed to display the document
rendering-failederror objectfailed to render document
renderedfinished rendering the document
printing-failederror objectfailed to print document

Public Methods

NameArgumentsDescription
rendermanually (re)render document
printprint resolution (number), filename (string)print document via browser interface

Static Methods

Besides the component itself, the module also includes a getDocument function for manual loading of PDF documents, which can then be used as the source prop of the component. In most cases it is sufficient to specify the source prop with a URL or typed array, while the result of the getDocument function can be used in special cases, such as sharing the source between multiple component instances. This is an advanced topic, so it is recommended to check the source code of the component before using this function.

Examples

Basic Usage Demo (JSFiddle)

Advanced Usage Demo (JSFiddle)

License

MIT License. Please see LICENSE file for more information.

Keywords

FAQs

Last updated on 21 Jun 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc