Open Lysom opened 3 years ago
Which version of pdfvuer are you using?
latest and vue3
latest and vue3
sorry, the next
any update?
Same here using @next and vue 3.0.5.
any updates?
The question maybe cased by vite.
Any updates? I can't find any pdf viewer library working with vite+vue3...
Same here
I found https://github.com/hrynko/vue-pdf-embed that works for my case.
Any updates?
hello, any update on this issue?
So this package doesn't work with Vite
This is the upstream issue in pdfjs: https://github.com/mozilla/pdf.js/issues/10317
https://github.com/hrynko/vue-pdf-embed looks like a good alternative that doesn't have this issue, but lacks the zoom/scale feature.
I think the solution vue-pdf-embed uses could be applied here: make pdfjs built-in so that it's not installed & imported as another dependency in projects that use pdfvuer.
I'm using nuxt 3, and vue-pdf-embed doesn't work on nuxt 3, is there any alternative?
God damn it @akbarism maybe try reading what's been posted already, before adding noise to the issue. The answer to your question is already posted.
Hello guys. I had same issue, and was looking for solution... I ended up using different library, which is still based on the pdf.js but has a little different setup, using composable function. I figured out how to solve the issue. It works, looks a little bit hacky tho...
So I used https://github.com/TaTo30/VuePDF as an alternative, but the trick was in defining following plugin which is loaded only on client, within which pdf.js loaded (in this particular library its within usePDF
)
import { VuePDF, usePDF } from "@tato30/vue-pdf";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component("VuePDF", VuePDF);
return {
provide: {
usePDF,
},
};
});
So it feels weird to provide composable within plugin, but at the end composable is just a function. Here is an example component how to use it - in my library I first open my modal window with loading notice, and the URL of PDF is fetched dynamically, so I had to listen to URL changes.
<template>
<div class="text-2xl min-h-[80vh] flex items-center justify-center text-center" v-if="pages === 0">
Loading PDF Document...
</div>
<div class="space-y-6" v-else>
<VuePDF
:pdf="pdf"
:page="page"
:scale="scale"
v-for="page in pages"
:key="page"
class="justify-center"
:text-layer="true"
/>
</div>
</template>
<script setup lang="ts">
const props = withDefaults(
defineProps<{
url?: string;
scale?: number;
}>(),
{}
);
const { $usePDF } = useNuxtApp();
let pdf = ref();
let pages = ref(0);
let info = ref();
watch(
() => props.url,
() => {
if (!props.url) {
return;
}
const { pdf: _pdf, pages: _pages, info: _info } = $usePDF(props.url, {});
pdf = _pdf;
pages = _pages;
info = _info;
},
{ immediate: true }
);
</script>
Maybe you could figure out how to setup it with pdfvuer
when I use pdfVuer, there is an issue 'SyntaxError: The requested module '/node_modules/_pdfjs-dist@2.5.207@pdfjs-dist/web/pdf_viewer.js?v=0ddebc6b' does not provide an export named 'DefaultAnnotationLayerFactory'