Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tuttarealstep/vue-pdf.js
A Vue component for displaying PDF files using the standard pdf.js viewer. This package provides a simple and powerful integration to embed PDF viewers in Vue applications.
https://github.com/tuttarealstep/vue-pdf.js
bun pdf pdf-viewer pdfjs vite vue vue-pdf vue3
Last synced: 4 days ago
JSON representation
A Vue component for displaying PDF files using the standard pdf.js viewer. This package provides a simple and powerful integration to embed PDF viewers in Vue applications.
- Host: GitHub
- URL: https://github.com/tuttarealstep/vue-pdf.js
- Owner: tuttarealstep
- License: mit
- Created: 2024-10-10T07:47:34.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-10-10T15:11:50.000Z (about 1 month ago)
- Last Synced: 2024-11-10T23:58:49.268Z (5 days ago)
- Topics: bun, pdf, pdf-viewer, pdfjs, vite, vue, vue-pdf, vue3
- Language: Vue
- Homepage:
- Size: 1020 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-pdfjs
`vue-pdfjs` is a Vue 3 component for displaying PDF files using the standard `pdf.js` viewer. This package provides a simple and powerful integration to embed PDF viewers in Vue applications.
## Features
- Display PDF files with `pdf.js`
- Localization support
- Modular components for easy customization
- Compatible with Vue 3 and Vite
## Installation
To install the package, run:
```sh
npm install @tuttarealstep/vue-pdf.js
```
## Usage
```vue
import { reactive, useTemplateRef } from 'vue'
import { VuePDFjs } from '@tuttarealstep/vue-pdf.js'
import '@tuttarealstep/vue-pdf.js/dist/style.css'
import enUS_FTL from '@tuttarealstep/vue-pdf.js/l10n/en-US/viewer.ftl?raw'
const pdf = new URL('./path/to/custom.pdf', import.meta.url).href
const vuepdfjs = useTemplateRef<typeof VuePDFjs>('vuepdfjs')
const options = reactive({
locale: {
code: 'en-US',
ftl: enUS_FTL
}
})
const onPdfAppLoaded = () => {
console.log('pdf-app:loaded')
console.log(vuepdfjs.value?.pdfApp)
if (!vuepdfjs.value?.pdfApp) {
return
}
vuepdfjs.value.pdfApp.eventBus.on('pagesloaded', (e: any) => {
vuepdfjs.value?.pdfApp.eventBus.dispatch('find', {
query: ['Dynamic languages such as JavaScript are more difficult to compile than statically typed ones.'],
caseSensitive: false,
entireWord: false,
highlightAll: true
})
})
}
html,
body,
#app {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
}
```
### With usePDF composable
```vue
import { reactive, useTemplateRef } from 'vue'
import { VuePDFjs, usePDF } from '@tuttarealstep/vue-pdf.js'
import '@tuttarealstep/vue-pdf.js/dist/style.css'
import enUS_FTL from '@tuttarealstep/vue-pdf.js/l10n/en-US/viewer.ftl?raw'
const vuepdfjs = useTemplateRef<typeof VuePDFjs>('vuepdfjs')
const options = reactive({
locale: {
code: 'en-US',
ftl: enUS_FTL
}
})
const onPdfAppLoaded = () => {
console.log('pdf-app:loaded')
console.log(vuepdfjs.value?.pdfApp)
if (!vuepdfjs.value?.pdfApp) {
return
}
vuepdfjs.value.pdfApp.eventBus.on('pagesloaded', (e: any) => {
vuepdfjs.value?.pdfApp.eventBus.dispatch('find', {
query: ['Dynamic languages such as JavaScript are more difficult to compile than statically typed ones.'],
caseSensitive: false,
entireWord: false,
highlightAll: true
})
})
}
const { pdf, info, pages} = usePDF(new URL('./path/to/custom.pdf', import.meta.url).href) // or any other source type
console.log(document, info, pages)
html,
body,
#app {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
}
```
## License
MIT
## Credits
- [pdf.js](https://mozilla.github.io/pdf.js/) (Apache-2.0) - PDF viewer library
- [vue-pdf](https://github.com/TaTo30/vue-pdf) (MIT) - Inspiration for the project