PDF.js Text selection

With version 2.2.2

by kingliam

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf_viewer.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf_viewer.js"></script>

<h1>PDF.js Text Selection Example</h1>

<div id="pdf-wrapper"></div>

CSS

#pdf-wrapper {
  border: 1px solid black;
  position: relative;
}

JavaScript

/* https://github.com/mozilla/pdf.js/blob/master/examples/components/pageviewer.js */

const pdfjsLib = window['pdfjs-dist/build/pdf'];

// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.min.js';

const url = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
const pageNumber = 1;
const scale = 1.0;

const container = document.querySelector('#pdf-wrapper');

// Loading document.
const loadingTask = pdfjsLib.getDocument({ url });

loadingTask.promise.then(function(pdfDocument) {
  // Document loaded, retrieving the page.
  return pdfDocument.getPage(pageNumber).then(function (pdfPage) {
    // Creating the page view with default parameters.
    const pdfPageView = new pdfjsViewer.PDFPageView({
      container: container,
      id: pageNumber,
      scale,
      defaultViewport: pdfPage.getViewport({ scale }),

			// Enable text/annotations layers, if needed
      textLayerFactory: new pdfjsViewer.DefaultTextLayerFactory(),
      annotationLayerFactory: new pdfjsViewer.DefaultAnnotationLayerFactory(),
    });
    // Associates the actual page with the view, and drawing it
    pdfPageView.setPdfPage(pdfPage);
    return pdfPageView.draw();
  });
});