Vue.js Mozilla PDF Document Viewer, PDF.js Library Using pdf.js – dist in Js Complete Project For learner

Welcome Learner today in this blog post I will create a PDF Document Viewer, PDF.js Library Using pdf.js – dist in Js.

 

 


create a Index.html file and copy-paste the Given code.

index.html 

 

 

<template id="app">
  <div class="app">
    <pdf url="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10019/pdf.pdf"></pdf>
  </div>
</template>

<template id="pdf">
  <div class="p-10 container">
    <div class="bg-grey-light p-2">
      <span class="mr-2">Page: {{page}} of {{numPages}}</span>
      <button class="bg-blue text-white p-2" @click="prev"><</button>
      <button class="bg-blue text-white p-2" @click="next">></button>
    </div>
    
    <div class="bg-red w-1 absolute z-10" 
         v-for="rect in rects"
         :style="{top: rect.top + 'px', height: rect.height + 'px'}"></div>
    
    <div class="relative">
      <div ref="canvas" class="relative"></div>
    </div>
    
    <div class="bg-black p-4 text-white font-mono">
      <p class="text-green">Selection:</p>
      <p class="mb-2" v-if="selection">{{selection}}</p>
      <p class="mb-2" v-else>Nothing selected, please select something.</p>
      <p class="text-yellow" v-if="selection && rects.length > 0">
        Selection Geometry
        <p v-for="rect in rects">{{rect}}</p>
      </p>
    </div>
  </div>
</template>

<div class="wrapper"></div>

And now create a style.css file and copy-paste the Given code.

style.css 

 

 

/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.textLayer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0.2;
  line-height: 1.0;
}

.textLayer > div {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}

.textLayer .highlight {
  margin: -1px;
  padding: 1px;

  background-color: rgb(180, 0, 170);
  border-radius: 4px;
}

.textLayer .highlight.begin {
  border-radius: 4px 0px 0px 4px;
}

.textLayer .highlight.end {
  border-radius: 0px 4px 4px 0px;
}

.textLayer .highlight.middle {
  border-radius: 0px;
}

.textLayer .highlight.selected {
  background-color: rgb(0, 100, 0);
}

.textLayer ::selection { background: rgb(0,0,255); }
.textLayer ::-moz-selection { background: rgb(0,0,255); }

.textLayer .endOfContent {
  display: block;
  position: absolute;
  left: 0px;
  top: 100%;
  right: 0px;
  bottom: 0px;
  z-index: -1;
  cursor: default;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
}

.textLayer .endOfContent.active {
  top: 0px;
}

create a style.js file and copy-paste the Given code.

script.js 

 

const pdf = {
  props: ['url'],
  template: '#pdf',
  
  data () {
    return {
      page: 1,
      pdf: null,
      numPages: 'unknown',
      selection: '',
      rects: []
    }
  },
  
  watch: {
    page () {
      this.showPage(this.page);
    },
    
    pdf () {
      this.numPages = this.pdf.numPages;
    }
  },
  
  methods: {
    selectionChanged () {
      if(!window.getSelection)  {
        this.selection = ''
        this.rects = [];
        return
      }
      
      const selection = window.getSelection();
      const text = selection.toString();
      
      if (!text) {
        this.selection = '';
        this.rects = []
        return;
      }
      
      this.rects = [...selection.getRangeAt(0).getClientRects()].map(r => ({
        left: r.left,
        width: r.width,
        top: r.top,
        height: r.height
      }));
      
      this.selection = text;
    },
    
    prev () {
      this.page = this.page > 1 ? this.page - 1 : 1;
    },
    next() {
      this.page = this.page < this.pdf.numPages ? this.page + 1 : this.pdf.numPages;
    },
    
    showPage (page = 1) {
      this.pdf.getPage(page) // PROMISE!
        .then(this.renderPage.bind(this))
    },

    renderPage (page) {
      const scale = 0.75;
      const viewport = page.getViewport(scale);
      const canvasContainer = this.$refs.canvas;
      const canvas = document.createElement('canvas');
      
      // clean up container
      while (canvasContainer.childElementCount > 0) {
        canvasContainer.removeChild(canvasContainer.firstChild); 
      }
      
      var canvasContext = canvas.getContext('2d');
      var renderContext = { canvasContext, viewport };
      
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      canvasContainer.appendChild(canvas);
      
      page.render(renderContext) // PROMIS!!
        .then(() => page.getTextContent())
        .then(textContent => {
          const textLayerDiv = document.createElement('div');
          const textLayer = new TextLayerBuilder({
            viewport,
            textLayerDiv, 
            pageIndex: page.pageIndex,
          });
        
          textLayerDiv.classList.add('textLayer')
          textLayer.setTextContent(textContent);
          textLayer.render()
        
          canvasContainer.appendChild(textLayerDiv);
      });
    },
  },
  
  mounted () {
    document.addEventListener('selectionchange', this.selectionChanged.bind(this));
    
    pdfjsLib.getDocument(this.url)
      .then(pdf => {
        this.pdf = pdf;
        this.totalPages = pdf.numPages
      })
      .then(this.showPage)
  }
}

new Vue({
  template: '#app',
  el: '.wrapper',
  components: {pdf}
})

window.PDFJS = pdfjsLib;

 

See AlsoDevelop a Compound Interest Calculator Using Chart.js in CSS3 Javascript and HTML5 Complete Project For learner

Leave a Comment

Your email address will not be published. Required fields are marked *