Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vue-pdf-embed
Advanced tools
Readme
PDF embed component for Vue 3 (see Compatibility for Vue 2 support)
This package is only compatible with Vue 3. For Vue 2 support, install vue-pdf-embed@1
and refer to the v1 docs.
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>
<script setup>
import VuePdfEmbed from 'vue-pdf-embed'
// essential 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 = '<PDF_URL>'
</script>
<template>
<VuePdfEmbed annotation-layer text-layer :source="pdfSource" />
</template>
Name | Type | Accepted values | Description |
---|---|---|---|
annotationLayer | boolean | true or false | whether the annotation layer should be enabled |
height | number | 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 (displaying all pages if not specified) |
rotation | number | 0 , 90 , 180 , 270 (multiples of 90 ) | desired page rotation angle in degrees |
scale | number | rational numbers | desired page viewport scale |
source | string object | document URL or Base64 or typed array or document proxy | source of the document to display |
textLayer | boolean | true or false | whether the text layer should be enabled |
width | number | natural numbers | desired page width in pixels |
Name | Value | Description |
---|---|---|
internal-link-clicked | destination page number | internal link was clicked |
loaded | PDF document proxy | finished loading the document |
loading-failed | error object | failed to load document |
password-requested | object with callback function and isWrongPassword flag | password is needed to display the document |
progress | object with number of loaded pages along with total number of pages | tracking document loading progress |
rendered | – | finished rendering the document |
rendering-failed | error object | failed to render document |
Name | Props | Description |
---|---|---|
after-page | page (page number) | content to be added after each page |
before-page | page (page number) | content to be added before each page |
Name | Arguments | Description |
---|---|---|
download | filename (string ) | download document |
print resolution (number ), filename (string ), all pages flag (boolean ) | print document via browser interface |
Note: Public methods can be accessed through a template ref.
This is a client-side library, so it is important to keep this in mind when working with SSR (server-side rendering) frameworks such as Nuxt. Depending on the framework used, you may need to properly configure the library import or use a wrapper.
The web worker used to handle PDF documents is loaded by default. However, this may not be acceptable due to bundler restrictions or CSP (Content Security Policy). In such cases it is recommended to use the essential build (index.essential.mjs
) and set up the worker manually using the exposed GlobalWorkerOptions
.
import { GlobalWorkerOptions } from 'vue-pdf-embed/dist/index.essential.mjs'
import PdfWorker from 'pdfjs-dist/build/pdf.worker.js?url'
GlobalWorkerOptions.workerSrc = PdfWorker
Typically, document loading is internally handled within the component. However, for optimization purposes, the document can be loaded in the useVuePdfEmbed
composable function and then passed as the source
prop of the component (e.g. when sharing the source between multiple instances of the component).
<script setup>
import VuePdfEmbed, { useVuePdfEmbed } from 'vue-pdf-embed'
const { doc } = useVuePdfEmbed({
source: '<PDF_URL>',
})
</script>
<template>
<VuePdfEmbed :source="doc" />
</template>
The path to predefined CMaps should be specified to ensure correct rendering of documents containing non-Latin characters, as well as in case of CMap-related errors:
<VuePdfEmbed
:source="{
cMapUrl: 'https://unpkg.com/pdfjs-dist/cmaps/',
url: pdfSource,
}"
/>
The image resource path must be specified for annotations to display correctly:
<VuePdfEmbed
image-resources-path="https://unpkg.com/pdfjs-dist/web/images/"
:source="pdfSource"
/>
Note: The examples above use a CDN to load resources, however these resources can also be included in the build by installing the pdfjs-dist
package as a dependency and further configuring the bundler.
Advanced Usage Demo (JSFiddle)
MIT License. Please see LICENSE file for more information.
FAQs
PDF embed component for Vue
The npm package vue-pdf-embed receives a total of 30,752 weekly downloads. As such, vue-pdf-embed popularity was classified as popular.
We found that vue-pdf-embed demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.