currentPageNumber财产

出口类ViewerInitializer {私人回调:(查看器:lt.Document.Viewer.DocumentViewer) =>无效＝零；构造函数(回调?:(查看器:lt.Document.Viewer.DocumentViewer) =>无效){这.callback =回调;这.init ();｝公共静态showServiceError = (jqXHR, statusText, errorThrown) => {alert ('从服务返回错误。详见控制台。”）常量serviceError = lt.Document.ServiceError。parseError(jqXHR, statusText, errorThrown);console.error (serviceError);｝私人Init = () => {这.initFactory ();这.testConnection ();｝私人initFactory = () => {lt.RasterSupport.setLicenseUri (“https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt”，“EVAL”，零）;//要与DocumentsService通信，它必须正在运行!//更改这些参数以匹配服务的路径。lt.Document.DocumentFactory.serviceHost =“http://localhost: 40000”；lt.Document.DocumentFactory.servicePath =＇＇；lt.Document.DocumentFactory.serviceApiPath =“api”；｝私人testConnection = () => {常量serviceStatus = document.getElementById(“serviceStatus”）;serviceStatus。innerHTML =“连接到服务:”+ lt.Document.DocumentFactory.serviceUri;lt.Document.DocumentFactory.verifyService ().done((serviceData) => {serviceStatus。innerHTML =“服务连接已验证!”；这.createDocumentViewer ();}).fail((jqXHR, statusText, errorThrown) => {serviceStatus。innerHTML ='服务连接不可用。'；ViewerInitializer。showServiceError(jqXHR, statusText, errorThrown);})；｝私人createDocumentViewer = () => {//初始化用户界面常量interactiveSelect = document.getElementById(“interactiveSelect”）;常量panZoomOption = document.createElement(“选项”）;panZoomOption。innerHTML =“Pan / Zoom”；panZoomOption。value = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;interactiveSelect.appendChild (panZoomOption);常量textOption = document.createElement(“选项”）;textOption。value = lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText;textOption。innerHTML =“选择文本”；interactiveSelect.appendChild (textOption);let documentViewer: lt.Document.Viewer.DocumentViewer =零；interactiveSelect。onchange = (e) => documentViewer.commands.run((e.target as HTMLSelectElement).value，零）;常量注释select = document.getElementById(“annotationsSelect”）;常量annSelectOption = document.createElement(“选项”）;annSelectOption。innerHTML =“选择注释”；annSelectOption。value = lt.Annotations.Engine.AnnObject.selectObjectId.toString();annotationsSelect.appendChild (annSelectOption);常量annLineOption = document.createElement(“选项”）;annLineOption。innerHTML =“行对象”；annLineOption。value = lt.Annotations.Engine.AnnObject.lineObjectId.toString();annotationsSelect.appendChild (annLineOption);常量annRectOption = document.createElement(“选项”）;annRectOption。innerHTML =“矩形对象”；annRectOption。value = lt.Annotations.Engine.AnnObject.rectangleObjectId.toString();annotationsSelect.appendChild (annRectOption);annotationsSelect。Onchange = (e) => {常量值= +(e。当前目标为HTMLSelectElementdocumentviewer .annotations. automationmanager . currentobectid = value;｝// Init文档查看器，沿着面板传递常量createOptions =新lt.Document.Viewer.DocumentViewerCreateOptions ();//在这个例子中我们不打算使用elements模式createOptions.viewCreateOptions.useElements =假；createOptions.thumbnailsCreateOptions.useElements =假；//视图的中间面板createOptions。视图Container = document.getElementById(“观众”）;//用于缩略图的左边面板createOptions。thumbnailsContainer = document.getElementById(“缩略图”）;//右边的面板是书签createOptions。bookmarksContainer = document.getElementById(“书签”）;createOptions。useAnnotations =真正的；//创建文档查看器documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions);//我们更喜欢SVG视图documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;//创建html5渲染引擎documentViewer.annotations.automationManager.renderingEngine =新lt.Annotations.Rendering.AnnHtml5RenderingEngine ();//初始化documentViewer注释documentViewer.annotations.initialize ();documentViewer.annotations.automationManager.currentObjectIdChanged.add (函数(发件人，e) {//当完成绘制时，管理器将返回到选中的对象;所以我们需要强制annotationsSelect元素返回到select object选项(注释选择作为HTMLSelectElement)。value = sender. currentobectid;})；这.loadDefaultDoc(documentViewer, interactiveSelect as HTMLSelectElement)｝私人loadDefaultDoc =(查看器:lt.Document.Viewer。文档视图er, interactiveSelect: HTMLSelectElement) => {//加载PDF文档常量url =“https://demo.leadtools.com/images/pdf/leadtools.pdf”；lt.Document.DocumentFactory.loadFromUri (url,零）.done((doc: lt.Document.LEADDocument) => {常量Ready = () => {viewer.setDocument (doc);常量panZoom = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;interactiveSelect。value = panZoom;viewer.commands.run (panZoom零）;如果（这.callback)这.callback(观众);｝如果(医生。isStructureSupported && !doc.structure.parse ().done(准备好了)fail (ViewerInitializer.showServiceError);其他的准备好();})fail (ViewerInitializer.showServiceError);｝｝

进口{ViewerInitializer}“. . /工具/ ViewerInitializer”；出口类CurrentPageNumberJSExample {Run = () => {新ViewerInitializer (这.addOperationEvent);｝addOperationEvent = (documentViewer) => {常量outputElement = document.getElementById(“输出”）;//当用户点击一个链接时，添加一个回调函数(例如，在页面上添加书签)documentViewer.operation。添加((发送方,e) = > {//如果用户进入了一个新的页面(例如，在点击一个链接或缩略图之后)…如果(e.operation === lt.Document.Viewer.DocumentViewerOperation.gotoPage && e.isPostOperation) {/ /……更新页码outputElement。innerHTML =“当前页码是现在”+ documentViewer.currentPageNumber;｝})；｝｝

出口类ViewerInitializer {构造函数(回调){这.callback =回调;这.init ();｝静态showServiceError = (jqXHR, statusText, errorThrown) => {alert ("服务返回错误。详见控制台。”）常量serviceError = lt.Document.ServiceError。parseError(jqXHR, statusText, errorThrown);console.error (serviceError);｝Init = () => {这.initFactory ();这.testConnection ();｝initFactory = () => {lt.RasterSupport.setLicenseUri (“https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt”，“EVAL”，零）;//要与DocumentsService通信，它必须正在运行!//更改这些参数以匹配服务的路径。lt.Document.DocumentFactory.serviceHost =“http://localhost: 40000”；lt.Document.DocumentFactory.servicePath =＂＂；lt.Document.DocumentFactory.serviceApiPath =“api”；｝testConnection = () => {常量serviceStatus = document.getElementById(“serviceStatus”）;serviceStatus。innerHTML =“连接到服务:”+ lt.Document.DocumentFactory.serviceUri;lt.Document.DocumentFactory.verifyService ().done((serviceData) => {serviceStatus。innerHTML =“服务连接已验证!”；这.createDocumentViewer ();}).fail((jqXHR, statusText, errorThrown) => {serviceStatus。innerHTML =“服务连接不可用。”；ViewerInitializer。showServiceError(jqXHR, statusText, errorThrown);})；｝createDocumentViewer = () => {//初始化用户界面常量interactiveSelect = document.getElementById(“interactiveSelect”）;常量panZoomOption = document.createElement(“选项”）;panZoomOption。innerHTML =“Pan / Zoom”；panZoomOption。value = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;interactiveSelect.appendChild (panZoomOption);常量textOption = document.createElement(“选项”）;textOption。value = lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText;textOption。innerHTML =“选择文本”；interactiveSelect.appendChild (textOption);let documentViewer =零；interactiveSelect。onchange = (e) => documentViewer.commands.run(e.target.value)零）;常量注释select = document.getElementById(“annotationsSelect”）;常量annSelectOption = document.createElement(“选项”）;annSelectOption。innerHTML =“选择注释”；annSelectOption。value = lt.Annotations.Engine.AnnObject.selectObjectId.toString();annotationsSelect.appendChild (annSelectOption);常量annLineOption = document.createElement(“选项”）;annLineOption。innerHTML =“对象”；annLineOption。value = lt.Annotations.Engine.AnnObject.lineObjectId.toString();annotationsSelect.appendChild (annLineOption);常量annRectOption = document.createElement(“选项”）;annRectOption。innerHTML =“矩形对象”；annRectOption。value = lt.Annotations.Engine.AnnObject.rectangleObjectId.toString();annotationsSelect.appendChild (annRectOption);annotationsSelect。Onchange = (e) => {常量value = +e.currentTarget.value;documentviewer .annotations. automationmanager . currentobectid = value;｝// Init文档查看器，沿着面板传递常量createOptions =新lt.Document.Viewer.DocumentViewerCreateOptions ();//在这个例子中我们不打算使用elements模式createOptions.viewCreateOptions.useElements =假；createOptions.thumbnailsCreateOptions.useElements =假；//视图的中间面板createOptions。视图Container = document.getElementById(“观众”）;//用于缩略图的左边面板createOptions。thumbnailsContainer = document.getElementById(“缩略图”）;//右边的面板是书签createOptions。bookmarksContainer = document.getElementById(“书签”）;createOptions。useAnnotations =真正的；//创建文档查看器documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions);//我们更喜欢SVG视图documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;//创建html5渲染引擎documentViewer.annotations.automationManager.renderingEngine =新lt.Annotations.Rendering.AnnHtml5RenderingEngine ();//初始化documentViewer注释documentViewer.annotations.initialize ();documentViewer.annotations.automationManager.currentObjectIdChanged.add (函数(发件人，e) {//当完成绘制时，管理器将返回到选中的对象;所以我们需要强制annotationsSelect元素返回到select object选项annotationsSelect。value = sender. currentobectid;})；这interactiveSelect .loadDefaultDoc(是)｝loadDefaultDoc = (viewer, interactiveSelect) => {//加载PDF文档常量url =“https://demo.leadtools.com/images/pdf/leadtools.pdf”；lt.Document.DocumentFactory.loadFromUri (url,零）.done((doc) => {常量Ready = () => {viewer.setDocument (doc);常量panZoom = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;interactiveSelect。value = panZoom;viewer.commands.run (panZoom零）;如果（这.callback)这.callback(观众);｝如果(医生。isStructureSupported && !doc.structure.parse ().done(准备好了)fail (ViewerInitializer.showServiceError);其他的准备好();})fail (ViewerInitializer.showServiceError);｝｝

<！doctype html >< html lang =“en”>




 . DocViewer< >头< script src =“https://code.jquery.com/jquery-2.2.4.min.js”诚信=“sha256-BbhdlvQf / xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 = "crossorigin =“匿名”> < /脚本>< script src =“. . / LT / Leadtools.js”> < /脚本>< script src =“. . / LT / Leadtools.Controls.js”> < /脚本>< script src =“. . / LT / Leadtools.Annotations.Engine.js”> < /脚本>< script src =“. . / LT / Leadtools.Annotations.Designers.js”> < /脚本>< script src =“. . / LT / Leadtools.Annotations.Rendering.Javascript.js”> < /脚本>< script src =“. . / LT / Leadtools.Annotations.Automation.js”> < /脚本>< script src =“. . / LT / Leadtools.ImageProcessing.Main.js”> < /脚本>< script src =“. . / LT / Leadtools.ImageProcessing.Color.js”> < /脚本>< script src =“. . / LT / Leadtools.ImageProcessing.Core.js”> < /脚本>< script src =“. . / LT / Leadtools.ImageProcessing.Effects.js”> < /脚本>< script src =“. . / LT / Leadtools.Document.js”> < /脚本>< script src =“. . / LT / Leadtools.Document.Viewer.js”> < /脚本>< link rel =“样式表”类型=“文本/ css”href =“. . / css / examples.css”><！——所有的演示文件都被捆绑并附加到窗口——>< script src =“. . / bundle.js”类型=“text / javascript”> < /脚本>> < /头身体< >< div类＝“容器”>< div类＝“工具栏”>< div类＝“vcenter push-right”><按钮类型=“按钮”id =“exampleButton”> > < /按钮运行示例< / div >< div类＝“vcenter push-right”><标签为＝“interactiveSelect”> >交互模式:< /标签<选择id =“interactiveSelect”> < /选择>< / div >< div类＝“vcenter push-right”><标签为＝“annotationsSelect”> >注释对象:< /标签<选择id =“annotationsSelect”> < /选择>< / div >< div id =“输出”类＝“vcenter push-right”> < / div >< div id =“serviceStatus”类＝“vcenter push-right”> < / div >< / div >< div类＝“docContainer”>< div类＝“sidepanel”id =“缩略图”> < / div >< div类＝“centerpanel”id =“观众”> < / div >< div类＝“sidepanel”id =“书签”> < / div >< / div >< / div >身体< / >< >脚本窗口。Onload = () => {常量button = document.getElementById(“exampleButton”）;按钮。Onclick = () => {常量示例=新window.examples.CurrentPageNumberExample ();example.run ();｝};> < /脚本< / html >

／*删除默认的身体样式。将主体设置为可弯曲的列;* /身体{保证金:0;显示:flex;flex-direction:列;｝.container {保证金:10 px;宽度:calc(100% - 20px);高度:calc(100vh - 20px);｝.toolbar {高度:5%;宽度:100%;Border-bottom: 2px solid #333;flex-direction:行;显示:flex;｝#{书签溢出:隐藏;｝.vcenter {margin-top:汽车;margin-bottom:汽车;｝.hcenter {margin-left:汽车;margin-right:汽车;｝.push-right {margin-left: 10 px;｝.docContainer {高度:95%;宽度:100%;显示:flex;flex-direction:行;｝.sidepanel {宽度:15%;高度:100%;｝.centerpanel {宽度:100%;高度:100%;｝/ *风格为元素模式。* /.lt-item， .lt-image-border {/*框阴影(视图，项目，图像边框)*/Box-shadow: #333 2px 2px 5px 1px;｝.lt-view。lt-thumb-item {/*视图*/保证金:5 px;填充:5 px;｝.lt-item {/*项目*/边框:2px实心#6ecaab;background - color: # b2decf;填充:10 px;｝.lt-image-border {/*图像边框*/边框:3px实体#444;背景颜色:白色;｝.lt-thumb-item {/*缩略图项*/边框:2px实心#6ecaab;background - color: # b2decf;｝.lt-thumb-item。lt-thumb-item-selected {/*所选缩略图项*/边框:2px实体#59b2ba;background - color: # 8 ce1e1;｝.lt-thumb-item-hovered {/*悬浮缩略图项目*/边框:2px实体#52b996;background - color: # 87 c7b1;｝.small-modal {max-width: 200 px;宽度:200 px;｝