Preview PDF

index.html

<div id="app">
  <input type="file" @change="onPdf" /><br>
  <canvas ref="pdfViewer"></canvas>
</div>

preview-pdf.markdown

Preview PDF

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

new Vue({
  mounted(){
    // Loaded via <script> tag, create shortcut to access PDF.js exports.
    var pdfjsLib = window['pdfjs-dist/build/pdf'];
    // The workerSrc property shall be specified.
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
  },
  methods:{
    onPdf(e){
      var file = e.target.files[0],
          vm = this
      if(file.type == "application/pdf"){
        var fileReader = new FileReader();  
        fileReader.onload = function() {
          var pdfData = new Uint8Array(this.result);
          // Using DocumentInitParameters object to load binary data.
          var loadingTask = pdfjsLib.getDocument({data: pdfData});
          loadingTask.promise.then(function(pdf) {
            console.log('PDF loaded');
            
            // Fetch the first page
            var pageNumber = 1;
            pdf.getPage(pageNumber).then(function(page) {
              console.log('Page loaded');
              
              var scale = 1.5;
              var viewport = page.getViewport({scale: scale});
              
              // Prepare canvas using PDF page dimensions
              var canvas = vm.$refs.pdfViewer;
              var context = canvas.getContext('2d');
              canvas.height = viewport.height;
              canvas.width = viewport.width;
              
              // Render PDF page into canvas context
              var renderContext = {
                canvasContext: context,
                viewport: viewport
              };
              var renderTask = page.render(renderContext);
              renderTask.promise.then(function () {
                console.log('Page rendered');
              });
            });
          }, function (reason) {
            // PDF loading error
            console.error(reason);
          });
        };
        fileReader.readAsArrayBuffer(file);
      }
    }
  }
}).$mount('#app')

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>