vue-instant-pdf-viewer

vue-pdf-viewer

Vue PDF Viewer based on PDF Object

Installation

npm install --save vue-instant-pdf-viewer

Dependencies

Please include pdf.object.js from https://pdfobject.com

<!-- please select either unminimied or minified version -->
<script src="/static/lib/pdfobject.js"></script>
<script src="/static/lib/pdfobject.min.js"></script>

Usage

Javascript

import Vue from 'vue'
import VuePDFViewer from 'vue-pdf-viewer'

new Vue({
  el: '#app',
  data: {
    url: 'https://bitcoin.org/bitcoin.pdf',
  },
  components: {
    'vue-pdf-viewer': VuePDFViewer
  }
});

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue-pdf-viewer</title>
    <script src="/static/lib/pdfobject.min.js"></script>
  </head>
  <body>
    <div id="app">
      <vue-pdf-viewer height="500px" :url="url">
      </vue-pdf-viewer>
    </div>
  </body>
</html>

Preview

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, checkout the guide and docs for vue-loader.