Add the ability to set HTTP headers

src/components/PDFData.vue

@@ -8,10 +8,20 @@ const log = debug('app:components/PDFData');
 
 import range from 'lodash/range';
 
-function getDocument(url) {
-  // Using import statement in this way allows Webpack
-  // to treat pdf.js as an async dependency so we can
-  // avoid adding it to one of the main bundles
+function getDocument(url, httpHeaders) {
+
+    // Using import statement in this way allows Webpack
+    // to treat pdf.js as an async dependency so we can
+    // avoid adding it to one of the main bundles
+
+    if (httpHeaders) {
+        return import(
+            /* webpackChunkName: 'pdfjs-dist' */
+            'pdfjs-dist/webpack').then(pdfjs => pdfjs.getDocument({
+            url: url,
+            httpHeaders: httpHeaders,
+        }));
+    }
   return import(
     /* webpackChunkName: 'pdfjs-dist' */
     'pdfjs-dist/webpack').then(pdfjs => pdfjs.getDocument(url));
@@ -40,6 +50,10 @@ export default {
       type: String,
       required: true,
     },
+    httpHeaders: {
+      type: Object,
+      required: false,
+    },
   },
 
   data() {
@@ -51,7 +65,7 @@ export default {
   watch: {
     url: {
       handler(url) {
-        getDocument(url)
+        getDocument(url, this.httpHeaders)
           .then(pdf => (this.pdf = pdf))
           .catch(response => {
             this.$emit('document-errored', {text: 'Failed to retrieve PDF', response});

src/components/PDFDocument.vue

@@ -9,7 +9,7 @@
     @pages-reset="fitWidth"
     >
     <PDFPage
-      v-bind="{scale, optimalScale, page, isPageFocused, isElementFocused}"
+      v-bind="{scale, optimalScale, page, isPageFocused, isElementFocused, selections}"
       @page-rendered="onPageRendered"
       @page-errored="onPageErrored"
       @page-focus="onPageFocused"
@@ -60,6 +60,10 @@ export default {
     isPreviewEnabled: {
       default: false,
     },
+    selections: {
+      type: Array,
+      default: () => []
+    },
   },
 
   computed: {

src/components/PDFPage.vue

@@ -1,5 +1,8 @@
 <template>
-  <canvas v-visible.once="drawPage" v-bind="canvasAttrs"></canvas>
+  <div>
+    <canvas ref="canvas" v-visible.once="drawPage" v-bind="canvasAttrs"></canvas>
+    <div ref="textLayer" class="textLayer"></div>
+  </div>
 </template>
 
 <script>
@@ -8,6 +11,10 @@ const log = debug('app:components/PDFPage');
 
 import {PIXEL_RATIO} from '../utils/constants';
 import visible from '../directives/visible';
+import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'
+import {VIEWPORT_RATIO} from "../../../../../../pdf-viewer/utils/constants";
+import 'pdfjs-dist/web/pdf_viewer.css'
+import findAndReplaceDOMText from '../directives/findAndReplaceDOMText'
 
 export default {
   name: 'PDFPage',
@@ -33,6 +40,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    selections: {
+      type: Array,
+      default: () => []
+    }
   },
 
   directives: {
@@ -79,8 +90,9 @@ export default {
     drawPage() {
       if (this.renderTask) return;
 
+      const self = this;
       const {viewport} = this;
-      const canvasContext = this.$el.getContext('2d');
+      const canvasContext = this.$refs.canvas.getContext('2d');
       const renderContext = {canvasContext, viewport};
 
       // PDFPageProxy#render
@@ -101,6 +113,81 @@ export default {
             text: `Failed to render page ${this.pageNumber}`,
           });
         });
+
+      this.page.getTextContent().then((textContent) => {
+
+        // console.log(textContent);
+
+        // Set the layer position
+        const pdfCanvas = self.$refs.canvas;
+        const canvasTop = pdfCanvas.offsetTop;
+        const canvasLeft = pdfCanvas.offsetLeft;
+        const canvasHeight = pdfCanvas.offsetHeight;
+        const canvasWidth = pdfCanvas.offsetWidth;
+
+        const textLayerDiv = self.$refs.textLayer;
+        textLayerDiv.style.top = canvasTop + 'px';
+        textLayerDiv.style.left = canvasLeft + 'px';
+        textLayerDiv.style.width = canvasWidth + 'px';
+        textLayerDiv.style.height = canvasHeight + 'px';
+
+        // Scale text
+        const defaultViewport = self.page.getViewport(1);
+        const newScale = canvasWidth / (defaultViewport.width * VIEWPORT_RATIO);
+        const newViewport = self.page.getViewport(newScale);
+
+        // Create new instance of TextLayerBuilder class
+        const textLayer = new TextLayerBuilder({
+          textLayerDiv: self.$refs.textLayer,
+          pageIndex: self.page.pageIndex,
+          viewport: newViewport,
+          enhanceTextSelection: true,
+        });
+
+        // Set text-fragments
+        textLayer.setTextContent(textContent);
+
+        // Render text-fragments
+        textLayer.render();
+
+        // Highlight text
+        if (self.selections.length > 0) {
+
+          const observer = new MutationObserver(function (mutations) {
+
+            if (self.$refs.textLayer.children.length > 0) {
+
+              for (let i=0; i<self.selections.length; i++) {
+                if (self.page.pageNumber === self.selections[i].page) {
+
+                  const color = self.selections[i].color;
+                  const selection = self.selections[i].text
+                          .replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+                          .replace(/(\r\n|\n|\r|\s|[\u00a0])+/g, '(\\r\\n|\\n|\\r|\\s|[\\u00a0])+');
+                  const wrapClass = 'css' + color.replace('#', '-');
+
+                  findAndReplaceDOMText(self.$refs.textLayer, {
+                    find: new RegExp(selection, 'gi'),
+                    wrap: 'em',
+                    wrapClass: wrapClass,
+                  });
+
+                  $('.' + wrapClass).css('background-color', color);
+                }
+              }
+
+              observer.disconnect();
+            }
+          });
+
+          observer.observe(self.$refs.textLayer, {
+            attributes: false,
+            childList: true,
+            characterData: false,
+            subtree: true
+          });
+        }
+      });
     },
 
     updateVisibility() {

src/components/PDFViewer.vue

@@ -24,6 +24,7 @@
     <PDFData
       class="pdf-viewer__main"
       :url="url"
+      :httpHeaders="httpHeaders"
       @page-count="updatePageCount"
       @page-focus="updateCurrentPage"
       @document-rendered="onDocumentRendered"
@@ -41,7 +42,7 @@
         <PDFDocument
           class="pdf-viewer__document"
           :class="{ 'preview-enabled': isPreviewEnabled }"
-          v-bind="{pages, scale, optimalScale, fit, currentPage, pageCount, isPreviewEnabled}"
+          v-bind="{pages, scale, optimalScale, fit, currentPage, pageCount, isPreviewEnabled, selections}"
           @scale-change="updateScale"
           />
       </template>
@@ -77,6 +78,11 @@ export default {
 
   props: {
     url: String,
+    httpHeaders: Object,
+    selections: {
+      type: Array,
+      default: () => []
+    },
   },
 
   data() {