Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
form-vue-pdf
Advanced tools
vue.js pdf viewer is a package for Vue that enables you to display and view PDF's easily via vue components.
npm install vue-pdf
yarn add vue-pdf
<template>
<pdf src="./path/to/static/relativity.pdf"></pdf>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf
}
}
TBD: fix the demo
Same browser support as Vue.js 2
since v2.x, the script is exported as esm.
The url of the given pdf. src
may also be a string|TypedArray|DocumentInitParameters|PDFDataRangeTransport
for more details, see PDFJS.getDocument()
.
The page number to display.
The page rotation in degrees, only multiple of 90 are valid. EG: 90, 180, 270, 360, ...
updatePassword
: The function to call with the pdf password.reason
: the reason why this function is called 'NEED_PASSWORD'
or 'INCORRECT_PASSWORD'
Document loading progress. Range [0, 1].
Triggers when the document is loaded.
Triggers when a page is loaded.
The sum of all pages from the given pdf.
Triggers when an error occurs.
Triggers when an internal link is clicked
dpi
: the print resolution of the document (try 100).pageList
: the list (array) of pages to print.src
: see :src
propoptions
: an object of options.
This function creates a PDFJS loading task that can be used and reused as :src
property.numPages
property (see example below).beware: when the component is destroyed, the object returned by createLoadingTask()
become invalid.
Supported options:
<template>
<div>
{{currentPage}} / {{pageCount}}
<pdf
src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"
@num-pages="pageCount = $event"
@page-loaded="currentPage = $event"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf
},
data() {
return {
currentPage: 0,
pageCount: 0,
}
}
}
</script>
<template>
<div>
<pdf
v-for="i in numPages"
:key="i"
:src="src"
:page="i"
style="display: inline-block; width: 25%"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');
export default {
components: {
pdf
},
data() {
return {
src: loadingTask,
numPages: undefined,
}
},
mounted() {
this.src.promise.then(pdf => {
this.numPages = pdf.numPages;
});
}
}
</script>
<template>
<button @click="$refs.myPdfComponent.print()">print</button>
<pdf ref="myPdfComponent" src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"></pdf>
</template>
<template>
<button @click="$refs.myPdfComponent.print(100, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14])">print</button>
<pdf ref="myPdfComponent" src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"></pdf>
</template>
<template>
<div>
<button
@click="logContent"
>
log content
</button>
<pdf
ref="myPdfComponent"
src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf
},
methods: {
logContent() {
this.$refs.myPdfComponent.pdf.forEachPage(function(page) {
return page.getTextContent()
.then(function(content) {
var text = content.items.map(item => item.str);
console.log(text);
})
});
}
}
}
</script>
<template>
<div>
<input type="checkbox" v-model="show">
<select v-model="src" style="width: 30em">
<option v-for="item in pdfList" :value="item" v-text="item"></option>
</select>
<input v-model.number="page" type="number" style="width: 5em"> /{{numPages}}
<button @click="rotate += 90">⟳</button>
<button @click="rotate -= 90">⟲</button>
<button @click="$refs.pdf.print()">print</button>
<div style="width: 50%">
<div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
<pdf v-if="show" ref="pdf" style="border: 1px solid red" :src="src" :page="page" :rotate="rotate" @password="password" @progress="loadedRatio = $event" @error="error" @num-pages="numPages = $event" @link-clicked="page = $event"></pdf>
</div>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf: pdf
},
data () {
return {
show: true,
pdfList: [
'',
'https://cdn.mozilla.net/pdfjs/tracemonkey.pdf',
'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/freeculture.pdf',
'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/annotation-link-text-popup.pdf',
'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/calrgb.pdf',
'https://cdn.rawgit.com/sayanee/angularjs-pdf/68066e85/example/pdf/relativity.protected.pdf',
'data:application/pdf;base64,JVBERi0xLjUKJbXtrvsKMyAwIG9iago8PCAvTGVuZ3RoIDQgMCBSCiAgIC9GaWx0ZXIgL0ZsYXRlRGVjb2RlCj4+CnN0cmVhbQp4nE2NuwoCQQxF+/mK+wMbk5lkHl+wIFislmIhPhYEi10Lf9/MVgZCAufmZAkMppJ6+ZLUuFWsM3ZXxvzpFNaMYjEriqpCtbZSBOsDzw0zjqPHZYtTrEmz4eto7/0K54t7GfegOGCBbBdDH3+y2zsMsVERc9SoRkXORqKGJupS6/9OmMIUfgypJL4KZW5kc3RyZWFtCmVuZG9iago0IDAgb2JqCiAgIDEzOAplbmRvYmoKMiAwIG9iago8PAogICAvRXh0R1N0YXRlIDw8CiAgICAgIC9hMCA8PCAvQ0EgMC42MTE5ODcgL2NhIDAuNjExOTg3ID4+CiAgICAgIC9hMSA8PCAvQ0EgMSAvY2EgMSA+PgogICA+Pgo+PgplbmRvYmoKNSAwIG9iago8PCAvVHlwZSAvUGFnZQogICAvUGFyZW50IDEgMCBSCiAgIC9NZWRpYUJveCBbIDAgMCA1OTUuMjc1NTc0IDg0MS44ODk3NzEgXQogICAvQ29udGVudHMgMyAwIFIKICAgL0dyb3VwIDw8CiAgICAgIC9UeXBlIC9Hcm91cAogICAgICAvUyAvVHJhbnNwYXJlbmN5CiAgICAgIC9DUyAvRGV2aWNlUkdCCiAgID4+CiAgIC9SZXNvdXJjZXMgMiAwIFIKPj4KZW5kb2JqCjEgMCBvYmoKPDwgL1R5cGUgL1BhZ2VzCiAgIC9LaWRzIFsgNSAwIFIgXQogICAvQ291bnQgMQo+PgplbmRvYmoKNiAwIG9iago8PCAvQ3JlYXRvciAoY2Fpcm8gMS4xMS4yIChodHRwOi8vY2Fpcm9ncmFwaGljcy5vcmcpKQogICAvUHJvZHVjZXIgKGNhaXJvIDEuMTEuMiAoaHR0cDovL2NhaXJvZ3JhcGhpY3Mub3JnKSkKPj4KZW5kb2JqCjcgMCBvYmoKPDwgL1R5cGUgL0NhdGFsb2cKICAgL1BhZ2VzIDEgMCBSCj4+CmVuZG9iagp4cmVmCjAgOAowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDA1ODAgMDAwMDAgbiAKMDAwMDAwMDI1MiAwMDAwMCBuIAowMDAwMDAwMDE1IDAwMDAwIG4gCjAwMDAwMDAyMzAgMDAwMDAgbiAKMDAwMDAwMDM2NiAwMDAwMCBuIAowMDAwMDAwNjQ1IDAwMDAwIG4gCjAwMDAwMDA3NzIgMDAwMDAgbiAKdHJhaWxlcgo8PCAvU2l6ZSA4CiAgIC9Sb290IDcgMCBSCiAgIC9JbmZvIDYgMCBSCj4+CnN0YXJ0eHJlZgo4MjQKJSVFT0YK',
],
src:'',
loadedRatio: 0,
page: 1,
numPages: 0,
rotate: 0,
}
},
methods: {
password: function(updatePassword, reason) {
updatePassword(prompt('password is "test"'));
},
error: function(err) {
console.log(err);
}
}
}
</script>
FAQs
vue.js pdf viewer
The npm package form-vue-pdf receives a total of 2 weekly downloads. As such, form-vue-pdf popularity was classified as not popular.
We found that form-vue-pdf demonstrated a not healthy version release cadence and project activity because the last version was released 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.