Skip to content

Commit 327ce6e

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1057857: Link Annotation and Text Stamp in JavaScript PDF Viewer
1 parent d6f335e commit 327ce6e

4 files changed

Lines changed: 184 additions & 0 deletions

File tree

‎Annotations/Link Annotation/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html><html lang="en"><head>
2+
<title>EJ2 PDF Viewer</title>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="description" content="Typescript PDF Viewer Control">
6+
<meta name="author" content="Syncfusion">
7+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-base/styles/material.css" rel="stylesheet">
8+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-pdfviewer/styles/material.css" rel="stylesheet">
9+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
10+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-popups/styles/material.css" rel="stylesheet">
11+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-navigations/styles/material.css" rel="stylesheet">
12+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-dropdowns/styles/material.css" rel="stylesheet">
13+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-lists/styles/material.css" rel="stylesheet">
14+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-inputs/styles/material.css" rel="stylesheet">
15+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-splitbuttons/styles/material.css" rel="stylesheet">
16+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-notifications/styles/material.css" rel="stylesheet">
17+
18+
<!-- Essential JS 2 PDF Viewer's script -->
19+
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.js" type="text/javascript"></script>
20+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
21+
22+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
23+
</head>
24+
<body>
25+
<div id="container">
26+
<button id="AddInternalLink">Add Internal Link</button>
27+
<button id="AddExternalLink">Add External Link</button>
28+
<button id="EditLink">Edit Link</button>
29+
<button id="DeleteLink">Delete Link</button>
30+
<div id="PdfViewer" style="height:500px;width:100%;"></div>
31+
</div>
32+
33+
34+
<script>
35+
var ele = document.getElementById('container');
36+
if(ele) {
37+
ele.style.visibility = "visible";
38+
}
39+
</script>
40+
<script src="index.js" type="text/javascript"></script>
41+
</body></html>

‎Annotations/Link Annotation/index.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
var pdfviewer = new ej.pdfviewer.PdfViewer({
2+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
3+
resourceUrl: "https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2-pdfviewer-lib",
4+
});
5+
ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
6+
ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
7+
8+
pdfviewer.appendTo('#PdfViewer');
9+
document.getElementById("AddInternalLink").addEventListener('click', function(){
10+
pdfviewer.annotation.addAnnotation('Link', {
11+
offset: { x: 200, y: 480 },
12+
pageNumber: 1,
13+
width: 150,
14+
height: 75,
15+
destinationPageIndex: 4,
16+
destinationLocation: { x: 100, y: 200 },
17+
zoomValue: 4,
18+
strokeColor: '#1433e3'
19+
});
20+
});
21+
22+
document.getElementById("AddExternalLink").addEventListener('click', function(){
23+
pdfviewer.annotation.addAnnotation('Link', {
24+
offset: { x: 450, y: 480 },
25+
pageNumber: 1,
26+
width: 150,
27+
height: 75,
28+
url: 'https://www.syncfusion.com',
29+
strokeColor: '#FF0000'
30+
});
31+
});
32+
33+
document.getElementById("EditLink").addEventListener('click', function(){
34+
for (var i = 0; i < pdfviewer.annotationCollection.length; i++) {
35+
if (pdfviewer.annotationCollection[i].subject === 'Link') {
36+
pdfviewer.annotationCollection[i].strokeColor = '#1fcbd4';
37+
pdfviewer.annotationCollection[i].thickness = 2;
38+
pdfviewer.annotationCollection[i].bounds = { left: 100, top: 100, width: 100, height: 100 };
39+
pdfviewer.annotationCollection[i].url = 'https://www.google.com';
40+
pdfviewer.annotationCollection[i].destinationPageIndex = 3;
41+
pdfviewer.annotationCollection[i].destinationLocation = { x: 300, y: 300 };
42+
pdfviewer.annotationCollection[i].zoomValue = 1;
43+
pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
44+
break;
45+
}
46+
}
47+
});
48+
49+
document.getElementById("DeleteLink").addEventListener('click', function(){
50+
var linkAnnotation = pdfviewer.annotationCollection.find(function (item) { return item.subject === 'Link'; });
51+
52+
if (linkAnnotation) {
53+
pdfviewer.annotation.deleteAnnotationById(linkAnnotation.annotationId);
54+
}
55+
});

‎Annotations/Text and Image Stamp Annotation/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html><html lang="en"><head>
2+
<title>EJ2 PDF Viewer</title>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="description" content="Typescript PDF Viewer Control">
6+
<meta name="author" content="Syncfusion">
7+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-base/styles/material.css" rel="stylesheet">
8+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-pdfviewer/styles/material.css" rel="stylesheet">
9+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
10+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-popups/styles/material.css" rel="stylesheet">
11+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-navigations/styles/material.css" rel="stylesheet">
12+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-dropdowns/styles/material.css" rel="stylesheet">
13+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-lists/styles/material.css" rel="stylesheet">
14+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-inputs/styles/material.css" rel="stylesheet">
15+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-splitbuttons/styles/material.css" rel="stylesheet">
16+
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-notifications/styles/material.css" rel="stylesheet">
17+
18+
<!-- Essential JS 2 PDF Viewer's script -->
19+
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.js" type="text/javascript"></script>
20+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
21+
22+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
23+
</head>
24+
<body>
25+
<div id="container">
26+
<button id="AddTextStamp">Add Text Stamp</button>
27+
<button id="AddImageStamp">Add Image Stamp</button>
28+
<div id="PdfViewer" style="height:500px;width:100%;"></div>
29+
</div>
30+
31+
32+
<script>
33+
var ele = document.getElementById('container');
34+
if(ele) {
35+
ele.style.visibility = "visible";
36+
}
37+
</script>
38+
<script src="index.js" type="text/javascript"></script>
39+
</body></html>

‎Annotations/Text and Image Stamp Annotation/index.js‎

Lines changed: 49 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)