arkokoley / pdfvuer

A PDF viewer for Vue using Mozilla's PDF.js that supports both Vue2 and Vue3
https://arkokoley.github.io/pdfvuer
MIT License
918 stars 131 forks source link

does not provide an export named 'DefaultAnnotationLayerFactory' #106

Open Lysom opened 3 years ago

Lysom commented 3 years ago

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'

arkokoley commented 2 years ago

Which version of pdfvuer are you using?

t-sinbo commented 2 years ago

latest and vue3

t-sinbo commented 2 years ago

latest and vue3

sorry, the next

ddo commented 2 years ago

any update?

lffv commented 2 years ago

Same here using @next and vue 3.0.5.

any updates?

t-sinbo commented 2 years ago

The question maybe cased by vite.

songkeys commented 2 years ago

Any updates? I can't find any pdf viewer library working with vite+vue3...

phcreery commented 2 years ago

Same here

phcreery commented 2 years ago

I found https://github.com/hrynko/vue-pdf-embed that works for my case.

PetalsOnaWet commented 2 years ago

Any updates?

adesr commented 2 years ago

hello, any update on this issue?

zenflow commented 2 years ago

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.

akbarism commented 1 year ago

I'm using nuxt 3, and vue-pdf-embed doesn't work on nuxt 3, is there any alternative?

zenflow commented 1 year ago

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.

LorDeCry commented 1 year ago

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