linways-pdf-annotate

About

Annotation layer for pdf.js in vue based on https://github.com/sxhxliang/pdf-annotate-vue

Install

npm install linways-pdf-annotate -S

npm i pdfjs-dist@2.0.943

Example

<template>
  <div id="annotation">
  <!-- only if not found in DOM -->
      <div id="frame"></div> 
  <!--                          -->
    <pdfAnnotate :src="pdf-location" 
      :toolbar="true" 
      :commentWrapper="false" 
      :disableFlag="false"
      @save ="saveAnnotations"
      @pages ="totalPages = $event">
    </pdfAnnotate>
  </div>
</template>

<script>

import pdfAnnotate from 'linways-pdf-annotate/src/pdfAnnotate'

export default {
  name: 'pdf-annotate',
  components: {
    pdfAnnotate
  },
  data(){
    return {
      pdf-location: 'location_to_pdf.pdf',
    }
  }
}
</script>
<style scoped>
#frame {
  height: 90vh;
}
</style>

Instructions

When building include the worker files ( ex : 419ce5e4e3bbf018d8c5.worker.js ) and their maps along with the component build files to get all styles and pdfjsWorker functions.

To save annotation:
use @save emit

Use the disableFlag prop (default : false ) to disable the clear and save buttons ( can be used when writes to db needs to be restricted)

Examples:-
To get annotations:
let annotations = localStorage.getItem(`${filename}/annotations`);

To set annotations:
localStorage.setItem(`${filename}/annotations`,annotations);