webviewer-vue-sample
webviewer-vue-sample copied to clipboard
Nuxt support
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¬esInLeftPanel=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](https://user-images.githubusercontent.com/1735944/227103690-cca755d7-4c26-42e5-ac69-5f2f049a64b1.png)
![Screenshot 2023-03-23 at 01 32 16](https://user-images.githubusercontent.com/1735944/227103780-9c9decba-f8d1-44d5-92ac-f8014120cf3f.png)