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.

1. Basic page rendering
2. Fetching and rendering lazily
3. Extracting a data component
4. 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