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

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
});
});