npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-pdf-embed-transparency

v1.1.8

Published

PDF embed component for Vue 2 and Vue 3

Downloads

570

Readme

📄 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

| Name | Type | Accepted values | Description | | ---------------------- | ---------------------------------------- | ------------------------------------------------ |----------------------------------------------------------------------------------------------| | disableAnnotationLayer | boolean | true or false | whether the annotation layer should be disabled | | transparentBackground | boolean | true or false | whether the pdf has a transparent background or not. Can improve performance if set to false | | disableTextLayer | boolean | true or false | whether the text layer should be disabled | | height | number string | natural numbers | desired page height in pixels (ignored if the width property is specified) | | imageResourcesPath | string | URL or path with trailing slash | path for icons used in the annotation layer | | page | number | 1 to the last page number | number of the page to display (displays all pages if not specified) | | rotation | number string | 0, 90, 180 or 270 (multiples of 90) | desired page rotation angle in degrees | | scale | number | rational numbers | desired ratio of canvas size to document size | | source | string object Uint8Array | document URL or typed array pre-filled with data | source of the document to display | | width | number string | natural numbers | desired page width in pixels |

Events

| Name | Value | Description | | --------------------- | ----------------------------- | ------------------------------------------ | | internal-link-clicked | destination page number | internal link was clicked | | loading-failed | error object | failed to load document | | loaded | PDF document proxy | finished loading the document | | password-requested | callback function, retry flag | password is needed to display the document | | rendering-failed | error object | failed to render document | | rendered | – | finished rendering the document | | printing-failed | error object | failed to print document | | progress | progress params object | tracking document loading progress |

Public Methods

| Name | Arguments | Description | | ------ | ---------------------------------------------------------------------------- | ------------------------------------ | | render | – | manually (re)render document | | print | print resolution (number), filename (string), all pages flag (boolean) | 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)

Advanced Usage Demo (StackBlitz)

License

MIT License. Please see LICENSE file for more information.