Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arkokoley/pdfvuer
A PDF viewer for Vue using Mozilla's PDF.js that supports both Vue2 and Vue3
https://github.com/arkokoley/pdfvuer
component hacktoberfest mozilla-pdf pdf pdf-viewer vue vue-component vue2 vue3
Last synced: 24 days ago
JSON representation
A PDF viewer for Vue using Mozilla's PDF.js that supports both Vue2 and Vue3
- Host: GitHub
- URL: https://github.com/arkokoley/pdfvuer
- Owner: arkokoley
- License: mit
- Created: 2018-06-20T20:58:42.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-28T21:21:51.000Z (over 1 year ago)
- Last Synced: 2024-09-28T17:43:08.705Z (about 1 month ago)
- Topics: component, hacktoberfest, mozilla-pdf, pdf, pdf-viewer, vue, vue-component, vue2, vue3
- Language: Vue
- Homepage: https://arkokoley.github.io/pdfvuer
- Size: 9.12 MB
- Stars: 914
- Watchers: 15
- Forks: 130
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Pdfvuer
> A PDF viewer for Vue using Mozilla's PDF.js
[](https://github.com/vuejs/awesome-vue)
[](https://npmjs.com/package/pdfvuer)
[](https://npmjs.com/package/pdfvuer)
[](https://github.com/arkokoley/pdfvuer)
[](https://github.com/arkokoley/pdfvuer/blob/master/LICENSE)
## Install
For Vue 2:
```
npm install --save pdfvuer
```
For Vue 3:
```
npm i pdfvuer@next --save
```
## Example - basic
```vue
loading content here...
import pdf from 'pdfvuer'
import 'pdfjs-dist/build/pdf.worker.entry' // not needed since v1.9.1
export default {
components: {
pdf
}
}
```
## Example - Advanced
```vue
loading content here...
import pdfvuer from 'pdfvuer'
import 'pdfjs-dist/build/pdf.worker.entry' // not needed since v1.9.1
export default {
components: {
pdf: pdfvuer
},
data () {
return {
page: 1,
numPages: 0,
pdfdata: undefined,
errors: [],
scale: 'page-width'
}
},
computed: {
formattedZoom () {
return Number.parseInt(this.scale * 100);
},
},
mounted () {
this.getPdf()
},
watch: {
show: function (s) {
if(s) {
this.getPdf();
}
},
page: function (p) {
if( window.pageYOffset <= this.findPos(document.getElementById(p)) || ( document.getElementById(p+1) && window.pageYOffset >= this.findPos(document.getElementById(p+1)) )) {
// window.scrollTo(0,this.findPos(document.getElementById(p)));
document.getElementById(p).scrollIntoView();
}
}
},
methods: {
handle_pdf_link: function (params) {
// Scroll to the appropriate place on our page - the Y component of
// params.destArray * (div height / ???), from the bottom of the page div
var page = document.getElementById(String(params.pageNumber));
page.scrollIntoView();
},
getPdf () {
var self = this;
self.pdfdata = pdfvuer.createLoadingTask('./static/relativity.pdf');
self.pdfdata.then(pdf => {
self.numPages = pdf.numPages;
window.onscroll = function() {
changePage()
stickyNav()
}
// Get the offset position of the navbar
var sticky = $('#buttons')[0].offsetTop
// Add the sticky class to the self.$refs.nav when you reach its scroll position. Remove "sticky" when you leave the scroll position
function stickyNav() {
if (window.pageYOffset >= sticky) {
$('#buttons')[0].classList.remove("hidden")
} else {
$('#buttons')[0].classList.add("hidden")
}
}
function changePage () {
var i = 1, count = Number(pdf.numPages);
do {
if(window.pageYOffset >= self.findPos(document.getElementById(i)) &&
window.pageYOffset <= self.findPos(document.getElementById(i+1))) {
self.page = i
}
i++
} while ( i < count)
if (window.pageYOffset >= self.findPos(document.getElementById(i))) {
self.page = i
}
}
});
},
findPos(obj) {
return obj.offsetTop;
}
}
}
#buttons {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Page content */
.content {
padding: 16px;
}
```
## API
### Props
#### :src String / Object - default: ''
The url of the pdf file. `src` may also be a `string|TypedArray|DocumentInitParameters|PDFDataRangeTransport` for more details, see [`PDFJS.getDocument()`](https://github.com/mozilla/pdf.js/blob/8ff1fbe7f819513e7d0023df961e3d223b35aefa/src/display/api.js#L117).
#### :page Number - default: 1
The page number to display.
#### :rotate Number - default: 0
The page rotation in degrees, only multiple of 90 are valid.
#### :scale Number / String - default: 'page-width' - .sync
The scaling factor. By default, the pdf will be scaled to match the page width
with the container width.
When passed value `page-width` and / or using `resize` prop, will send back the scale
computed accordingly via `update:scale` event (use it with `scale.sync="scale"`)
#### :resize Boolean - default: false
Enable Auto Resizing on window resize. By default, autoresizing is disabled.
#### :annotation Boolean - default: false
Show the annotations in the pdf. By default, annotation layer is disabled.
#### :text Boolean - default: true
Show the text layer in the pdf. By default, text layer is enabled.
### Events
#### @numpages Number
The total number of pages of the pdf.
#### @loading Boolean
The provided PDF's loading state
#### @error Function
Function handler for errors occurred during loading/drawing PDF source.
#### @link-clicked Function
Function handler for errors occurred during loading/drawing PDF source.
Example:
```js
handle_pdf_link: function (params) {
// Scroll to the appropriate place on our page - the Y component of
// params.destArray * (div height / ???), from the bottom of the page div
var page = document.getElementById(String(params.pageNumber));
page.scrollIntoView();
}
```
### Public static methods
#### createLoadingTask(src)
* `src`: see `:src` prop
This function creates a PDFJS loading task that can be used and reused as `:src` property.
## Public Demo
Advanced Example - [https://arkokoley.github.io/pdfvuer](https://arkokoley.github.io/pdfvuer)
[Used in production by Gratia](https://goodwill.zense.co.in/resources/1)
> Made with :heart: in Bangalore, India
## License
MIT © [Gaurav Koley](https://gaurav.koley.in), 2021