[vue-pdf-embed@2] Advanced usage example

Advanced usage example of embedding a PDF document into a Vue application using vue-pdf-embed. Learn more at https://npmjs.com/package/vue-pdf-embed

by hrynko

HTML

<script src="https://unpkg.com/vue@3.3.0/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-pdf-embed@2.1.0/dist/index.umd.js"></script>

<link rel="stylesheet" href="https://unpkg.com/vue-pdf-embed@2.1.0/dist/styles/annotationLayer.css">
<link rel="stylesheet" href="https://unpkg.com/vue-pdf-embed@2.1.0/dist/styles/textLayer.css">

<template id="appTemplate">
  <div class="app-header">
    <template v-if="isLoading">Loading...</template>

    <template v-else>
      <span v-if="showAllPages">{{ pageCount }} page(s)</span>

      <span v-else>
        <button :disabled="page <= 1" @click="page--">❮</button>
        <span>{{ page }} / {{ pageCount }}</span>
        <button :disabled="page >= pageCount" @click="page++">❯</button>
      </span>

      <label>
        <input v-model="showAllPages" type="checkbox">
        <span>Show all pages</span>
      </label>
    </template>
  </div>

  <div class="app-content">
    <vue-pdf-embed
      :source="pdfSource"
      :page="page"
      annotation-layer
      text-layer
      @password-requested="handlePasswordRequest"
      @loaded="handleDocumentLoad"
      @rendered="handleDocumentRender"
    />
  </div>
</template>

<div id="app"></div>

CSS

body {
  margin: 0;
  padding: 0;
  background-color: #ccc;
}

.app-header {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
  background-color: #555;
  color: #ddd;
}

.app-header > * {
  display: flex;
  align-items: center;
  gap: 4px;
}

.app-content {
  padding: 24px 16px;
}

.vue-pdf-embed {
  margin: 0 auto;
}

.vue-pdf-embed__page {
  margin-bottom: 8px;
  box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
}

JavaScript

Vue.createApp({
  template: document.getElementById('appTemplate').innerHTML,
  components: {
    'vue-pdf-embed': VuePdfEmbed,
  },
  data() {
    return {
      isLoading: true,
      page: null,
      pageCount: null,
      pdfSource: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
      showAllPages: true,
    }
  },
  watch: {
    showAllPages() {
      this.page = this.showAllPages ? null : 1
    },
  },
  methods: {
    handleDocumentLoad({numPages}) {
      this.pageCount = numPages
    },
    handleDocumentRender() {
      this.isLoading = false
    },
    handlePasswordRequest({callback, isWrongPassword}) {
      callback(prompt(isWrongPassword ?
        'Enter password again' :
        'Enter password'
      ))
    },
  }
}).mount('#app')