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

Example - display multiple pages of the same pdf document

```vue

<div>

<pdf

v-for="i in numPages"

:key="i"

:src="src"

:page="i"

style="display: inline-block; width: 25%"

></pdf>

</div>

```

Example - print all pages

```vue

<button @click="$refs.myPdfComponent.print()">print</button>

<pdf ref="myPdfComponent" src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"></pdf>

```

Example - print multiple pages

```vue

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

```

Example - get text content

```vue

<div>

<button

@click="logContent"

>

log content

</button>

<pdf

ref="myPdfComponent"

src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"

></pdf>

</div>

```

Example - complete

```vue

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

```

Credits

Franck Freiburger