preferredItemType财产

出口类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 = . 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 = . getelementbyid (“interactiveSelect”);常量panZoomOption = document.createElement (“选项”);panZoomOption。innerHTML =“锅/缩放”;panZoomOption。值= lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;interactiveSelect.appendChild (panZoomOption);常量textOption = document.createElement (“选项”);textOption。值= lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText;textOption。innerHTML =“选择文本”;interactiveSelect.appendChild (textOption);让主题是:lt.Document.Viewer。是=零;interactiveSelect。onchange = (e) = > documentViewer.commands.run ((e。target HTMLSelectElement) value,零);常量annotationsSelect = . getelementbyid (“annotationsSelect”);常量annSelectOption = document.createElement (“选项”);annSelectOption。innerHTML =“选择注释”;annSelectOption。值= lt.Annotations.Engine.AnnObject.selectObjectId.toString ();annotationsSelect.appendChild (annSelectOption);常量annLineOption = document.createElement (“选项”);annLineOption。innerHTML =“行对象”;annLineOption。值= lt.Annotations.Engine.AnnObject.lineObjectId.toString ();annotationsSelect.appendChild (annLineOption);常量annRectOption = document.createElement (“选项”);annRectOption。innerHTML =“矩形对象”;annRectOption。值= lt.Annotations.Engine.AnnObject.rectangleObjectId.toString ();annotationsSelect.appendChild (annRectOption);annotationsSelect。onchange = (e) = > {常量值= + (e。currentTarget HTMLSelectElement) value;documentViewer.annotations.automationManager。currentObjectId =价值;}/ /初始化文档查看器,通过沿板常量createOptions =新lt.Document.Viewer.DocumentViewerCreateOptions ();/ /我们不会在本例中使用元素模式createOptions.viewCreateOptions。useElements =假;createOptions.thumbnailsCreateOptions。useElements =假;/ /中间面板视图createOptions。viewContainer = . getelementbyid (“观众”);/ /缩略图的左侧面板createOptions。thumbnailsContainer = . getelementbyid (“缩略图”);/ /右面板是书签createOptions。bookmarksContainer = . getelementbyid (“书签”);createOptions。useAnnotations =真正的;/ /创建文档查看器是= 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.annotations.initialize ();documentViewer.annotations.automationManager.currentObjectIdChanged.add (函数(发送者,e) {/ /如果做画,经理将返回到选择对象;所以我们需要迫使annotationsSelect元素返回选择对象的选择(annotationsSelect HTMLSelectElement)。值= sender.currentObjectId;});这.loadDefaultDoc(主题是interactiveSelect HTMLSelectElement)}私人loadDefaultDoc =(观众:lt.Document.Viewer。文档Viewer, interactiveSelect: HTMLSelectElement) => {/ /加载一个PDF文档常量url =“https://demo.leadtools.com/images/pdf/leadtools.pdf”;lt.Document.DocumentFactory.loadFromUri (url,零).done((医生:lt.Document.LEADDocument) = > {常量准备好了= ()= > {viewer.setDocument (doc);常量panZoom = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;interactiveSelect。值= panZoom;viewer.commands.run (panZoom零);如果(这.callback)这.callback(观众);}如果(医生。isStructureSupported & & ! doc.structure.isParsed)doc.structure.parse ().done(准备好了)fail (ViewerInitializer.showServiceError);其他的准备好();})fail (ViewerInitializer.showServiceError);}}

进口{ViewerInitializer}从“. . /工具/ ViewerInitializer”;出口类ViewItemTypeJSExample {构造函数(){}run () {新ViewerInitializer (这.createToggleView);}createToggleView =(是)= > {常量输出= . getelementbyid (“输出”);/ /添加按钮来切换项视图类型常量按钮= document.createElement (“按钮”);output.appendChild(按钮);按钮。innerHTML =“切换视图”;按钮。onclick = () = > {/ /当我们设置的首选,ItemType得到相应更新/ /文档格式支持的实际价值/ /格式PDF和多克斯同时支持等/ /格式如TIF和JPEG仅支持光栅/ / SVG和光栅图像查看器之间切换常量视图= documentViewer.view;如果(查看。preferredItemType = = = lt.Document.Viewer.DocumentViewerItemType.svg)视图。preferredItemType = lt.Document.Viewer.DocumentViewerItemType.image;其他的视图。preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;}}}

出口类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 = . 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 = . getelementbyid (“interactiveSelect”);常量panZoomOption = document.createElement (“选项”);panZoomOption。innerHTML =“锅/缩放”;panZoomOption。值= lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;interactiveSelect.appendChild (panZoomOption);常量textOption = document.createElement (“选项”);textOption。值= lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText;textOption。innerHTML =“选择文本”;interactiveSelect.appendChild (textOption);我们是=零;interactiveSelect。onchange = (e) = > documentViewer.commands.run (e.target.value,零);常量annotationsSelect = . getelementbyid (“annotationsSelect”);常量annSelectOption = document.createElement (“选项”);annSelectOption。innerHTML =“选择注释”;annSelectOption。值= lt.Annotations.Engine.AnnObject.selectObjectId.toString ();annotationsSelect.appendChild (annSelectOption);常量annLineOption = document.createElement (“选项”);annLineOption。innerHTML =“对象”;annLineOption。值= lt.Annotations.Engine.AnnObject.lineObjectId.toString ();annotationsSelect.appendChild (annLineOption);常量annRectOption = document.createElement (“选项”);annRectOption。innerHTML =“矩形对象”;annRectOption。值= lt.Annotations.Engine.AnnObject.rectangleObjectId.toString ();annotationsSelect.appendChild (annRectOption);annotationsSelect。onchange = (e) = > {常量值= + e.currentTarget.value;documentViewer.annotations.automationManager。currentObjectId =价值;}/ /初始化文档查看器,通过沿板常量createOptions =新lt.Document.Viewer.DocumentViewerCreateOptions ();/ /我们不会在本例中使用元素模式createOptions.viewCreateOptions。useElements =假;createOptions.thumbnailsCreateOptions。useElements =假;/ /中间面板视图createOptions。viewContainer = . getelementbyid (“观众”);/ /缩略图的左侧面板createOptions。thumbnailsContainer = . getelementbyid (“缩略图”);/ /右面板是书签createOptions。bookmarksContainer = . getelementbyid (“书签”);createOptions。useAnnotations =真正的;/ /创建文档查看器是= 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.annotations.initialize ();documentViewer.annotations.automationManager.currentObjectIdChanged.add (函数(发送者,e) {/ /如果做画,经理将返回到选择对象;所以我们需要迫使annotationsSelect元素返回选择对象的选择annotationsSelect。值= sender.currentObjectId;});这interactiveSelect .loadDefaultDoc(是)}interactiveSelect loadDefaultDoc =(观众)= > {/ /加载一个PDF文档常量url =“https://demo.leadtools.com/images/pdf/leadtools.pdf”;lt.Document.DocumentFactory.loadFromUri (url,零).done ((doc) = > {常量准备好了= ()= > {viewer.setDocument (doc);常量panZoom = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;interactiveSelect。值= panZoom;viewer.commands.run (panZoom零);如果(这.callback)这.callback(观众);}如果(医生。isStructureSupported & & ! doc.structure.isParsed)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 = () = > {常量按钮= . getelementbyid (“exampleButton”);按钮。onclick = () = > {常量示例=新window.examples.ViewItemTypeExample ();example.run ();}};> < /脚本< / html >

/ *删除默认的身体样式。集身体flex作为列;* /身体{保证金:0;显示:flex;flex-direction:列;}.container {保证金:10 px;宽度:钙(100% - 20 px);高度:calc vh - 20 px (100);}.toolbar {高度:5%;宽度:100%;边界底部:2 px固体# 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 {/ *盒阴影(视图、项目、图像边界)* /不必:# 333 2 px 2 px 5 px 1 px;}.lt-view。lt-thumb-item {/ * * /保证金:5 px;填充:5 px;}.lt-item {* / / *项边界:2 px固体# 6 ecaab;background - color: # b2decf;填充:10 px;}.lt-image-border {/ * * /图像边界边界:3 px固体# 444;背景颜色:白色;}.lt-thumb-item {/ * * /缩略图项目边界:2 px固体# 6 ecaab;background - color: # b2decf;}.lt-thumb-item。lt-thumb-item-selected {/ * * /缩略图选择项边界:2 px固体# 59 b2ba;background - color: # 8 ce1e1;}.lt-thumb-item-hovered {* / / *徘徊缩略图项目边界:2 px固体# 52 b996;background - color: # 87 c7b1;}.small-modal {max-width: 200 px;宽度:200 px;}