webviewer-vue-sample icon indicating copy to clipboard operation
webviewer-vue-sample copied to clipboard

Nuxt support

Open CavalcanteLeo opened this issue 1 year ago • 0 comments

I'm trying to use with nuxt 3, but I'm facing this error:

Failed to launch 'localhost:3000/webviewer/./ui/index.html#d=%22https%3A%2F%2Fpdftron.s3.amazonaws.com%2Fdownloads%2Fpl%2Fdemo-annotated.pdf%22&a=1&filepicker=0&pdfnet=0&enableRedaction=0&disableVirtualDisplayMode=0&enableMeasurement=0&pageHistory=1&notesInLeftPanel=0&autoExpandOutlines=0&enableAnnotationNumbering=0&singleServerMode=false&selectAnnotationOnCreation=0&autoFocusNoteOnAnnotationSelection=1&id=1&basePath=%2F&webViewerJSVersion=8.12.0' because the scheme does not have a registered handler.

component PdfViewer.client.vue:

<script lang="ts" setup>
import WebViewer from '@pdftron/webviewer'

const viewer = ref<HTMLDivElement | null>(null)

onMounted(() => {

})

const initPdfViewer = (viewer: HTMLDivElement) => {
 const path = `${window.location.host}/webviewer`

  WebViewer({ path, initialDoc: props.doc }, viewer).then(
    (instance) => {
      const { documentViewer, annotationManager, Annotations } = instance.Core


      documentViewer.addEventListener('documentLoaded', () => {
        const rectangleAnnot = new Annotations.RectangleAnnotation({
          PageNumber: 1,
          // values are in page coordinates with (0, 0) in the top left
          X: 100,
          Y: 150,
          Width: 200,
          Height: 50,
          Author: annotationManager.getCurrentUser(),
        })
        annotationManager.addAnnotation(rectangleAnnot)
        annotationManager.redrawAnnotation(rectangleAnnot)
      })
    }
  )
}

defineExpose({ viewer })

watchEffect(() => {
  if (viewer.value) {
    initPdfViewer(viewer.value)
  }
})

const props = defineProps({
  doc: {
    type: String,
    required: true,
    default: '',
  },
})

</script>

<template>
  <div>
    <div class="h-screen pdf" ref="viewer"></div>
  </div>
</template>

Screenshot 2023-03-23 at 01 31 29 Screenshot 2023-03-23 at 01 32 16

CavalcanteLeo avatar Mar 23 '23 04:03 CavalcanteLeo