# 📄 vue-pdf-viewer

  

PDF viewer component for Vue 2 and Vue 3

```
TODO: shields.io
```

  

## Compatibility

  

This package is compatible with both Vue 2 and Vue 3. The default exported build is for Vue 3, but `dist` directory also contains a build for Vue 2 (`dist/vue2-pdf-viewer.js`). See the example in [Usage](#usage) section.

  

## Installation

  

Depending on the environment, the package can be installed in one of the following ways:

  

```shell

npm install vue-pdf-viewer

```

  

```shell

yarn add vue-pdf-viewer

```

  

```html

<script src="https://unpkg.com/vue-pdf-viewer"></script>

```

  

## Usage

  

```vue

<template>
  <div>
    <h1>File</h1>

    <PDFViewer
      :source="url"
      style="height: 100vh; width: 100vw"
      @download="handleDownload"
    />

    <h1>Base64</h1>

    <PDFViewer
      :source="base64"
      style="height: 100vh; width: 100vw"
      @download="handleDownload"
    />
  </div>

</template>

<script>
import PDFViewer from 'vue-pdf-viewer'

// OR THE FOLLOWING IMPORT FOR VUE 2
// import PDFViewer from 'vue-pdf-viewer/dist/vue2-pdf-viewer'

export default {
  components: {
    PDFViewer,
  },

  data() {

    return {
      url: '<PDF_URL>',
      base64: '<BASE64_ENCODED_PDF>',
    }
  },
}

</script>

```

  

### Props

  | Name     | Type       | Accepted values                                                                                                 | Description        |
  | -------- | ---------- | --------------------------------------------------------------------------------------------------------------- | ------------------ |
  | source   | `string`   | document `URL` or `Base64`                                                                                      | source of document |
  | controls | `string[]` | `[`<br/>`'download',`<br/>`'print',`<br/>`'rotate',`<br/>`'zoom',`<br/>`'catalog',`<br/>`'switchPage',`<br/>`]` | visible controls   |
  |          |            |                                                                                                                 |                    |


  

### Events

  
  | Name             | Value                                 | Description                     |
  | ---------------- | ------------------------------------- | ------------------------------- |
  | download         | `{source: string; filename: string;}` | pdf file base info              |
  | loaded           | `{total: number}`                     | document load completed      |
  | loading-failed   | `Error`                               | failed to load document         |
  | rendered         | -                                     | finished rendering the document |
  | rendering-failed | `Error`                               | failed to render document       |


  

## Examples

  
```
TODO: CodeSandbox or JSFiddle
```

  

## License

  

MIT License. Please see [LICENSE file](LICENSE) for more information.