Skip to content

Commit 2168d76

Browse files
tuttarealsteptuttarealstep
committed
Playground viewer to ClientOnly component
1 parent 0736225 commit 2168d76

File tree

2 files changed

+92
-78
lines changed

2 files changed

+92
-78
lines changed

‎docs/components/PdfViewer.vue

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<script setup lang="ts">
2+
import { reactive, useTemplateRef, ref, watchEffect } from 'vue'
3+
import { VuePDFjs } from '../../packages/vue'
4+
import '../../packages/vue/dist/style.css'
5+
import enUS_FTL from '../../packages/vue/dist/l10n/en-US/viewer.ftl?raw'
6+
import type { VuePDFjsProps } from '../../packages/vue/dist/src/components/VuePDFjs.vue';
7+
8+
const vuepdfjs = useTemplateRef<typeof VuePDFjs>('vuepdfjs')
9+
10+
const pages = ref(0);
11+
const hideToolbar = ref(false);
12+
const hideSidebar = ref(false);
13+
14+
const options = reactive<NonNullable<VuePDFjsProps['options']>>({
15+
locale: {
16+
code: 'en-US',
17+
ftl: enUS_FTL
18+
},
19+
toolbar: {
20+
visible: true,
21+
options: {
22+
sidebarToggle: true,
23+
}
24+
},
25+
sidebar: {
26+
visible: true
27+
}
28+
})
29+
30+
watchEffect(() => {
31+
if (options.toolbar) {
32+
options.toolbar.visible = !hideToolbar.value
33+
options.toolbar.options = {
34+
...options.toolbar.options,
35+
sidebarToggle: !hideSidebar.value
36+
}
37+
}
38+
39+
if (options.sidebar) {
40+
options.sidebar.visible = !hideSidebar.value
41+
}
42+
})
43+
44+
const onPdfAppLoaded = () => {
45+
console.log('pdf-app:loaded')
46+
console.log(vuepdfjs.value?.pdfApp)
47+
48+
if (!vuepdfjs.value?.pdfApp) {
49+
return
50+
}
51+
52+
vuepdfjs.value.pdfApp.eventBus.on('pagesloaded', (e: {
53+
source: any, pagesCount: number
54+
}) => {
55+
vuepdfjs.value?.pdfApp.eventBus.dispatch('find', {
56+
query: ['Dynamic languages such as JavaScript are more difficult to compile than statically typed ones.'],
57+
caseSensitive: false,
58+
entireWord: false,
59+
highlightAll: true
60+
})
61+
62+
//Set the number of pages in the ref
63+
pages.value = e.pagesCount
64+
})
65+
}
66+
67+
const pdf = 'https://raw.githubusercontent.com/mozilla/pdf.js/v4.9.124/web/compressed.tracemonkey-pldi-09.pdf'
68+
</script>
69+
70+
<template>
71+
We have {{ pages }} pages in this document.
72+
73+
<div>
74+
<input type="checkbox" v-model="hideToolbar" /> Hide Toolbar
75+
<input type="checkbox" v-model="hideSidebar" /> Hide Sidebar
76+
</div>
77+
<VuePDFjs ref="vuepdfjs" :source="pdf" :options="options" @pdf-app:loaded="onPdfAppLoaded" />
78+
</template>
79+
80+
<style>
81+
.pdf_viewer {
82+
height: 650px;
83+
width: 100%;
84+
overflow: hidden;
85+
display: flex;
86+
flex-direction: column;
87+
}
88+
</style>

‎docs/playground.md

Lines changed: 4 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,19 @@
11
<script setup lang="ts">
2-
import { reactive, useTemplateRef, ref, watchEffect } from 'vue'
3-
import { VuePDFjs, usePDF } from '../packages/vue'
4-
import '../packages/vue/dist/style.css'
5-
import enUS_FTL from '../packages/vue/dist/l10n/en-US/viewer.ftl?raw'
6-
import type { VuePDFjsProps } from '../packages/vue/dist/src/components/VuePDFjs.vue';
2+
import { defineClientComponent } from 'vitepress'
73

8-
const vuepdfjs = useTemplateRef<typeof VuePDFjs>('vuepdfjs')
9-
10-
const pages = ref(0);
11-
const hideToolbar = ref(false);
12-
const hideSidebar = ref(false);
13-
14-
const options = reactive<NonNullable<VuePDFjsProps['options']>>({
15-
locale: {
16-
code: 'en-US',
17-
ftl: enUS_FTL
18-
},
19-
toolbar: {
20-
visible: true,
21-
options: {
22-
sidebarToggle: true,
23-
}
24-
},
25-
sidebar: {
26-
visible: true
27-
}
28-
})
29-
30-
watchEffect(() => {
31-
if(options.toolbar) {
32-
options.toolbar.visible = !hideToolbar.value
33-
options.toolbar.options = {
34-
...options.toolbar.options,
35-
sidebarToggle: !hideSidebar.value
36-
}
37-
}
38-
39-
if(options.sidebar) {
40-
options.sidebar.visible = !hideSidebar.value
41-
}
4+
const PdfComp = defineClientComponent(() => {
5+
return import("./components/PdfViewer.vue")
426
})
43-
44-
const onPdfAppLoaded = () => {
45-
console.log('pdf-app:loaded')
46-
console.log(vuepdfjs.value?.pdfApp)
47-
48-
if (!vuepdfjs.value?.pdfApp) {
49-
return
50-
}
51-
52-
vuepdfjs.value.pdfApp.eventBus.on('pagesloaded', (e: {
53-
source: PDFViewer, pagesCount: number
54-
}) => {
55-
vuepdfjs.value?.pdfApp.eventBus.dispatch('find', {
56-
query: ['Dynamic languages such as JavaScript are more difficult to compile than statically typed ones.'],
57-
caseSensitive: false,
58-
entireWord: false,
59-
highlightAll: true
60-
})
61-
62-
//Set the number of pages in the ref
63-
pages.value = e.pagesCount
64-
})
65-
}
66-
67-
const pdf = 'https://raw.githubusercontent.com/mozilla/pdf.js/v4.9.124/web/compressed.tracemonkey-pldi-09.pdf'
687
</script>
698

709
# Playground
7110

72-
We have {{ pages }} pages in this document.
73-
74-
<div>
75-
<input type="checkbox" v-model="hideToolbar" /> Hide Toolbar
76-
<input type="checkbox" v-model="hideSidebar" /> Hide Sidebar
77-
</div>
78-
7911
<div class="pdf_viewer">
80-
<VuePDFjs ref="vuepdfjs" :source="pdf" :options="options" @pdf-app:loaded="onPdfAppLoaded" />
12+
<PdfComp />
8113
</div>
8214

8315
<style>
8416
._vue-pdf_js_playground > div {
8517
width: 100%;
8618
}
87-
88-
.pdf_viewer {
89-
height: 650px;
90-
width: 100%;
91-
overflow: hidden;
92-
}
9319
</style>

0 commit comments

Comments
 (0)