在文档查看器中显示文件- HTML5 JavaScript

<头><元charset =“utf - 8”/><元名称="viewport" content="width=device-width, initial-scale=1.0" /><脚本src = " https://code.jquery.com/jquery-2.2.4.min.js "诚信= " sha256-BbhdlvQf / xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 = " crossorigin =“匿名”></脚本><脚本src = " / lib / Leadtools.js”。></脚本><脚本src = " / lib / Leadtools.Controls.js”。></脚本><脚本src = " / lib / Leadtools.Annotations.Engine.js”。></脚本><脚本src = " / lib / Leadtools.Annotations.Designers.js”。></脚本><脚本src = " / lib / Leadtools.Annotations.Rendering.Javascript.js”。></脚本><脚本src = " / lib / Leadtools.Annotations.Automation.js”。></脚本><脚本src = " / lib / Leadtools.ImageProcessing.Main.js”。></脚本><脚本src = " / lib / Leadtools.ImageProcessing.Color.js”。></脚本><脚本src = " / lib / Leadtools.ImageProcessing.Core.js”。></脚本><脚本src = " / lib / Leadtools.ImageProcessing.Effects.js”。></脚本><脚本src = " / lib / Leadtools.Document.js”。></脚本><脚本src = " / lib / Leadtools.Document.Viewer.js”。></脚本><链接rel="样式表" type="text/css" href="style.css"><JS文件将加载HTML5/JS文档查看器到显示——><脚本src = " app.js " type = " text / javascript”></脚本></头><身体><div类= "容器"><div类= "工具栏"><div class = " vcenter push-right”><标签= " interactiveSelect ">交互模式:</标签><选择id = " interactiveSelect "></选择></ div><div class = " vcenter push-right”><标签= " annotationsSelect ">注释对象:</标签><选择id = " annotationsSelect "></选择></ div><Div id="output" class="vcenter push-right"></ div><div id="serviceStatus" class="vcenter push-right"></ div></ div><div类= " docContainer "><div类= " sidepanel " id =“缩略图”></ div><div类= " centerpanel " id =“查看器”></ div><div类= " sidepanel " id =“书签”></ div></ div></ div></身体>

／*删除默认的主体样式。设置身体弯曲为一个柱;* /身体{保证金: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 solid #6ecaab;background - color: # b2decf;填充:10 px;｝.lt-image-border {/*图像边框*/边框:3px solid #444;背景颜色:白色;｝.lt-thumb-item {/*缩略图项*/边框:2px solid #6ecaab;background - color: # b2decf;｝.lt-thumb-item。lt-thumb-item-selected {/*选择缩略图项*/边框:2px solid #59b2ba;background - color: # 8 ce1e1;｝.lt-thumb-item-hovered {/*悬停缩略图项*/边框:2px solid #52b996;background - color: # 87 c7b1;｝.small-modal {max-width: 200 px;宽度:200 px;｝

窗口。onload =函数() {varlicenseUrl =”。/ Leadtools / LEADTOOLS.lic.txt”；vardeveloperKey ="添加LEADTOOLS.lic.key.txt文件的内容"；lt.RasterSupport。setLicenseUri (licenseUrl developerKey,函数（setLicenseResult) {//查看license的状态如果(setLicenseResult.result) {console.log ("LEADTOOLS客户端许可证设置成功"）;｝其他的｛var味精="LEADTOOLS许可证丢失，无效或过期\nError:\n"；console.log(味精);警报(味精);｝})；类ViewerInitializer {构造函数(回调){这.callback =回调;这.init ();｝静态showServiceError = (jqXHR, statusText, errorthrow) => {alert ("从服务返回错误。详情请参见控制台。”）常量serviceError = lt.Document.ServiceError。parseError (jqXHR statusText errorThrown);console.error (serviceError);｝Init = () => {这.initFactory ();这.testConnection ();｝initFactory = () => {//要与DocumentService通信，它必须正在运行!//修改这些参数以匹配服务的路径。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, errorthrow) => {serviceStatus。innerHTML =“服务连接不可用。”；ViewerInitializer。showServiceError (jqXHR statusText errorThrown);})；｝createDocumentViewer = () => {//初始化用户界面常量interactiveSelect = . getelementbyid (“interactiveSelect”）;//在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) =>零）;常量annotationsSelect = . getelementbyid (“annotationsSelect”）;//在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注释documentViewer.annotations.initialize ();documentViewer.annotations.automationManager.currentObjectIdChanged.add (函数(发送者,e) {//绘图完成后，管理器将返回到所选对象;所以我们需要强制annotationsSelect元素返回到选择对象选项annotationsSelect。值= sender.currentObjectId;})；这interactiveSelect .loadDefaultDoc(是)｝loadDefaultDoc = async(查看器，interactiveSelect) => {//加载PDF文档试一试｛常量url =“https://demo.leadtools.com/images/pdf/leadtools.pdf”；lt.Document.DocumentFactory.loadFromUri(url，零）;医生。isReadOnly =假；viewer.setDocument (doc);常量panZoom = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;interactiveSelect。值= panZoom;viewer.commands.run (panZoom零）如果（这.callback)这.callback(观众);如果(医生。isStructureSupported && !doc.structure.isParse) {等待doc.structure.parse ()｝｝抓(错误){console.error(错误)｝｝｝新ViewerInitializer ();｝