How to use pdfjs-dist in vue cli typescript project?

Question

I'm having issues getting pdfjs-dist working in a vue typescript cli project.

• As soon as I try to use the pdfjs-dist I get this error
• As far as I can guess it's an issue with my vue.config.js Or something else.
• I'm struggling to progress past this point and haven't seen many examples with vue cli and webpack. There are some webpack rules people have posted, but I wasn't getting much progress on them.

Module parse failed: Unexpected token (2205:45)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         intent: renderingIntent,
|         renderInteractiveForms: renderInteractiveForms === true,
>         annotationStorage: annotationStorage?.serializable || null
|       });
|     }

Example

• package.json

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "watch": "vue-cli-service build --mode development --watch"
  },
  "dependencies": {
     "@types/pdfjs-dist": "^2.7.4",
      "pdfjs-dist": "^2.8.335",
  }

}

• component

<template>
  <div class="pdfviewer">
    <canvas id="pdfPage"></canvas>
    <div class="textLayer" id="text-layer"></div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

import * as PDFJS from "pdfjs-dist";

export default Vue.extend({
  name: "PdfViewer",
  props: { pdfBase64: String },
  methods: {
    base64ToUint8Array(base64: string) {
      const raw = atob(base64); // convert base 64 string to raw string
      const uint8Array = new Uint8Array(raw.length);
      for (let i = 0; i < raw.length; i++) {
        uint8Array[i] = raw.charCodeAt(i);
      }
      return uint8Array;
    },
    async getPdf() {
        const container = document.getElementById("pdfPage");
        let pdfData = this.base64ToUint8Array(this.pdfBase64);
        pdfData = pdfData.replace("data:application/pdf;base64,", "");
        const loadingTask = PDFJS.getDocument(pdfData);
        loadingTask.promise.then(function(pdf) {
            const pageRetrieved = pdf.getPage(1);
            pageRetrieved.then(function(page) {
                const scale: any = 1;
                const viewport = page.getViewport(scale);
                const canvas = document.getElementById("pdfPage") as HTMLCanvasElement;
                if (canvas) {
                const context = canvas.getContext("2d");
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                page.render({ canvasContext: context as any, viewport: viewport });
                }
            });
        })
    }
  },
  mounted() {
    // load pdf into canvas
    this.getPdf()
  }
});
</script>

Answer 1

Seems to be the only issue I had was the current version I was using "pdfjs-dist": "2.0.943" Seems to work just fine. I've now changed it to 2.3.200. Which is the most recent one working with this setting. Also text alignment works on this.

Notes on versions

• Must change PDFJS.GlobalWorkerOptions.workerSrc ="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/build/pdf.worker.min.js"; to match version imported
• 2.0.943 started at all the way to 2.3.200
• 2.5.207 won't fail to build, but fails to render the pdf in the canvas
• 2.7.570 onward fails to build w/ the error mentioned above. I suspect I need some webpack change in vue.config.js

I also had to add a watch

watch: {
    src: function(newValue: string | null, oldValue: string | null) {
      console.log("src update");
      console.log(`Updating from`);
      console.log(oldValue);
      console.log(`to`);
      console.log(newValue);
      // TODO: if empty clear canvas
      this.getPdf();
    }
  },

text layer

const txtLayer = document.getElementById(
      "text-layer"
) as HTMLDivElement;
txtLayer.style.height = viewport.height + "px";
txtLayer.style.width = viewport.height + "px";
txtLayer.style.top = canvas.offsetTop + "px";
txtLayer.style.left = canvas.offsetLeft + "px";

page.render({
    canvasContext: context as any,
    viewport: viewport
});

page.getTextContent().then(function(textContent) {
    console.log(textContent);
    PDFJS.renderTextLayer({
      textContent: textContent,
      container: txtLayer,
      viewport: viewport
    });
});