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.
I am using pdf.js
for displaying pdf file on my vue 3
project.
I want to know how should I do folder structuring 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 structure:
--Project
-public
-src
--components
---pdf-view
----pdf-view.vue [component]
---views
----parent.vue [component]
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)
vite.config.js
file.vite.config.js
file.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