4

The question is simple. How do I correctly import the PDF.js library into a Vuejs project?

The library is undefined when I log it.

See my problem in a codesandbox live here.

This is how I am trying it now:

<script>
import pdfjsLib from "pdfjs-dist/build/pdf";
// import { PDFViewer } from "pdfjs-dist/web/pdf_viewer";
import "pdfjs-dist/web/pdf_viewer.css";

pdfjsLib.GlobalWorkerOptions.workerSrc =
  "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.worker.min.js";

export default {
  name: "PdfViewer",
  mounted() {
    pdfjsLib.getDocument("./sample.pdf").then((doc) => {
      console.log("doc: ", doc);
    });
  },
  methods: {},
};
</script>

But that gives me the following error: Cannot read property 'GlobalWorkerOptions' of undefined

Reinier68
  • 2,450
  • 1
  • 23
  • 47

4 Answers4

3

I think the error occurs if pdfjsLib does not fall into the global scope , see also codesandbox :

<template>
  <div id="pageContainer">
    <div id="viewer" class="pdfViewer"></div>
  </div>
</template>

<script>
import pdfjsLib from "pdfjs-dist/build/pdf";
import { PDFViewer } from "pdfjs-dist/web/pdf_viewer";
import "pdfjs-dist/web/pdf_viewer.css";

pdfjsLib.GlobalWorkerOptions.workerSrc =
  "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.worker.min.js";

export default {
  name: "PdfViewer",
  props: { docPath: String },
  mounted() {
    this.getPdf();
  },
  methods: {
    async getPdf() {
      let container = document.getElementById("pageContainer");
      let pdfViewer = new PDFViewer({
        container: container,
      });
      let pdf = await pdfjsLib.getDocument(this.docPath);
      pdfViewer.setDocument(pdf);
    },
  },
};
</script>

<style>
#pageContainer {
  margin: auto;
  width: 80%;
}

div.page {
  display: inline-block;
}
</style>

use it:

<PdfViewer docPath="./sample.pdf" />
Daniil Loban
  • 4,165
  • 1
  • 14
  • 20
  • `Parsing error: Identifier 'pdfjsLib' has already been declared` :(. I was referred to this document regarding importing the library, since it has changed recently: https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld.html . But that doesn't seem to be working for me and I don't know why. – Reinier68 Jan 16 '21 at 14:31
  • yes you can not use same var name if it was imported – Daniil Loban Jan 16 '21 at 14:36
  • this live example page: https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples – Daniil Loban Jan 16 '21 at 14:37
  • I tried with `var pdfjsLib2 = window["pdfjs-dist/build/pdf"]; pdfjsLib2.GlobalWorkerOptions.workerSrc = "...url";`, but that didnt work also. – Reinier68 Jan 16 '21 at 14:37
  • check that your import works properly (pdfjsLib is not undefined) – Daniil Loban Jan 16 '21 at 14:39
  • but better remove the import and use `script` tag `` – Daniil Loban Jan 16 '21 at 14:42
  • The lib is undefined when I log it... You can't use script tags in Vuejs as far as I know. Or it has to be added with javascript code in the `created()` hook. See here a reproduction of my problem: https://codesandbox.io/s/magical-volhard-rnc3n?file=/src/components/PdfReader.vue:160-199 – Reinier68 Jan 16 '21 at 14:47
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/227412/discussion-between-daniil-loban-and-reinier68). – Daniil Loban Jan 16 '21 at 14:53
  • if this was solved in the chat discussion.. could you please post the solution? @DaniilLoban – syats Mar 15 '21 at 18:21
  • 1
    @syats I downgraded to `2.0.943` and it worked. Here is the example https://codesandbox.io/s/laughing-frog-llble?file=/src/components/PdfReader.vue:679-687 – Umair Ahmed Apr 03 '21 at 15:46
2

In case anyone else needs it, the soution is really simple. You just have to import it like this:

import * as pdfjsLib from "pdfjs-dist/build/pdf";
Filip
  • 855
  • 2
  • 18
  • 38
1

Pdf.js provide a solution for us. Webpack.js included in the project.

const pdfjsLib = require("pdfjs-dist/webpack");

If you get an error like below:

./node_modules/pdfjs-dist/build/pdf.min.js 22:36927
Module parse failed: Unexpected token (22:36927)

Then we have to use es5/build/pdf.js, so we can create src/pdfjs-webpack.js :

"use strict";

var pdfjs = require("pdfjs-dist/es5/build/pdf.min.js");
var PdfjsWorker = require("worker-loader?esModule=false&filename=[name].js!pdfjs-dist/es5/build/pdf.worker.min.js");

if (typeof window !== "undefined" && "Worker" in window) {
  pdfjs.GlobalWorkerOptions.workerPort = new PdfjsWorker();
}

module.exports = pdfjs;

then:

const pdfjsLib = require("../pdfjs-webpack");
NKSM
  • 5,422
  • 4
  • 25
  • 38
1

vue-cli5 already use webpack5, and webpack5 has a built-in web worker and is very easy to use.

Create a file: pdfjs-webpack5.js

import * as pdfjsLib from 'pdfjs-dist'

pdfjsLib.GlobalWorkerOptions.workerPort = new Worker(new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url))

export default pdfjsLib

According to the example getinfo.js given in Setup PDF.js in a website, you can easily read the contents of PDF files.

I use the version of the package.

pdfjs-dist: 2.15.349
webpack: 5.74.0
@vue/cli*: 5.0.8
CongAn-王从安
  • 11
  • 3