From: 김현재 <[email protected]>
Sent: Wednesday, April 27, 2022 2:56 AM
To: Syncfusion Support <[email protected]>
Subject: 'How do I zoom in on a specific location in the PDF
viewer?Related Information for Additional Inquiries about '
<ejs-pdfviewer
id="DashPdfViewer" serviceUrl="/api/Viewer"
created="pdfLoad" enableTextSearch="true"
height="650px"
toolbarSettings="@(new
Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { ShowTooltip = true,
ToolbarItems = "SearchOption, MagnificationTool, PanTool, SelectionTool,
PageNavigationTool" })">
</ejs-pdfviewer>
<ejs-accordion
id="defaultAccordion" expandMode="Single"
clicked="DashAccordionClicked"
expanded="DashAccordionExpanded">
<e-accordion-accordionitems>
<e-accordion-accordionitem expanded="true"
header="#HeaderTemplateVV" content="#Content_VV"></e-accordion-accordionitem>
<e-accordion-accordionitem header="#HeaderTemplateHV"
content="#Content_HV"></e-accordion-accordionitem>
<e-accordion-accordionitem header="#HeaderTemplateHE"
content="#Content_HE"></e-accordion-accordionitem>
<e-accordion-accordionitem header="#HeaderTemplateAP"
content="#Content_AP"></e-accordion-accordionitem>
<e-accordion-accordionitem header="#HeaderTemplateSS"
content="#Content_SS"></e-accordion-accordionitem>
</e-accordion-accordionitems>
</ejs-accordion>
<div
id="Content_VV" style="display:none; width:auto;
height:auto;">
<div class="row" style="height:200px;">
<div class="col">
<ejs-accumulationchart id="Chart_VV"
enableAnimation="false" pointRender="pointRender">
<e-accumulation-series-collection>
<e-accumulation-series dataSource="@ViewBag.ChartVV"
xName="xValue" yName="yValue" name="Vertical
Vessel" startAngle="0" endAngle="360"
innerRadius="70%">
<e-accumulationseries-datalabel visible="true"
name="text" position="Outside">
<e-font fontWeight="700"></e-font>
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
<e-accumulationchart-accumulationannotations>
<e-accumulationchart-accumulationannotation Content="<div
style='padding: 5px 5px 5px 5px; font-weight: 1000;'>Total:
@ViewBag.TotalVV</div>" X="54%" Y="52%"
CoordinateUnits='@Syncfusion.EJ2.Charts.Units.Pixel' region='@Syncfusion.EJ2.Charts.Regions.Series'></e-accumulationchart-accumulationannotation>
</e-accumulationchart-accumulationannotations>
<e-accumulationchart-legendsettings
visible="false"></e-accumulationchart-legendsettings>
<e-accumulationchart-tooltipsettings enable="false"></e-accumulationchart-tooltipsettings>
</ejs-accumulationchart>
</div>
</div>
<div class="row" style="height:380px;">
<div class="col"
style="align-content:start;">
<ejs-grid id="Grid_VV"
gridLines="Both" allowTextWrap="true"
rowHeight="25" created="DataBinding" height="300"
toolbar="@(new List<string>() { "Search" })"
allowSelection="false">
<e-grid-searchsettings
fields="@(new string[] { "ITEM"
})"></e-grid-searchsettings>
<e-grid-filterSettings
type="Excel"></e-grid-filterSettings>
<e-grid-textwrapsettings
wrapMode="Header"></e-grid-textwrapsettings>
<e-grid-columns>
<e-grid-column
textAlign="Center" width="13" template="#StateTemplate"></e-grid-column>
<e-grid-column
field="ITEM" headerText="Item No."
textAlign="Center" width="80"></e-grid-column>
<e-grid-column
headerText="Search" textAlign="Center" width="70"
template="#SearchTemplate"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
</div>
</div>
<script
id="SearchTemplate" type="text/x-template">
<span id="${ITEM}" title="${DATA_CHECK}" onclick="SearchIconClick(this)"
class="btn btn-mini e-icons e-search"></span>
</script>
function
SearchIconClick(item) {
var DashViewer =
document.getElementById('DashPdfViewer').ej2_instances[0];
DashViewer.magnificationModule.fitToWidth();
var searchText = item.id;
var count;
for (var i = 0; i < DashViewer.annotationCollection.length;
i++) {
//if
(DashViewer.annotationCollection[i].note.search(item.id) != -1) {
if (DashViewer.annotationCollection[i].note ==
searchText) {
count = i;
DashViewer.annotationCollection[i].fillColor = '#a9d08e';
DashViewer.annotationCollection[i].opacity = 40;
break;
}
}
var bounds = DashViewer.annotationCollection[count].bounds;
var pageNumber =
DashViewer.annotationCollection[count].pageNumber;
var pagePoint = { x: bounds.left, y: bounds.top };
var clientPoint = DashViewer.convertPagePointToClientPoint(pagePoint,
parseInt(pageNumber) + 1);
var rectangle = new DOMRect(clientPoint.x, clientPoint.y,
bounds.width, bounds.height);
DashViewer.zoomToRect(rectangle);
}
Attachment:
New_Compressed_(zipped)_Folder_a665ce20.zip
