Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
vue-pdf-embed
Advanced tools
PDF embed component for Vue 2 and Vue 3
Weekly downloads
Readme
PDF embed component for Vue 2 and Vue 3
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).
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>
<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>
Name | Type | Accepted values | Description |
---|---|---|---|
disableAnnotationLayer | boolean | true or false | whether the annotation layer should be disabled |
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 |
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 |
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 |
Name | Arguments | Description |
---|---|---|
render | – | manually (re)render document |
print resolution (number ), filename (string ) | print document via browser interface |
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.
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 29,140 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
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.