All Projects → arkokoley → Pdfvuer

arkokoley / Pdfvuer

Licence: mit
A PDF viewer for Vue using Mozilla's PDF.js

Projects that are alternatives of or similar to Pdfvuer

React Native Pdfview
📚 PDF viewer for React Native
Stars: ✭ 198 (-55.3%)
Mutual labels:  hacktoberfest, pdf, pdf-viewer
React Pdf Js
A React component to wrap PDF.js
Stars: ✭ 489 (+10.38%)
Mutual labels:  pdf, pdf-viewer, component
Vue Pdf
vue.js pdf viewer
Stars: ✭ 1,700 (+283.75%)
Mutual labels:  pdf, pdf-viewer, component
React Otp Input
✔️ OTP Input Component for React
Stars: ✭ 177 (-60.05%)
Mutual labels:  hacktoberfest, component
Geeksforgeeksscrapper
Scrapes g4g and creates PDF
Stars: ✭ 124 (-72.01%)
Mutual labels:  hacktoberfest, pdf
Educative.io Downloader
📖 This tool is to download course from educative.io for offline usage. It uses your login credentials and download the course.
Stars: ✭ 139 (-68.62%)
Mutual labels:  hacktoberfest, pdf
Vue Social Sharing
A renderless Vue.js component for sharing links to social networks, compatible with SSR
Stars: ✭ 1,071 (+141.76%)
Mutual labels:  hacktoberfest, vue-component
V Chart Plugin
Easily bind a chart to the data stored in your Vue.js components.
Stars: ✭ 188 (-57.56%)
Mutual labels:  hacktoberfest, component
Vue Highlight.js
📜 Highlight.js syntax highlighter component for Vue.
Stars: ✭ 180 (-59.37%)
Mutual labels:  hacktoberfest, vue-component
Svg2pdf.js
A javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts
Stars: ✭ 231 (-47.86%)
Mutual labels:  hacktoberfest, pdf
Xournalpp
Xournal++ is a handwriting notetaking software with PDF annotation support. Written in C++ with GTK3, supporting Linux (e.g. Ubuntu, Debian, Arch, SUSE), macOS and Windows 10. Supports pen input from devices such as Wacom Tablets.
Stars: ✭ 5,353 (+1108.35%)
Mutual labels:  pdf, pdf-viewer
React Spring Slider
A slider component for react
Stars: ✭ 118 (-73.36%)
Mutual labels:  hacktoberfest, component
Zoid
Cross domain components
Stars: ✭ 1,672 (+277.43%)
Mutual labels:  hacktoberfest, component
Openpdf
OpenPDF is a free Java library for creating and editing PDF files with a LGPL and MPL open source license. OpenPDF is based on a fork of iText. We welcome contributions from other developers. Please feel free to submit pull-requests and bugreports to this GitHub repository. ⛺
Stars: ✭ 2,174 (+390.74%)
Mutual labels:  hacktoberfest, pdf
Vue Gmaps
Search places and address using Google Maps API
Stars: ✭ 108 (-75.62%)
Mutual labels:  hacktoberfest, vue-component
Pdf Flipbook
Browse PDF document like a book turning its pages
Stars: ✭ 279 (-37.02%)
Mutual labels:  pdf, pdf-viewer
React Countdown
A customizable countdown component for React.
Stars: ✭ 402 (-9.26%)
Mutual labels:  hacktoberfest, component
Document Viewer
Document Viewer is a highly customizable document viewer for Android.
Stars: ✭ 415 (-6.32%)
Mutual labels:  pdf, pdf-viewer
Orbit
React components of open-source Orbit design system by Kiwi.com
Stars: ✭ 774 (+74.72%)
Mutual labels:  hacktoberfest, component
Vue Gh Corners
GitHub Corners for Vue.
Stars: ✭ 30 (-93.23%)
Mutual labels:  hacktoberfest, vue-component

Pdfvuer

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

npm version

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'

// import 'pdfjs-dist/build/pdf.worker.entry' // To be uncommented if you get error: Error: Setting up fake worker failed: "window.pdfjsWorker is undefined".

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'
// import 'pdfjs-dist/build/pdf.worker.entry' // To be uncommented if you get error: Error: Setting up fake worker failed: "window.pdfjsWorker is undefined".

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 src="pdfvuer/dist/pdfvuer.css"></style>
<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://arkokoley.github.io/pdfvuer

Used in production by Gratia

Made with ❤️ at IIIT Bangalore

License

MIT © Gaurav Koley, 2018

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].