Vue.js Mozilla PDF.js vue-pdf-app Library PDF Viewer to Display PDF Documents in Browser Using Javascript Full Tutorial For Beginners

Vue.js Mozilla PDF.js vue-pdf-app Library PDF Viewer to Display PDF Documents in Browser Using Javascript Full Tutorial For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be building a pdf viewer using vue-pdf-app library in vue.js using mozilla pdf.js library. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to install the below library using the npm command as shown below

 

npm i vue-pdf-app

 

After installing this library you can use this library to display the pdf documents inside the browser in vue.js

 

Official Github Repository

 

VUEjs v2 PDF viewer based on Mozilla’s PDFJS.

100% PDFJS functionality:

  • zoom
  • open
  • print
  • download
  • rotate
  • text selection
  • search panel
  • thumbnail, outline, attachments, annotation layers

Easily localized configurable panel

Cross-browser support

Built-in typescript support

 

Example

 

 

<template>
  <pdf-viewer pdf="http://example.com/sample.pdf"></pdf-viewer>
</template>

<script>
import PdfViewer from "vue-pdf-app";

export default {
  components: {
    PdfViewer
  }
}
</script>

 

See also  Vue.js Tutorial to Disable Form Input Fields Props Conditionally in Browser Using Javascript Full Project For Beginners

 

 

 

Browser Usage

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <title>pdf-viewer demo</title>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-pdf-app"></script>
</head>

<body>
  <div id="app" style="height: 100%;">
    <pdf-app pdf="/sample.pdf"></pdf-app>
  </div>
  <script>
    new Vue({
      components: {
        PdfApp: window["pdf-viewer"]
      }
    }).$mount('#app')
  </script>
</body>

</html>

 

 

Typescript

 

<template>
  <div id="app">
    <pdf-app pdf="/sample.pdf"></pdf-app>
  </div>
</template>

<script lang="ts">
import PdfApp from "vue-pdf-app";
import { Component, Vue } from 'vue-property-decorator';

@Component({
  components: {
    PdfApp
  },
})
export default class App extends Vue {}
</script>

 

 

Lazy Loading

 

 

<template>
  <div id="app">
    <pdf-viewer></pdf-viewer>
  </div>
</template>

<script>
import Loader from "./components/Loader.vue";

export default {
  name: "App",
  components: {
    "pdf-viewer": () => ({
      component: new Promise((res) => {
        return setTimeout(
          () => res(import(/* webpackChunkName: "pdf-viewer" */ "vue-pdf-app")),
          4000
        );
      }),
      loading: Loader,
    }),
  },
};
</script>

 

 

PDF.js Interaction

 

 

<template>
  <div id="app">
    <div id="pdf-wrapper">
      <pdf-app pdf="/sample.pdf" @open="openHandler"></pdf-app>
    </div>
    <div id="info">
      <h1>PDF info:</h1>
      <div v-for="item in info" :key="item.name">
        <span>{{ item.name }}: {{ item.value }}</span>
        <br />
      </div>
    </div>
  </div>
</template>

<script>
import PdfApp from "vue-pdf-app";

export default {
  name: "App",
  components: {
    PdfApp,
  },
  data() {
    return {
      info: [],
    };
  },
  methods: {
    async openHandler(PDFViewerApplication) {
      this.info = [];
      const info = await PDFViewerApplication.pdfDocument
        .getMetadata()
        .catch(console.error.bind(console));

      if (!info) return;
      const props = Object.keys(info.info);
      props.forEach((prop) => {
        const obj = {
          name: prop,
          value: info.info[prop],
        };
        this.info.push(obj);
      });
    },
  },
};
</script>

 

Leave a Reply