@jonnytran/vue-pdf-viewer

@jonnytran/vue-pdf-viewer

Vue PDF viewer components implemented using PDFJS.

Install

npm install --save @jonnytran/vue-pdf-viewer

Demo

TBD

Usage in vue

<template>
  <div id="app" style="height:100vh;width:100vw; position:fixed;">
    <PDFView :src.sync="src" ref="pdfView" fileName="order" :scale.sync="scale">
      <template slot="right-toolbox"></template>
      <!-- Add more buttons/features on the right side of the toolbar -->
      <template slot="left-toolbox"></template>
      <!-- Add more buttons/features on the left side of the toolbar -->
      <template slot="error"></template>
      <!-- Change the error message design -->
      <template slot="loading"></template>
    </PDFView>
  </div>
</template>
<script>
import {PDFView} from '@jonnytran/vue-pdf-viewer';
export default {
  components:{
  // ...
    PDFView
  },
  data(){
    return {
      scale: "1.25"
    }
  }
}
</script>

API

Props

:src ^{String / Object - default: null}

src accepts the following values:

• URL - example: https://example.com/pdf-content.pdf

• PDF Uint8Array Buffer

• PDFDataRangeTransport

• DocumentInitParameters

• Base64 encoded PDF buffer

• Base64 string - data:application/pdf;base64, ....

• You can also drag/drop pdf files into the viewer utilizing my own vue-dropzone directive!

for more details see PDFJS.getDocument().

:toolbarVisible ^{Boolean - default: true}

Toggle toolbar visibility.

:downloadFeatureVisible ^{Boolean - default: true}

Toggle download button feature visibility.

:sidebarFeatureVisible ^{Boolean - default: true}

Toggle sidebar (page navigation bar) visibility.

:dropzoneFeatureVisible ^{Boolean - default: true}

Enable/disable the dropzone(drag-n-drop PDF files) feature.

:scale ^{String - default: "1.25"}

Set the initial scale of the viewer. You can use it with :scale.sync for enabling two-way data binding.

:fileName ^{String - default: "{Date.now()}.pdf"}

Name of the file used when download function is triggered.