在文档查看器中保存注释到PDF - HTML5 JavaScript

< >头< meta charset =“utf - 8”/>< meta name =“视口”内容=“宽度=设备宽度,初始= 1.0”/><标题>示例主题是< /名称>< script src =“https://code.jquery.com/jquery-2.2.4.min.js”诚信=“sha256-BbhdlvQf / xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 = "crossorigin =“匿名”> < /脚本><！——导入LEADTOOLS Dependencies——>< script src =”。/ lib / Leadtools.js”> < /脚本>< script src =”。/ lib / Leadtools.Controls.js”> < /脚本>< script src =”。/ lib / Leadtools.Annotations.Engine.js”> < /脚本>< script src =”。/ lib / Leadtools.Annotations.Designers.js”> < /脚本>< script src =”。/ lib / Leadtools.Annotations.Rendering.Javascript.js”> < /脚本>< script src =”。/ lib / Leadtools.Annotations.Automation.js”> < /脚本>< script src =”。/ lib / Leadtools.ImageProcessing.Main.js”> < /脚本>< script src =”。/ lib / Leadtools.ImageProcessing.Color.js”> < /脚本>< script src =”。/ lib / Leadtools.ImageProcessing.Core.js”> < /脚本>< script src =”。/ lib / Leadtools.ImageProcessing.Effects.js”> < /脚本>< script src =”。/ lib / Leadtools.Document.js”> < /脚本>< script src =”。/ lib / Leadtools.Document.Viewer.js”> < /脚本>< link rel =“样式表”类型=“文本/ css”href =“style.css”><！——导入项目依赖项——>< script src =“app.js”类型=“text / javascript”> < /脚本>< / >头身体< >< div类＝“容器”>< 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 ><按钮id =“saveAsPdf”类＝“vcenter push-right”>保存为PDF . txt< / 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%;｝# saveAsPdf {高度:50%;｝/*元素模式的样式* /.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;｝

窗口。onload =函数() {常量licenseUrl =“https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt”；常量developerKey ="添加LEADTOOLS.lic.key.txt文件的内容"；lt.RasterSupport。setLicenseUri (licenseUrl developerKey,函数（setLicenseResult) {//查看license状态如果(setLicenseResult.result) {console.log ("LEADTOOLS客户端许可证设置成功"）;｝其他的｛常量味精=“LEADTOOLS许可证丢失，无效或过期\nError:\n”；console.log(味精);警报(味精);｝})；let documentViewer =零；类ViewerInitializer {构造函数(回调){这.callback =回调;这.init ();｝静态showServiceError = (jqXHR, statusText, errorThrown) => {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 = 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);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。viewContainer = 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);｝｝新ViewerInitializer ();$（“# saveAsPdf”) .click(异步函数() {documentViewer.prepareToSave ();等待lt.Document.DocumentFactory.saveToCache (documentViewer.document);常量jobData =新lt.Document.DocumentConverterJobData ();jobData。documentFormat = lt.Document.Writer.DocumentFormat.pdf;jobData。annotationsMode = lt.Document.DocumentConverterAnnotationsMode.embed;let result = await documentViewer.document.convert(jobData);promptSaveResult(结果);})；函数promptSaveResult(结果){常量resultDocument =结果。文档! =零？url: result.archive.url;常量link = document.createElement(“一个”）;常量url = lt.Document.DocumentFactory.serviceUri +“/”+ resultDocument;链接。Href = url;document.body.appendChild(链接);link.click ();document.body.removeChild(链接);删除联系;｝｝