How to use PDF.js with vue 3 with distribution folder on local

Question

Please understand this, I am not allowed to use any vue liberary for previewing pdf, I can only use pure pdf.js and vue 3

• I am using pdf.js for displaying pdf file on my vue 3 project.
• I want to know how should I do folder stucturing of the project to make it work.
• Currently I am using cdnjs link of pdf.js, I want to use there

distribution folder

instead of cdnjs link.

• Here is my current implementation with there example provided on official website of pdf.js.

pdf-view.vue

<template>
  <canvas :id="`the-canvas${index}`" style="border: 1px solid"></canvas>
</template>

<script setup>
import { onMounted, defineProps } from 'vue'

const { file, index } = defineProps(['file', 'index'])

onMounted(() => {
  import('https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.mjs').then((pdfjsLib) => {
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.min.mjs'

    if (!file) return

    const fileReader = new FileReader()
    fileReader.onload = () => {
      const array = new Uint8Array(fileReader.result)
      const loadingTask = pdfjsLib.getDocument(array)
      loadingTask.promise.then(
        (pdf) => {
          const pageNumber = 1
          pdf.getPage(pageNumber).then((page) => {
            const scale = 1.5
            const viewport = page.getViewport({ scale })

            const canvas = document.getElementById(`the-canvas${index}`)
            const context = canvas.getContext('2d')
            canvas.height = viewport.height
            canvas.width = viewport.width

            // Render PDF page into canvas context
            const renderContext = {
              canvasContext: context,
              viewport: viewport
            }
            page.render(renderContext)
          })
        },
        (reason) => {
          // PDF loading error
          console.error(reason)
        }
      )
    }
    fileReader.readAsArrayBuffer(file)
  })
})
</script>

<style>

</style>

parent.vue

<template v-for="(file, index) in pdfFiles" :key="file">
            <pdfview :file="file.file" :index="index" />
</template>
<script setup>
import pdfview from '@/components/pdf-view/pdf-view.vue'
</script>

Current folder stucture

--Project
  -public
  -src
  --components
  ---pdf-view
  ----pdf-view.vue [component]
  ---views
  ----parent.vue [component]

Answer 1

Steps I performed which solved my problem.

• Install pdfjs-dist.

• npm install pdfjs-dist

• Second step this is something you have to do, if you get below error,

op-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

• It has to do with vite.config.js file.
• I found solution for that from this post. Add below code in your vite.config.js file.

build: {
    target: "es2022"
  },
  esbuild: {
    target: "es2022"
  },
  optimizeDeps:{
    esbuildOptions: {
      target: "es2022",
    }
  }

• Then you need to import file like this,

import * as pdfjsLib from "pdfjs-dist";
import * as pdfWorker from "pdfjs-dist/build/pdf.worker.mjs";

if you will not import second then you might get below error.

pdfWorker is not defined