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.
@jbtje/vite-vue3pdf
Advanced tools
Readme
The package contains a Vue 3 component to easily display PDF files in Vite.
public/pdfjs/pdf.worker.js
(default) or another location set with worker-src prop<template>
<pdf src="./static/relativity.pdf"></pdf>
</template>
<script>
import pdf from '@jbtje/vite-vue3pdf'
export default {
components: {
pdf
}
}
</script>
npm install --save @jbtje/vite-vue3pdf
Copy pdf.worker.min.js to public/pdsjs/pdf.worker.js
. Vite-Vue3Pdf will load pdf.worker.js from https://yourdomain.com/pdsjs/pdf.worker.js
Same browser support as Vue.js 3 (IE via Babel I guess)
The url of the pdf file. 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.
The pdf worker location, relative to '/public' directory.
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].
Triggered when the document is loaded.
Triggered when a page is loaded.
Triggered when a page is loaded.
The total number of pages of the pdf.
Triggered when an error occurred.
Triggered 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.num-pages
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 '@jbtje/vite-vue3pdf'
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 '@jbtje/vite-vue3pdf'
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 '@jbtje/vite-vue3pdf'
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 '@jbtje/vite-vue3pdf'
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
vite-vue.js pdf viewer
The npm package @jbtje/vite-vue3pdf receives a total of 34 weekly downloads. As such, @jbtje/vite-vue3pdf popularity was classified as not popular.
We found that @jbtje/vite-vue3pdf 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.
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.