vue-pdfjs-demo

vue-pdfjs-demo

This project demonstrates how a simple PDF viewer could be implemented using Vue and PDF.js. This is not a fully-featured PDF document viewer with sophisticated controls, but could serve as the basis for one.

To learn more, checkout the series of posts describing how this project was implemented.

• Basic page rendering
• Fetching and rendering lazily
• Extracting a data component
• Refactoring to nested abstract components

Setup

To run the project locally:

$ git clone https://github.com/rossta/vue-pdfjs-demo
$ cd vue-pdfjs-demo
$ yarn install
$ yarn serve

Installation

To use the project inside your Vue app :

• Create a .env file at the root directory of your project
• this .env file should contain this : VUE_APP_PDF_URL=https://cors-anywhere.herokuapp.com/YOUR_PDF_URL (cors-anywhere permits to avoid cors failure)
• npm install

Then, copy this code where you want inside you project :

<template>
  <div id="appt">
    <PDFViewer
      class="grey"
      v-bind="{url}"
      @document-errored="onDocumentErrored"
    >
      <PDFUploader
        v-if="enableUploader"
        slot="header"
        :document-error="documentError"
        class="header-item"
        @updated="urlUpdated"
      />
    </PDFViewer>
  </div>
</template>

<script>
import PDFUploader from 'vue-pdfjs-demo/src/components/PDFUploader.vue'
import PDFViewer from 'vue-pdfjs-demo/src/components/PDFViewer.vue'

export default {
  components: {
    PDFUploader,
    PDFViewer,
  },
  data() {
    return {
      url: process.env.VUE_APP_PDF_URL,
      documentError: undefined,
      enableUploader: process.env.VUE_APP_UPLOAD_ENABLED === 'true',
    };
  },
  methods: {
    urlUpdated(url) {
      this.documentError = undefined;
      this.url = url;
    },
    onDocumentErrored(e) {
      this.documentError = e.text;
    },
  },
}
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
  background-color: #606f7b;
}
#appt {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #62637a;
}
label.form {
  color: white;
  font-family: Monaco, 'Courier New', Courier, monospace;
  font-weight: bold;
  margin-bottom: 2em;
  display: block;
}
input {
  padding: 0.45em;
  font-size: 1em;
}
.error {
  border: 1px solid red;
  background: pink;
  color: red;
  padding: 0.5em 3em;
  display: inline;
}

a.icon {
  cursor: pointer;
  display: block;
  border: 1px #333 solid;
  background: white;
  color: #333;
  font-weight: bold;
  padding: 0.25em;
  width: 1em;
  height: 1em;
  font-size: 1.5em;
}

.box-shadow {
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
}
.overflow-hidden {
  overflow: hidden;
}

@media print {
  body {
    background-color: transparent;
  }
  #appt {
    margin: 0;
    padding: 0;
  }
}
</style> 

Documentation

• Vue.js
• PDF.js