Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/FranckFreiburger/vue-pdf

vue.js pdf viewer
https://github.com/FranckFreiburger/vue-pdf

component pdf pdf-viewer vue-pdf vuejs2

Last synced: about 2 months ago
JSON representation

vue.js pdf viewer

Lists

README 

        
# vue-pdf

vue.js pdf viewer is a package for Vue that enables you to display and view PDF's easily via vue components.



## Install via NPM/Yarn

```bash

npm install vue-pdf

```



```bash

yarn add vue-pdf

```



## Example - basic

```vue



  



import pdf from 'vue-pdf'



export default {

  components: {

    pdf

  }

}

```



## Demo



[vue-pdf demo on jsfiddle](https://jsfiddle.net/fossfiddler/5k4ptmqg/145/)



_TBD: fix the demo_



## Browser support

Same browser support as [Vue.js 2](https://github.com/vuejs/vue/blob/dev/README.md)



## Note

since v2.x, the script is exported as esm.



## API



### Props



#### :src <sup>String / Object - default: ''<sup>

The url of the given pdf. `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 <sup>Number - default: 1<sup>

The page number to display.



#### :rotate <sup>Number - default: 0<sup>

The page rotation in degrees, only multiple of 90 are valid.

EG: 90, 180, 270, 360, ...



### Events



#### @password <sup>(updatePassword, reason)<sup>

  * `updatePassword`: The function to call with the pdf password.

  * `reason`: the reason why this function is called `'NEED_PASSWORD'` or `'INCORRECT_PASSWORD'`



#### @progress <sup>Number<sup>

Document loading progress. Range [0, 1].



#### @loaded

Triggers when the document is loaded.



#### @page-loaded <sup>Number<sup>

Triggers when a page is loaded.



#### @num-pages <sup>Number<sup>

The sum of all pages from the given pdf.



#### @error <sup>Object<sup>

Triggers when an error occurs.



#### @link-clicked <sup>Number<sup>

Triggers when an internal link is clicked



### Public methods



#### print(dpi, pageList) * _experimental_ *

  * `dpi`: the print resolution of the document (try 100).

  * `pageList`: the list (array) of pages to print.



### Public static methods



#### createLoadingTask(src[, options])

  * `src`: see `:src` prop  

  * `options`: an object of options. 

  This function creates a PDFJS loading task that can be used and reused as `:src` property.  

  The loading task is a promise that resolves with the PDFJS pdf document that exposes the `numPages` property (see example below).

  

  **beware:** when the component is destroyed, the object returned by `createLoadingTask()` become invalid. 

  

  Supported options:

  * onPassword: Callback that's called when a password protected PDF is being opened.

  * onProgress: Callback return loading progress.

  * withCredentials: Wheter or not to send cookies in the fetch request.



## Examples



##### Example - current page / page count

```vue

<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,

		}

	}

}



```



##### Example - display multiple pages of the same pdf document

```vue



	


		

	



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;

		});

	}

}



```



##### Example - print all pages

```vue



	print

	



```



##### Example - print multiple pages

```vue



	print

	



```



##### Example - get text content

```vue



	


		

			log content

		

		

	



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);

				})

			});

		}

	}

}



```



##### Example - complete

```vue



	


		

		

			

		

		 /{{numPages}}

		⟳

		⟲

		print

		


			
{{ Math.floor(loadedRatio * 100) }}%


			

		


	



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);

		}

	}

}



```



## Credits

[ Franck Freiburger](https://www.franck-freiburger.com)