Skip to content

Commit bde5a4e

Browse files
877107: Library bounds to Viewer Bounds Sample
1 parent adf7afd commit bde5a4e

File tree

2 files changed

+126
-0
lines changed

2 files changed

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

0 commit comments

Comments
 (0)