Skip to content

Commit ba2f745

Browse files
authored
Merge pull request #21 from SyncfusionExamples/EJ2-834573-LibraryBounds
834573: Library Bounds to Viewer bounds Sample
2 parents a8d6e6b + 216b671 commit ba2f745

File tree

2 files changed

+115
-0
lines changed

2 files changed

+115
-0
lines changed
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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/27.1.57/ej2-base/styles/material.css" rel="stylesheet">
8+
<link href="https://cdn.syncfusion.com/ej2/27.1.57/ej2-pdfviewer/styles/material.css" rel="stylesheet">
9+
<link href="https://cdn.syncfusion.com/ej2/27.1.57/ej2-buttons/styles/material.css" rel="stylesheet">
10+
<link href="https://cdn.syncfusion.com/ej2/27.1.57/ej2-popups/styles/material.css" rel="stylesheet">
11+
<link href="https://cdn.syncfusion.com/ej2/27.1.57/ej2-navigations/styles/material.css" rel="stylesheet">
12+
<link href="https://cdn.syncfusion.com/ej2/27.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet">
13+
<link href="https://cdn.syncfusion.com/ej2/27.1.57/ej2-lists/styles/material.css" rel="stylesheet">
14+
<link href="https://cdn.syncfusion.com/ej2/27.1.57/ej2-inputs/styles/material.css" rel="stylesheet">
15+
<link href="https://cdn.syncfusion.com/ej2/27.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet">
16+
<link href="https://cdn.syncfusion.com/ej2/27.1.57/ej2-notifications/styles/material.css" rel="stylesheet">
17+
18+
<!-- Essential JS 2 PDF Viewer's script -->
19+
<script src="https://cdn.syncfusion.com/ej2/27.1.57/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+
<div id="PdfViewer" style="height:500px;width:100%;"></div>
27+
</div>
28+
29+
30+
<script>
31+
var ele = document.getElementById('container');
32+
if(ele) {
33+
ele.style.visibility = "visible";
34+
}
35+
</script>
36+
<script src="index.js" type="text/javascript"></script>
37+
</body></html>
Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
var pdfviewer = new ej.pdfviewer.PdfViewer({
2+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
3+
serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
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+
pdfviewer.appendTo('#PdfViewer');
8+
9+
pdfviewer.exportSuccess = function (args) {
10+
console.log(args.exportData);
11+
const blobURL = args.exportData;
12+
13+
// Converting the exported blob into object
14+
convertBlobURLToObject(blobURL)
15+
.then((objectData) => {
16+
console.log(objectData);
17+
var datas = objectData;
18+
var shapeAnnotationData = datas['pdfAnnotation'][0]['shapeAnnotation'];
19+
shapeAnnotationData.map(data => {
20+
if (data && data.rect && parseInt(data.rect.width)) {
21+
22+
var pageHeight = pdfviewer.getPageInfo(parseInt(data.page)).height;
23+
24+
// Converting PDF Library values into PDF Viewer values.
25+
var rect = {
26+
x: (parseInt(data.rect.x) * 96) / 72,
27+
y: (parseInt(pageHeight) - parseInt(data.rect.height)) * 96 / 72,
28+
width: (parseInt(data.rect.width) - parseInt(data.rect.x)) * 96 / 72,
29+
height: (parseInt(data.rect.height) - parseInt(data.rect.y)) * 96 / 72,
30+
};
31+
}
32+
if ((data.type == 'Line' || data.type == 'Arrow') && data.start && data.end) {
33+
// Split and parse the start and end points
34+
const [startX, startY] = data.start.split(',').map(Number);
35+
const [endX, endY] = data.end.split(',').map(Number);
36+
37+
// Convert to PDF Viewer coordinates
38+
var pageHeight = pdfviewer.getPageInfo(parseInt(data.page)).height;
39+
const pdfStartX = (startX * 96) / 72;
40+
const pdfStartY = (parseInt(pageHeight) - startY) * 96 / 72;
41+
const pdfEndX = (endX * 96) / 72;
42+
const pdfEndY = (parseInt(pageHeight) - endY) * 96 / 72;
43+
44+
rect = {
45+
x: Math.min(pdfStartX, pdfEndX),
46+
y: Math.min(pdfStartY, pdfEndY),
47+
width: Math.abs(pdfEndX - pdfStartX),
48+
height: Math.abs(pdfEndY - pdfStartY),
49+
};
50+
}
51+
52+
if (rect != null && data.type != 'Text') {
53+
console.log(data.name);
54+
console.log(rect);
55+
console.log("-------------------------");
56+
}
57+
});
58+
})
59+
.catch((error) => {
60+
console.error('Error converting Blob URL to object:', error);
61+
});
62+
};
63+
64+
// Function to convert Blob URL to object
65+
function convertBlobURLToObject(blobURL) {
66+
return fetch(blobURL)
67+
.then((response) => response.blob())
68+
.then((blobData) => {
69+
return new Promise((resolve, reject) => {
70+
const reader = new FileReader();
71+
reader.onloadend = () => {
72+
resolve(JSON.parse(reader.result));
73+
};
74+
reader.onerror = reject;
75+
reader.readAsText(blobData);
76+
});
77+
});
78+
}

0 commit comments

Comments
 (0)