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>

  <VuePdfJs class="grey"
            :url="url"
  />

</template>

<script>
import VuePdfJs from "vue-pdfjs-demo/src/App.vue";

export default {
  components: {
    VuePdfJs
  },
    data: () => ({
    url:'https://cors-anywhere.herokuapp.com/YourUrl.pdf'
  })
}
</script>

Documentation

• Vue.js
• PDF.js