pdfvuer

A PDF viewer for Vue using Mozilla's PDF.js

Github stars Tracking Chart

Pdfvuer

A PDF viewer for Vue using Mozilla's PDF.js

Install

npm install --save pdfvuer

Example - basic

<template>
  <pdf src="./static/relativity.pdf" :page="1">
    <template slot="loading">
      loading content here...
    </template>
  </pdf>
</template>

<script>
import pdf from 'pdfvuer'

export default {
  components: {
    pdf
  }
}

Example - Advanced

<template>
  <div id="pdfvuer">
    <div id="buttons" class="ui grey three item inverted bottom fixed menu transition hidden">
      <a class="item" @click="page > 1 ? page-- : 1">
        <i class="left chevron icon"></i>
        Back
      </a>
      <a class="ui active item">
        {{page}} / {{ numPages ? numPages : '∞' }}
      </a>
      <a class="item" @click="page < numPages ? page++ : 1">
        Forward
        <i class="right chevron icon"></i>
      </a>
    </div>
    <div id="buttons" class="ui grey three item inverted bottom fixed menu transition hidden">
      <a class="item" @click="scale -= scale > 0.2 ? 0.1 : 0">
        <i class="left chevron icon" />
          Zoom -
      </a>
      <a class="ui active item">
        {{ formattedZoom }} %
      </a>
      <a class="item" @click="scale += scale < 2 ? 0.1 : 0">
        Zoom +
        <i class="right chevron icon" />
      </a>
    </div>
    <pdf :src="pdfdata" v-for="i in numPages" :key="i" :id="i" :page="i"
      :scale.sync="scale" style="width:100%;margin:20px auto;">
      <template slot="loading">
        loading content here...
      </template>
    </pdf>
  </div>
</template>

<script>
import pdfvuer from 'pdfvuer'

export default {
  components: {
    pdf: pdfvuer
  },
  data () {
    return {
      page: 1,
      numPages: 0,
      pdfdata: undefined,
      errors: [],
      scale: 'page-width'
    }
  },
  computed: {
    formattedZoom () {
        return Number.parseInt(this.scale * 100);
    },
  },
  mounted () {
    this.getPdf()
  },
  watch: {
    show: function (s) {
      if(s) {
        this.getPdf();
      }
    },
    page: function (p) {
      if( window.pageYOffset <= this.findPos(document.getElementById(p)), ( document.getElementById(p+1) && window.pageYOffset >= this.findPos(document.getElementById(p+1)) )) {
        // window.scrollTo(0,this.findPos(document.getElementById(p)));
        document.getElementById(p).scrollIntoView();
      }
    }
  },
  methods: {
    getPdf () {
      var self = this;
      self.pdfdata = pdfvuer.createLoadingTask('./static/relativity.pdf');
      self.pdfdata.then(pdf => {
        self.numPages = pdf.numPages;
        window.onscroll = function() { 
          changePage() 
          stickyNav()  
        }

        // Get the offset position of the navbar
        var sticky = $('#buttons')[0].offsetTop

        // Add the sticky class to the self.$refs.nav when you reach its scroll position. Remove "sticky" when you leave the scroll position
        function stickyNav() {
          if (window.pageYOffset >= sticky) {
            $('#buttons')[0].classList.remove("hidden")
          } else {
            $('#buttons')[0].classList.add("hidden")
          }
        }

        function changePage () {
          var i = 1, count = Number(pdf.numPages);
          do {
            if(window.pageYOffset >= self.findPos(document.getElementById(i)) && 
                window.pageYOffset <= self.findPos(document.getElementById(i+1))) {
              self.page = i
            }
            i++
          } while ( i < count)
          if (window.pageYOffset >= self.findPos(document.getElementById(i))) {
            self.page = i
          }
        }
      });
    },
    findPos(obj) {
      return obj.offsetTop;
    }
  }
}
</script>

<style lang="css" scoped>
  #buttons {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Page content */
  .content {
    padding: 16px;
  }
</style>

API

Props

:src String / Object - default: ''

The url of the pdf file. src may also be a string, TypedArray, DocumentInitParameters, PDFDataRangeTransport for more details, see PDFJS.getDocument().

:page Number - default: 1

The page number to display.

:rotate Number - default: 0

The page rotation in degrees, only multiple of 90 are valid.

:scale Number / String - default: 'page-width' - .sync

The scaling factor. By default, the pdf will be scaled to match the page width
with the container width.
When passed value page-width and / or using resize prop, will send back the scale
computed accordingly via update:scale event (use it with scale.sync="scale")

:resize Boolean - default: false

Enable Auto Resizing on window resize. By default, autoresizing is disabled.

:annotation Boolean - default: false

Show the annotations in the pdf. By default, annotation layer is disabled.

:text Boolean - default: true

Show the text layer in the pdf. By default, text layer is enabled.

Events

@numpages Number

The total number of pages of the pdf.

@loading Boolean

The provided PDF's loading state

@error Function

Function handler for errors occurred during loading/drawing PDF source.

Public static methods

createLoadingTask(src)

  • src: see :src prop
    This function creates a PDFJS loading task that can be used and reused as :src property.

Public Demo

Advanced Example - https://blog.koley.in/pdfvuer

Used in production by Gratia

Made with :heart: at IIIT Bangalore

License

MIT © Gaurav Koley, 2018

Main metrics

Overview
Name With Ownerarkokoley/pdfvuer
Primary LanguageVue
Program languageVue (Language Count: 2)
Platform
License:MIT License
所有者活动
Created At2018-06-20 20:58:42
Pushed At2023-03-28 21:21:51
Last Commit At2023-03-28 17:21:51
Release Count29
Last Release Namev2.0.1 (Posted on 2021-08-02 02:48:44)
First Release Namev1.0.1 (Posted on 2018-06-21 02:25:04)
用户参与
Stargazers Count0.9k
Watchers Count15
Fork Count131
Commits Count148
Has Issues Enabled
Issues Count105
Issue Open Count32
Pull Requests Count33
Pull Requests Open Count4
Pull Requests Close Count9
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private