Skip to content

Commit c2b88db

Browse files
ThariqAliThariqAli
committed
UG-1008903-Validate and resolve the issues in the documentation for the Vue platform
1 parent 183e31a commit c2b88db

9 files changed

Lines changed: 63 additions & 70 deletions

File tree

‎Document-Processing/PDF/PDF-Viewer/vue/annotation/free-text-annotation.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,9 @@ import {
4545
BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
4646
TextSearch, FormFields, FormDesigner, PageOrganizer
4747
} from '@syncfusion/ej2-vue-pdfviewer';
48-
import { provide } from 'vue';
48+
import { provide, ref } from 'vue';
4949

50+
const pdfviewer = ref(null);
5051
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
5152
const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
5253

@@ -55,7 +56,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
5556

5657
const documentLoad = () => {
5758
document.getElementById('set').addEventListener('click', () => {
58-
this.$refs.pdfviewer.ej2Instances.annotation.setAnnotationMode('FreeText');
59+
pdfviewer.value.ej2Instances.annotation.setAnnotationMode('FreeText');
5960
});
6061
}
6162

@@ -125,8 +126,9 @@ import {
125126
BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
126127
TextSearch, FormFields, FormDesigner, PageOrganizer
127128
} from '@syncfusion/ej2-vue-pdfviewer';
128-
import { provide } from 'vue';
129+
import { provide, ref } from 'vue';
129130

131+
const pdfviewer = ref(null);
130132
const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
131133
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
132134

@@ -135,7 +137,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
135137

136138
const documentLoad = () => {
137139
document.getElementById('set').addEventListener('click', () => {
138-
this.$refs.pdfviewer.ej2Instances.annotation.setAnnotationMode('FreeText');
140+
pdfviewer.value.ej2Instances.annotation.setAnnotationMode('FreeText');
139141
});
140142
}
141143

‎Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md‎

Lines changed: 2 additions & 2 deletions
Large diffs are not rendered by default.

‎Document-Processing/PDF/PDF-Viewer/vue/annotation/signature-annotation.md‎

Lines changed: 10 additions & 10 deletions
Large diffs are not rendered by default.

‎Document-Processing/PDF/PDF-Viewer/vue/annotation/stamp-annotation.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ The following examples switch to stamp annotation modes.
5555
import {
5656
PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
5757
BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
58-
TextSearch, FormFields, FormDesigner, PageOrganizer
58+
TextSearch, FormFields, FormDesigner, PageOrganizer, SignStampItem
5959
} from '@syncfusion/ej2-vue-pdfviewer';
6060
import { provide, ref } from 'vue';
6161

@@ -91,7 +91,7 @@ const documentLoad = () => {
9191
import {
9292
PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
9393
BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
94-
TextSearch, FormFields, FormDesigner, PageOrganizer
94+
TextSearch, FormFields, FormDesigner, PageOrganizer, SignStampItem
9595
} from '@syncfusion/ej2-vue-pdfviewer';
9696

9797
export default {
@@ -137,7 +137,7 @@ export default {
137137
import {
138138
PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
139139
BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
140-
TextSearch, FormFields, FormDesigner, PageOrganizer
140+
TextSearch, FormFields, FormDesigner, PageOrganizer, SignStampItem
141141
} from '@syncfusion/ej2-vue-pdfviewer';
142142
import { provide, ref } from 'vue';
143143

@@ -174,7 +174,7 @@ const documentLoad = () => {
174174
import {
175175
PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
176176
BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
177-
TextSearch, FormFields, FormDesigner, PageOrganizer
177+
TextSearch, FormFields, FormDesigner, PageOrganizer, SignStampItem
178178
} from '@syncfusion/ej2-vue-pdfviewer';
179179

180180
export default {

‎Document-Processing/PDF/PDF-Viewer/vue/annotation/sticky-notes-annotation.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ const addAnnotation = function () {
159159
</script>
160160

161161
{% endhighlight %}
162-
{% highlight html tabtitle="Server-Backed" %}
162+
{% highlight html tabtitle="Options API (Server-Backed)" %}
163163

164164
<template>
165165
<div id="app">
@@ -254,7 +254,7 @@ const editAnnotation = function () {
254254
</script>
255255

256256
{% endhighlight %}
257-
{% highlight html tabtitle="Standalone" %}
257+
{% highlight html tabtitle="Options API (Standalone)" %}
258258

259259
<template>
260260
<div id="app">

‎Document-Processing/PDF/PDF-Viewer/vue/annotation/text-markup-annotation.md‎

Lines changed: 34 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
239239
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
240240

241241
const documentLoad = () => {
242-
const viewer = this.$refs.pdfviewer.ej2Instances;
242+
const viewer = pdfviewer.value.ej2Instances;
243243
document.getElementById('set').addEventListener('click', () => {
244244
viewer.annotation.setAnnotationMode('Highlight');
245245
});
@@ -329,7 +329,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
329329
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
330330

331331
const documentLoad = () => {
332-
const viewer = this.$refs.pdfviewer.ej2Instances;
332+
const viewer = pdfviewer.value.ej2Instances;
333333
document.getElementById('set').addEventListener('click', () => {
334334
viewer.annotation.setAnnotationMode('Highlight');
335335
});
@@ -425,7 +425,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
425425
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
426426

427427
const addAnnotation = function () {
428-
const viewer = this.$refs.pdfviewer.ej2Instances;
428+
const viewer = pdfviewer.value.ej2Instances;
429429
viewer.annotation.addAnnotation("Highlight", {
430430
bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
431431
pageNumber: 1
@@ -947,7 +947,7 @@ Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion
947947
Example:
948948

949949
{% tabs %}
950-
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
950+
{% highlight html tabtitle="Composition API (Standalone)" %}
951951

952952
<template>
953953
<div id="app">
@@ -983,7 +983,7 @@ const addAnnotation = function () {
983983
</script>
984984

985985
{% endhighlight %}
986-
{% highlight html tabtitle="Standalone" %}
986+
{% highlight html tabtitle="Options API (Standalone)" %}
987987

988988
<template>
989989
<div id="app">
@@ -1162,7 +1162,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
11621162
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
11631163

11641164
const documentLoad = () => {
1165-
const viewer = this.$refs.pdfviewer.ej2Instances;
1165+
const viewer = pdfviewer.value.ej2Instances;
11661166
document.getElementById('set').addEventListener('click', () => {
11671167
viewer.annotation.setAnnotationMode('Strikethrough');
11681168
});
@@ -1216,7 +1216,7 @@ export default {
12161216
</script>
12171217

12181218
{% endhighlight %}
1219-
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
1219+
{% highlight html tabtitle="Composition API (Server-Backed)" %}
12201220

12211221
<template>
12221222
<div id="app">
@@ -1686,7 +1686,7 @@ In the pan mode, if the squiggly mode is entered, the PDF Viewer control will sw
16861686
Refer to the following code snippet to switch to squiggly mode.
16871687

16881688
{% tabs %}
1689-
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
1689+
{% highlight html tabtitle="Composition API (Standalone)" %}
16901690

16911691
<template>
16921692
<div id="app">
@@ -1713,7 +1713,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
17131713
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
17141714

17151715
const documentLoad = () => {
1716-
const viewer = this.$refs.pdfviewer.ej2Instances;
1716+
const viewer = pdfviewer.value.ej2Instances;
17171717
document.getElementById('set').addEventListener('click', () => {
17181718
viewer.annotation.setAnnotationMode('Squiggly');
17191719
});
@@ -1767,7 +1767,7 @@ export default {
17671767
</script>
17681768

17691769
{% endhighlight %}
1770-
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
1770+
{% highlight html tabtitle="Composition API (Server-Backed)" %}
17711771

17721772
<template>
17731773
<div id="app">
@@ -2426,45 +2426,35 @@ Refer to the following code snippet for calling undo and redo actions from the c
24262426
<button id="undo">Undo</button>
24272427
<button id="redo">Redo</button>
24282428
<ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl"
2429-
:documentLoad="documentLoad">
2429+
:documentLoad="documentLoad" :style="{ height: '800px', width: '1200px' }">
24302430
</ejs-pdfviewer>
24312431
</div>
24322432
</template>
24332433

24342434
<script setup>
24352435

24362436
import {
2437-
PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
2437+
PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
24382438
BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
24392439
TextSearch, FormFields, FormDesigner, PageOrganizer
24402440
} from '@syncfusion/ej2-vue-pdfviewer';
2441+
import { provide, ref } from 'vue';
24412442

2442-
export default {
2443-
name: "App",
2444-
components: {
2445-
"ejs-pdfviewer": PdfViewerComponent
2446-
},
2447-
data() {
2448-
return {
2449-
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
2450-
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
2451-
};
2452-
},
2453-
provide: {
2454-
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
2455-
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer]
2456-
},
2457-
methods: {
2458-
documentLoad() {
2459-
viewer = this.$refs.pdfviewer.ej2Instances;
2460-
document.getElementById('undo').addEventListener('click', () => {
2461-
viewer.undo();
2462-
});
2463-
document.getElementById('redo').addEventListener('click', () => {
2464-
viewer.redo();
2465-
});
2466-
}
2467-
}
2443+
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
2444+
const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
2445+
const pdfviewer = ref(null);
2446+
2447+
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
2448+
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
2449+
2450+
const documentLoad = function () {
2451+
const viewer = pdfviewer.value.ej2Instances;
2452+
document.getElementById('undo').addEventListener('click', () => {
2453+
viewer.undo();
2454+
});
2455+
document.getElementById('redo').addEventListener('click', () => {
2456+
viewer.redo();
2457+
});
24682458
}
24692459
</script>
24702460

@@ -2506,7 +2496,7 @@ export default {
25062496
},
25072497
methods: {
25082498
documentLoad() {
2509-
viewer = this.$refs.pdfviewer.ej2Instances;
2499+
const viewer = this.$refs.pdfviewer.ej2Instances;
25102500
document.getElementById('undo').addEventListener('click', () => {
25112501
viewer.undo();
25122502
});
@@ -2519,7 +2509,7 @@ export default {
25192509
</script>
25202510

25212511
{% endhighlight %}
2522-
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
2512+
{% highlight html tabtitle="Composition API (Server-Backed)" %}
25232513

25242514
<template>
25252515
<div id="app">
@@ -2538,16 +2528,17 @@ import {
25382528
BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
25392529
TextSearch, FormFields, FormDesigner, PageOrganizer
25402530
} from '@syncfusion/ej2-vue-pdfviewer';
2541-
import { provide } from 'vue';
2531+
import { provide, ref } from 'vue';
25422532

25432533
const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
25442534
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
2535+
const pdfviewer = ref(null);
25452536

25462537
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
25472538
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
25482539

25492540
const documentLoad = function () {
2550-
const viewer = this.$refs.pdfviewer.ej2Instances;
2541+
const viewer = pdfviewer.value.ej2Instances;
25512542
document.getElementById('undo').addEventListener('click', () => {
25522543
viewer.undo();
25532544
});
@@ -2559,7 +2550,7 @@ const documentLoad = function () {
25592550
</script>
25602551

25612552
{% endhighlight %}
2562-
{% highlight html tabtitle="Server-Backed" %}
2553+
{% highlight html tabtitle="Options API (Server-Backed)" %}
25632554

25642555
<template>
25652556
<div id="app">

‎Document-Processing/PDF/PDF-Viewer/vue/download.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export default {
8686
},
8787

8888
methods: {
89-
downloadClicked: function (args) {
89+
downloadClicked: function () {
9090
this.$refs.pdfviewer.ej2Instances.download();
9191
}
9292
}
@@ -160,7 +160,7 @@ export default {
160160
},
161161

162162
methods: {
163-
downloadClicked: function (args) {
163+
downloadClicked: function () {
164164
this.$refs.pdfviewer.ej2Instances.download();
165165
}
166166
}

‎Document-Processing/PDF/PDF-Viewer/vue/print.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export default {
125125
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
126126
},
127127
methods: {
128-
printClicked: function (args) {
128+
printClicked: function () {
129129
this.$refs.pdfviewer.ej2Instances.print.print();
130130
}
131131
}
@@ -200,7 +200,7 @@ export default {
200200
},
201201

202202
methods: {
203-
printClicked: function (args) {
203+
printClicked: function () {
204204
this.$refs.pdfviewer.ej2Instances.print.print();
205205
}
206206
}

‎Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/custom-toolbar.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ Add toolbar components and the PDF Viewer component to your Vue template. One to
8888
</e-items>
8989
</ejs-toolbar>
9090

91-
<input type ="file" id="fileUpload" accept=".pdf" style="display:block;visibility:hidden;width:0;height:0;"></input>
91+
<input type ="file" id="fileUpload" accept=".pdf" style="display:block;visibility:hidden;width:0;height:0;">
9292

9393
<div class="control-section">
9494
<ejs-pdfviewer

0 commit comments

Comments
 (0)