javascriptvue.jspdfvuejs3pdf.js

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


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

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 structure:

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

Solution

  • Steps I performed which solved my problem.

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

    build: {
        target: "es2022"
      },
      esbuild: {
        target: "es2022"
      },
      optimizeDeps:{
        esbuildOptions: {
          target: "es2022",
        }
      }
    
    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